That flow chart will help a lot. I’ve also been reading through other articles here and one at smashing.com that have helped me see that I was looking at things from the wrong perspective at times. I’ll read the common mistakes link you provided also.

I have been looking at section in terms of when a developer looks at my code it will be easy to spot the top, middle, bottom, sections and so on. These would be sections inside the main content wrap. So yeah, total misunderstanding on who I am trying to be semantic for, on my part. And maybe some misunderstanding of the definition of semantics too.

At any rate, it’s making more sense as I read the articles here. You guys have a lot of good information.

Thanks

If I have a literal top section and bottom section of different content

How about <header> and <footer>?

The semantic part comes in when another developer is reading the code and can see two sections with id’s of top-content and bottom-content.

ID names are not semantic (no more than <!-- introductory content starts here -->). If the content is different, then the element will depend on what the content is. If you just want to style it differently, there’s no need for <section> — a class on e.g. <p>, a class on a <div> wrapping the content, or even .entry p:first-of-type {…} as we do here are all better options.

As for trying to not use sections for styling, should I really have a redundant div around or inside a section to ensure I don’t use styles on the section?

We mean only use a <section> when it’s semantically appropriate. You can definitely style them if you add them, just don’t add them solely as a style hook. Read more about this in Avoiding common HTML5 mistakes.

As for the article and sections inside it, when dealing with blog posts it makes sense to me to have section class=”meta” or something like that for the meta data about the post(author, date, etc.).

A section inside an article should generally be a subsection of the article, with its own title. The “Avoiding common HTML5 mistakes” link above links to a subsection titled “Don’t use section as a wrapper for styling”. I’d add meta stuff to the article’s <header> (or possibly <footer>), probably just in <p> for a single line.

When I think semantic I’m thinking of viewing the code in a text editor and being able to envision how the page is laid out without having to look at the page in a browser. And it should be logical.

If I have a literal top section and bottom section of different content it doesn’t mean I want to have a big heading for the user to see that says “Top Section” or “bottom section” because that would be stating the obvious as they will most likely be separated in some visual way with styling . The semantic part comes in when another developer is reading the code and can see two sections with id’s of top-content and bottom-content.
As for trying to not use sections for styling, should I really have a redundant div around or inside a section to ensure I don’t use styles on the section? I know that’s not what you are saying, but I can’t think of any section on a page that I would not apply some style to even it it’s just a margin between sections.

So, using a div for the wrap or container makes sense to me but then using a section for top and bottom sections makes more sense than using divs for semantics.

Up until now I thought that was the only reason for the section tag (semantics in the code). I would like to see some definitive guides on marking up for screen readers but at the moment I’m just trying to wrap my head around semantic markup in general.

As for the article and sections inside it, when dealing with blog posts it makes sense to me to have section class=”meta” or something like that for the meta data about the post(author, date, etc.).

Ask yourself “What is the natural heading of “content-area”. What text could you put there that a user viewing your web site would want to see?

In contrast, the natural headings of the 3 parts are provided in your question (well, two of them are) – “About Me” and “Recent Work”, so the sectioning elements should identify these boxes.

So your second arrangement is the correct one, although there is a good case for using <article> for each of the boxes rather than <section>.

Now, there will be 3 content boxes in the middle. They are going to be lined up horizontally across the page (Using the 960 grid system). Each content box will have a title, such as one for about me, one for recent work, etc… and the footer ofcourse.

Under the about me section, will have a h1 style for about me, and then content in a p tag underneath it. And the same for the other two. 1 ) Would practical use be to wrap the middle area in a whole section in itself and then use 3 div containers for the content boxes inside of the “section”? or 2 ) Have three seperate section elements for the 3 content boxes inside a div tag and just add classes to them? For examples.

Number one would look like this >

<section id="content-area">
<div id="about-me">
<h1> About me </h1>
<p>..... </p>
<p>..... </p>
</div>

<div id="box-2">
<h1> box2 </h1>
<p>..... </p>
<p>..... </p>
</div>

<div id="box-3">
<h1> box3 </h1>
<p>..... </p>
<p>..... </p>
</div>

</section>

Or would number 2 be more practical


<div id="content-area">
<section id="about-me">
<h1> About me </h1>
<p>..... </p>
<p>..... </p>
</section>

<section id="box-2">
<h1> box2 </h1>
<p>..... </p>
<p>..... </p>
</section>

<section id="box-3">
<h1> box3 </h1>
<p>..... </p>
<p>..... </p>
</section>

</div>

If you could please help me I would greatly appreciate it. I’m trying to become more proficient in html5 but this one element is holding me back : (.

P.S. If you know a better way of doing what I have mentioned, help would be appreciated

for the “why” see my article on HTML5 semantics http://coding.smashingmagazine.com/2011/11/18/html5-semantics/

“why don’t I just continue to use DIVs with clearly labelled IDs”

you can if you want to. But see above.

If that is it’s only purpose, then why don’t I just continue to use DIVs with clearly labelled IDs?

Thanks
Dhanesh Mane

There are no SEO problems with using multiple <h1> elements, and having multiple <h1> elements has always been valid. However, you shouldn’t use multiple <h1> elements for now because that style currently isn’t well supported e.g. by screen readers.