SitePoint Sponsor

User Tag List

View Poll Results: How do YOU format your HTML?

Voters
23. You may not vote on this poll
  • The traditional indent style.

    13 56.52%
  • A personal preference. Refer to post to see.

    7 30.43%
  • I don't format in any particular way. I just get my tags in the right order.

    2 8.70%
  • I don't code HTML!

    1 4.35%
Results 1 to 24 of 24
  1. #1
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb How do YOU format your HTML?

    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</Bprovides businesses with interactivehigh-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 structuresWe 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</Avia our online form.</P>
    <!-- 
    END page content-->

    </
    DIV>
    </
    TD>
    </
    TR>
    </
    TABLE>
    <!-- 
    END main content --> 
    What format do YOU use?
    Last edited by geiger; Jun 20, 2002 at 19:51.

  2. #2
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Addict w3exit's Avatar
    Join Date
    Jun 2002
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually let dreamweaver do it ... if I edit it myself i try to use the same format so that it looks neater

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Location
    USA
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).

  10. #10
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by qslack; Jun 21, 2002 at 10:36.

  11. #11
    Sports Publisher mjames's Avatar
    Join Date
    Jan 2000
    Location
    Charlotte, NC
    Posts
    5,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    indents, tabs not spaces

    cheers

    alastair

  13. #13
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    - the lid is off the maple syrup again!

  14. #14
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  15. #15
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I code much the same way notepadcoder does 2 spaces

    That it, if I hand code it

  16. #16
    SitePoint Member Purple Penguin's Avatar
    Join Date
    Jun 2002
    Location
    Surrey
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Boys are dying on these streets.

  17. #17
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Straight from HTML-Kit:


    :-)

    ~~Ian

  18. #18
    Weird Little Girl Desdelena's Avatar
    Join Date
    May 2002
    Location
    Canada
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    Sports Publisher mjames's Avatar
    Join Date
    Jan 2000
    Location
    Charlotte, NC
    Posts
    5,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  21. #21
    . Ruchir's Avatar
    Join Date
    Feb 2002
    Location
    Sydney
    Posts
    1,863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 !

  22. #22
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  23. #23
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  24. #24
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mjames

    Does anyone know of any (stand alone) programs that specialize in tidying up code and spacing it neatly, etc.?
    HTMLTidy
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •