SitePoint Sponsor

User Tag List

View Poll Results: Which Convention Should Be Used?

Voters
8. You may not vote on this poll
  • one.html - 366 Bytes

    0 0%
  • two.html - 372 Bytes

    4 50.00%
  • three.html - 384 Bytes

    3 37.50%
  • Another Convention. See my post.

    1 12.50%
Results 1 to 15 of 15
  1. #1
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)

    Best Web Page Structure Convention?

    Whats the best Web page structure convention that should be used when created and publishing professional Web pages?

    I've created three HTML files on my PC with different formatting structures and had a look at the file sizes and I figured it's a pretty important thing to take into consideration when creating Web pages. So, care to vote please? And also, give me your views, opinions and your knowledge too please . Don't forget your brains, I want them too hehe.

    one.html - 366 Bytes
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
     
    <body>
    <div id="mainContainer">
    <h1>Hello World!</h1>
    </div>
    </body>
    </html>

    two.html - 372 Bytes
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Untitled Document</title>
    </head>
     
    <body>
    	<div id="mainContainer">
    		<h1>Hello World!</h1>
    	</div>
    </body>
    </html>

    three.html - 384 Bytes
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Untitled Document</title>
     
    </head>
     
    <body>
     
    	<div id="mainContainer">
     
    		<h1>Hello World!</h1>
     
    	</div>
     
    </body>
    </html>

    I currently use convention three.

    Andrew Cooper

  2. #2
    ¨.¨ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Compressing the contents of the HTML page before sending it to the requesting agents makes whitespace a none issue. All my tabs for example are four spaces consecutive. When you compress that down with gzip those spaces are turned into like 10 spaces total for the whole document.

    Code HTML4Strict:
    <!DOCTYPE ...>
    <html lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>...</title>
     
            <link src="..." rel="stylesheet">
        </head>
        <body>
            <div id="page-container">
                ...
            </div>
     
            <div id="script-container">
                <script src="..."></script>
            </div>
        </body>
    </html>
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you compress the HTML it makes the source difficult to read, which I think is a bit anti-social.

  4. #4
    ¨.¨ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    If you compress the HTML it makes the source difficult to read, which I think is a bit anti-social.
    I don't mean that kind of compressing where you put everything on a single line. But using something like gzip or deflate which is compressed before sending it down the pipeline to be uncompressed to original form on the client's end. In other words the formmating of the HTML document is preserved.

    Gzipping the HTML versus using one of those HTML "optimizers" can save a lot more bytes.
    http://developer.yahoo.com/performance/rules.html#gzip
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  5. #5
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hmmm. I don't get what you mean by compressing the HTML document. I know how to compress a file or a folder and ZIP it, yes. But...If you compressed a .html file and uploaded it via your file manager or FTP then would it still open it as an ordinary HTML Web page rather than asking you to save the .html.zip or something?

    See, I want to try and -make up- a nice Web page structure convention style that will cost me as little file size as possible but at the same time, the source being easily readable and understadable with the necessary indents to show nesting.

    So yea...I'll just wait for some more replies I guess. Doo dee doo.

    Andrew Cooper

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    What you need is someone using one of those 28.8 kbps modems to answer your poll. While indeed a very long document with whitespace will have that add up, I still don't see it getting larger than an average image in size.

    I write in style like two.html, because I need my HTML readable even after it's online. If you can do compression on a server copy while keeping the human-readable version on your development machine then it can be a non-issue (unless you need someone to look at an online site and figure out a problem).

  7. #7
    ¨.¨ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AndrewCooper View Post
    ...If you compressed a .html file and uploaded it via your file manager or FTP then would it still open it as an ordinary HTML Web page rather than asking you to save the .html.zip or something?
    That is just it, you don't upload a compressed version! You upload the original and raw version. The web server (Apache or IIS, etc) will actually be the one responsible for handling the compression.

    It works like this, an agent requests a page from your server along with the request it tells the server the client supports gzip. The web server then pulls the requested page but just before it sends it down the pipeline it will compress it using gzip. Once the client receives the request it then will uncompress the page automatically. It is fully transparent.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    What you need is someone using one of those 28.8 kbps modems to answer your poll. While indeed a very long document with whitespace will have that add up, I still don't see it getting larger than an average image in size.
    Heh. I didn't think It was a big deal myself because it's not like all the tab space and line-breaks are going to add a whole 1 or 2KB.

    I write in style like two.html, because I need my HTML readable even after it's online.
    I like that too. I want it to be a fast loading Web page, but if anyone wants to view the source, I want it to be easily readable and indented properly where nesting occurs .

    logic_earth if you are talking about the following:
    Apache 1.3 uses mod_gzip while Apache 2.x uses mod_deflate.
    From the Yahoo! Developer page on the performance rules with GZIP then I think I understand what you're talking about. That's a pretty damned nifty feature. Yet again, Apache rocks my socks! Haha.

    I don't know whether I should actually be naming / calling this conventions or standards though now. Is there an actual Web page structure standard out there already that the majority uses or is it a mixture ontop of a base convention?

    Andrew Cooper

  9. #9
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assuming some degree of sanity within your scheme, the bandwidth issue is trivial. More important is human readability.

    My own preference looks more like your last, the gzip/gunzip version. I also configure my editor to convert tabs to spaces (I use two spaces rather than four) on save, which makes it interoperable with differently configured and lesser (i.e. not Emacs ) editors. Nested elements are indented, and sibling elements are separated by a newline. I also put element attributes one to a line.

    Demo:
    Code:
      <div>
        <div>
          <p><object type="text/html"
                  data="http://example.com/some.html"
                  width="640"
                  height="480">
              <p><a href="http://example.com/some.html">Oops. Something
              didn't work right. Click me to open some.html</a></p>
            </object></p>
    
          <p>This is a sibling to the parent <code>&lt;p&gt;</code> above.
          The extra <code>&lt;div&gt;</code> wrapper is for illustrative
          purposes.</p>
        </div>
      </div>
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth
    I don't mean that kind of compressing where you put everything on a single line. But using something like gzip or deflate which is compressed before sending it down the pipeline to be uncompressed to original form on the client's end. In other words the formmating of the HTML document is preserved.
    I should have worked that one out by myself!

    Andrew, I suppose there is a convention with indentations in that the child is indented with respect to the parent, but the number of spaces/tabs is a matter of, perhaps rather pathetically, sometimes quite hot debate. I don't think there's a convention regarding blank lines between elements, but I find that rather irritating unless it's between largish collections of elements. As long as it's legible and well-structured without lots of horrible junk (like sudden huge swathes of embedded JavaScript), that's what matters.

  11. #11
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I also configure my editor to convert tabs to spaces (I use two spaces rather than four) on save, which makes it interoperable with differently configured and lesser (i.e. not Emacs ) editors.
    Ohh, I didn't know that. So if you tab once for indenting childs from the parent elements and save it in Microsoft Notepad then open it in a different editor it will appear differently?

    Nested elements are indented, and sibling elements are separated by a newline.
    I agree. I like this convention too .

    but the number of spaces/tabs is a matter of, perhaps rather pathetically, sometimes quite hot debate.
    Why is this?

    As long as it's legible and well-structured without lots of horrible junk (like sudden huge swathes of embedded JavaScript), that's what matters.
    CSS and JavaScript will be in external files all the time :P It's pure markup and content in my HTML / XHTML files. So thats not a concern .

    How about this new one below then? If you have any suggestions or changes to make to it please do, and justify your changes please. I only want for the best .

    four.html - 383 Bytes
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>Untitled Document</title>
    	</head>
     
    	<body>
    		<div id="mainContainer">
    			<h1>Hello World!</h1>
    		</div>
    	</body>
     
    </html>

    Regards,

    Andrew Cooper

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Why is this?
    People think their opinion is the best and want to impose it on others. This normally goes hand in hand when people are discussing which text editor is the best.

    I would still go with two.html, just because I don't think the indentation of BODY and HEAD are necessary and it's good to try to keep things from getting ridiculously indented (to the point where horizontal scrolling - aaagh! - is necessary). This is also why I prefer two spaces to four for indentations, in any language.

  13. #13
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    People think their opinion is the best and want to impose it on others. This normally goes hand in hand when people are discussing which text editor is the best.
    So this isn't a big deal with readability then? I mean other Web Devs who check the source out on their system / in their text editor aren't going to freak out over two spaces are they?

    I would still go with two.html, just because I don't think the indentation of BODY and HEAD are necessary and it's good to try to keep things from getting ridiculously indented (to the point where horizontal scrolling - aaagh! - is necessary).
    I agree. I don't want crazy indentation all over the place to the point where horizontal scrolling occurs. I hate that. However, for consistency among the source, should we not indent the <head></head> and <body></body as well?

    I really feel there should be some sort of Web page structure standard or something along those lines, for the sake of consistency. Anyone's thoughts on this?

    Andrew Cooper

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can always throw the source throug HTML Tidy to reformat it for you at any time so any compression you apply into the source is easy to undo.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    This is also why I prefer two spaces to four for indentations, in any language.
    I do as well, except I'm finding that in Javascript, I can't see two spaces well enough. When there's an if statement starting, I've found I need or 4 spaces for the "stuff happening" inside to be obviously indented compared to the word "if". I dunno why. But I also don't use a tab for spacing. Mostly because in gEdit, if I change the tab spacing, all my old 8-space tabs (in older pages, where the child really is 8 spots indented) get turned to 2 spaces as well, which screws up nesting.

    So this isn't a big deal with readability then? I mean other Web Devs who check the source out on their system / in their text editor aren't going to freak out over two spaces are they?
    It's actually a religious thing. You know how that goes.

    Many web devs can take someone else's code in have it indented the way they likeó I see Paul O'B uses Dreamweaver to do this for him, when he's working on others' code.

    I agree. I don't want crazy indentation all over the place to the point where horizontal scrolling occurs. I hate that. However, for consistency among the source, should we not indent the <head></head> and <body></body as well?
    Well, if your personal rule is, two-spaces-per-child-level, then yeah you should, but I don't either. I think of the body and html tags as thuper-thpecial and they fall outside the rules for me.

    Code:
    <html lang="blah">
      <head> indented 2 spaces
        <meta> indented child 4 spaces
        <title> indented child
        <link> indented child
      </head>
    newline (often, not always, depends on what I had in my coffee)
    <body> just not indented, even tho a child of html
      <div> first container
        <div>
         (newlines only between siblings who are really really big)
        etc...
        </div>
      </div>
    </body> same level as html here
    </html>
    Everyone does their own thing. Like I said it's rather a religious thing. My God is better than your God and all that.


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
  •