How To Make a Web Site the Modern Way. Part 5: The Body – How To Structure Your Markup

March 7th, 2010 by Rob Larsen

Five posts in and finally we get to the heart of the matter- getting your content onto the page for your users to enjoy. This will be done in two parts. This, the first part, will deal with how to structure your HTML so it makes sense from and organizational standpoint and so that you can easily style it with CSS. Let’s look at a stripped down example of what I’m talking about.



<body>
<div  id="container">
  <div id="header">
    <h1>The Site or Company Title- Let's Make a Web Site</h1>
    <ul> id="menu"
      <li>Imagine this is a Menu</li>
      <li>Imagine this is a Menu</li>
    </ul>
    </div>
    <div id="content">
    <h2>H2 Header. The content title.</h2>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a href="#">&lt;a&gt; Link treatment urna nibh</a>, viverra non, semper suscipit, posuere a, pede.  </p>
        <h3>H3 Header.Subtopics </h3>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a href="#">&lt;a&gt; Link treatment urna nibh</a>, viverra non, semper suscipit, posuere a, pede.  </p>
        <h3>H3 Header. Another subtopic. </h3>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a href="#">&lt;a&gt; Link treatment urna nibh</a>, viverra non, semper suscipit, posuere a, pede.  </p> 
    </div>
  <div id="sidebar">
    <div id="ads">This is an  ad</div>
  </div>
  <div id="footer">Released  Under the The MIT License.  Copyright (c) 2010 Rob Larsen</div>
</div>
</body>

Let’s look at each section in turn.

Container

Some people call this a wrapper. I call it a container. Whatever it is, it’s the outermost div for your site. If you need to constrain the width (to fit in certain view ports), center the design, or apply certain background effects this is where you’ll do it.

It’s just a handy thing to have laying around.

Header

The header is probably what you would expect it to be. Here it simply contains the document (or site) title and a main navigation menu; but in other situations it might also contain a things like the company logo (how we’ll insert that with CSS comes later,) a site slogan (think: WordPress,) or a secondary navigation menu (think “help” or “log in/out.”)

This usage and ID are so prevalent on the web, that the folks behind HTML5 codified it as the new HEADER element.

Content

This is where the- you guessed it- content lives.

As you can see it follows along in an orderly fashion. Starting with an <h2> (to continue from the H1 at the top) at the top and working its way down through a couple of <h3>s. In a larger document you might have several <h3>s and even a few <h4>s. This page itself it a good sample of that.

The idea is to present a logical outline for the page. This helps end users understand and scan the page visually and also helps to educate search engines about the content on the page. This is one of the nice convergences in web development as doing something good for our user also helps search engines understand and rank your content.

The new HTML5 outline

I’ve talked a little bit here and there about HTML5. I won’t go into too much depth about it because for the beginner most of the concepts are the same between the different flavors of HTML. One thing I will mention is that the way you structure your markup, in terms of the way you order your headers, is different in HTML5. In older versions of HTML, you weren’t really supposed to have more than one <h1> element on a page. Because of the way HTML5 documents are structured and owing to some new semantic elements you’re not just allowed, but encouraged to have more than one <h1> if the page requires it. Rewriting the above sample as HTML5, might give you some basic sense of what that means:



<body>
<div  id="container">
  <header>
    <h1>The Site or Company Title- Let's Make a Web Site</h1>
    <nav> 
      <ul id="menu"> 
        <li>Imagine this is a Menu</li> 
        <li>Imagine this is a Menu</li>
     </ul> 
</nav>
</header>
   <div id="content">
    <article> 
      <h1>H1 Header. The content title.</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a href="#">&lt;a&gt; Link treatment urna nibh</a>, viverra non, semper suscipit, posuere a, pede.  </p>
      <h2>H2 Header.Subtopics </h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a href="#">&lt;a&gt; Link treatment urna nibh</a>, viverra non, semper suscipit, posuere a, pede.  </p>
     <h2>H2 Header. Another subtopic. </h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. <a href="#">&lt;a&gt; Link treatment urna nibh</a>, viverra non, semper suscipit, posuere a, pede.  </p>
   </article>
 </div>
  <aside>
    <div id="ads">This is sidebar content</div>
  <aside>
  <footer>Released  Under the The MIT License.  Copyright (c) 2010 Rob Larsen</footer>
</footer>
</body>

The new article element allows for the outline to reset, so we start again with an H1 and then move down to an H2, etc. The idea is that it’s a unique block of content and it should be able to repurposed without knowledge of the outline of the containing page.

Sidebar

In this situation, I just have the one sidebar, so I don’t have to worry about any naming issues. It’s just logical, associated content. A sidebar like this will generally have ads, related links, and the like. We’ve segregated it for both logical reasons and to allow us to style it specifically.

In a three column layout, you would have to choose a naming scheme that reflected your content. It might be a menu and a sidebar; ads and menu or some similar variation.

Footer

Copyright, privacy policy, etc. are all usually placed in a footer area. Like the header element, the whatwg created a footer element to capture this common pattern.

2 Responses to “How To Make a Web Site the Modern Way. Part 5: The Body – How To Structure Your Markup”

Michel Tadebois Says:

March 18th, 2010 at 4:38 am

Hey Rob, just finished reading that series of article and I must say I can’t way for you to finish them up. It does give a big picture of web design. Great work man. Cheers.
Rob Larsen Says:

March 18th, 2010 at 7:58 am

Thanks Michel,

I’m working on the next installment right now, so it should be ready over the next few days.

This one will have lots of hands on info about different HTML elements, so people should hopefully get a lot out of it.

~Rob

HTML CSS JavaScript

Let's Push Things Forward