How do YOU format your HTML?

**geiger** · Jun 20, 2002 19:40

How do you format your HTML?

I used to use the traditional indent style. You know, the:

PHP Code:


<body>

<table>

  <tr>

    <td></td>

  </tr>

</table>

</body>

etc., but after seeing the following style recently I decided to adopt it. Here's some HTML from my homepage:

PHP Code:


<!-- BEGIN main content -->

<TABLE width="603" border="0" cellspacing="0" cellpadding="10">

<TR valign="top">

<TD colspan="4">



<DIV align="center"><BR>

<P><IMG src="/images/4netdesign.gif" width="242" height="149"></P>



<!-- BEGIN header paragraph outer table-->

<TABLE width="583" border="0" cellspacing="0" cellpadding="0">

<TR>

    <TD><IMG src="/images/dotacross.gif" width="583" height="1" alt="."></TD>

</TR>

<TR>

    <TD>



<!-- BEGIN header paragraph inner table-->

<TABLE width="583" border="0" cellspacing="0" cellpadding="5">

<TR>

    <TD><P><B>4NetDesign Internet Solutions</B> provides businesses with interactive, high-performance websites utilizing a myriad of creative and innovative tools.</P></TD>

</TR>

</TABLE>

<!-- END header paragraph inner table-->



</TD>

</TR>

<TR>

    <TD><IMG src="/images/dotacross.gif" width="583" height="1" alt="."></TD>

</TR>

</TABLE>

<!-- END header paragraph outer table-->



<!-- BEGIN page content-->

<P>Our skilled designers assist in providing the professional identification you need to succeed while complimenting style with powerful back-end control structures. We take great pride in satisfying our clients with products they can promote and benefit from.</P>

<P>Explore our impressive <A href="/portfolio/">portfolio</A> or <A href="/contact/">contact us</A> via our online form.</P>

<!-- END page content-->



</DIV>

</TD>

</TR>

</TABLE>

<!-- END main content -->

What format do YOU use?

**Aes** · Jun 20, 2002 19:46

I don't indent at all on most of my projects. I find that with indentation comes layout problems (think: trying to get images in multiple cells to align correctly in all browsers). When I just code everything in order without indenting each block-level, or even in-line elements, my designs seem to have little or no problems.

-Colin

**geiger** · Jun 20, 2002 19:48

I noticed that too, recently.
What bugs me is that you have to have <td>content</td> and can't do:
<td>
content
</td>
Because it messes everything up. Post a sample of your code?

**Aes** · Jun 20, 2002 20:00

Here's a sample I pulled off of the header of one of my sites:

Code:

<div id="main">
<table width="760" border="0" cellspacing="0" cellpadding="0" class="maintable">
<tr>
<td width="760" height="134" align="center" valign="top">CONTENT</td>
</tr>
</table>

<table width="760" border="0" cellspacing="0" cellpadding="0" class="maintable">
<tr>
<td width="45" height="25" align="center" valign="top">CONTENT</td>
<td width="680" height="25" align="center" valign="top">CONTENT</td>
<td width="45" height="25" align="center" valign="top">CONTENT</td>
</tr>
</table>

-Colin

**Skunk** · Jun 21, 2002 00:31

I tend not to bother with indentation (also I always use lower case tags but then these days I tend to code in XHTML which requires them anyway). The great thing about using CSS for layout instead of tables is that it makes your code about 100 times cleaner and more pleasant to read. You don't have to worry about hacking all kinds of weird table tags, you just create the content using plain markup and then wrap a few different sections in a div with an ID, then use the external CSS file to define how these divs should be positioned.

**xhtmlcoder** · Jun 21, 2002 03:03

I use a combination; but mainly indentation perceptibly not using indents does help keep lower file size and help prevent some anonymities, which you could get with <table> and <textarea> and various things like submit buttons.

**w3exit** · Jun 21, 2002 08:21

I usually let dreamweaver do it ... if I edit it myself i try to use the same format so that it looks neater

**Joel** · Jun 21, 2002 09:49

I'm in the same boat as Skunk. Using CSS layouts makes the XHTML code concise enough that indentation is for the most part unnecessary.

**moospot** · Jun 21, 2002 10:08

I always try to to code in the traditional manner. It's just easier to read when you have very large pages.

While CSS coding may be easier to read, it doesn't always apply when you are coding for the broadest general audience (aaargh Netscape 4).

**qslack** · Jun 21, 2002 10:33

I always indent my code. Like this:

Code:

<div id="header">
	<div id="logo">
		
	</div>
	
	<div id="search">
		<form action="search" method="post">
			<div>
				Search: 
			</div>
		</form>
	</div>
	
	<div id="topnav">
		<a href="fdfds">Home</a>
	</div>
</div>

I code everything by hand, so being able to read and understand my HTML quickly is a necessity.

**mjames** · Jun 21, 2002 12:04

I code with indentation. For example, here is how Colin's HTML is in my preferred way:

Code:

<DIV id="main">
  <TABLE width="760" border="0" cellspacing="0" cellpadding="0" class="maintable">
    <TR>
      <TD width="760" height="134" align="center" valign="top">CONTENT</TD>
    </TR>
  </TABLE>
  <TABLE width="760" border="0" cellspacing="0" cellpadding="0" class="maintable">
    <TR>
      <TD width="45" height="25" align="center" valign="top">CONTENT</TD>
      <TD width="680" height="25" align="center" valign="top">CONTENT</TD>
      <TD width="45" height="25" align="center" valign="top">CONTENT</TD>
    </TR>
  </TABLE>
</DIV>

I use an old program no longer in development called AOLpress to help tidy up large chunks of code.

**19nine78** · Jun 21, 2002 12:39

indents, tabs not spaces

cheers

alastair

**notepad_coder** · Jun 21, 2002 18:00

I use all lowercase letters and indent 2 spaces like this:

PHP Code:


<html>

  <head>

    <title></title>

  </head>

  <body>

    <table width=400>

      <tr>

        <td width="50%"></td>

        <td width=200></td>

      </tr>

    </table>

  </body>

</html>

**Adam P.** · Jun 22, 2002 07:19

I code with indentation as well, much like Marc's. It makes it so much easier to keep track of nested tables. Too much indentation can be bad, though, so sometimes I leave <TR> and <TD> with the same left alignment.

**platinum** · Jun 22, 2002 07:34

I code much the same way notepadcoder does

2 spaces

That it, if I hand code it

**Purple Penguin** · Jun 22, 2002 12:10

Originally posted by mjames
I use an old program no longer in development called AOLpress to help tidy up large chunks of code.

umm...hmm...I think that was my first html editor, I hated it though.
I use html-kit now.
I don't indent my code and I use lower case tags.

**Ian Glass** · Jun 22, 2002 15:11

Straight from HTML-Kit:

:-)

~~Ian

**Desdelena** · Jun 23, 2002 18:18

Originally posted by Aes
I don't indent at all on most of my projects. I find that with indentation comes layout problems (think: trying to get images in multiple cells to align correctly in all browsers). When I just code everything in order without indenting each block-level, or even in-line elements, my designs seem to have little or no problems.

-Colin

I do the same. No indents. I find the coding MUCH harder to read when its indented as well.

**mjames** · Jun 23, 2002 19:29

Originally posted by Purple Penguin

umm...hmm...I think that was my first html editor, I hated it though.
I use html-kit now.
I don't indent my code and I use lower case tags.

Does anyone know of any (stand alone) programs that specialize in tidying up code and spacing it neatly, etc.? Maybe it is time to finally give a nice burial to 'ol AOLpress.

**randem** · Jun 23, 2002 19:32

I typically only indent large block-level elements, and even then, only one space. This is only for visual seperation when looking at source code. The important thing is file size, which is heavily impaired by all the extra spaces/tabs.

Example:

Code:

<div id="header">
 <p>blah blah blah</p>
 <p>...etc...</p>
</div>

<div id="content">
 <p>blah blah blah</p>
 <p>blah blah blah</p>
 <p>blah blah blah</p>
 <p>...etc...</p>
</div>

<div id="footer">
 <p>blah blah blah</p>
 <p>...etc...</p>
</div>

**Ruchir** · Jun 24, 2002 02:21

i prefer indentation and spaces between nesting. for eg -

Code:

<table>

<tr>

<td>1</td>
<td>2</td>
<td>3</td>

</tr>

<tr>

<td>1</td>
<td>2</td>
<td>3</td>

</tr>

</table>

That looks neat and easy to edit !

**creole** · Jun 24, 2002 06:39

I only indent tags that contain information. If a TD contains a small amount of data then I put the closing tag on the same line for neatness sake. Like so:

Code:

<table>
<tr>
    <td>hi there</td>
</tr>
</table>

or 

<table>
<tr>
    <td>
         <table>
         <tr>
             <td>hi there</td>
         </tr>
         </table>
    </td>
</tr>
</table>

**platinum** · Jun 24, 2002 06:51

I like ending the tag on the same line actually... what I call major tags

usually end up on a new line...

Code:

<table>
  <tr>
    <td>Blah</td>
    <td>blahblah</td>
  </tr>
  <tr>
    <td><span class = main>blah</span></td>
    <td>blahblah</td>
  </tr>
</table>

**creole** · Jun 24, 2002 15:52

Originally posted by mjames

Does anyone know of any (stand alone) programs that specialize in tidying up code and spacing it neatly, etc.?

HTMLTidy

User Tag List

View Poll Results: How do YOU format your HTML?

Thread: How do YOU format your HTML?

Thread Tools

Display

How do YOU format your HTML?

Bookmarks

Bookmarks

Posting Permissions