Are HTML5 Sectioning Elements semantic?

When used properly, do the new sectioning elements (e.g. <article>, <section>, <aside>, <nav>) in HTML5 provide any additional semantic value to web documents?

From what I have been reading, many people make it sound like those elements are not better than <div>

For the most part, it seems the answer at this stage is no. (And I read that the main creator of HTML5 doesn’t particularly care, either!)

It seems that assistive techs like screen readers are starting to recognize the semantics of some elements, such as section. Don’t take my word for it, though. I just noted that after reading something a while ago.

Then why switch to HTML5? :confused:

I thought the main reason was for improved sectioning (and semantics) of content?

I feel that’s kind of the wrong question. It’s been pointed out before that “HTML5” is not some new phenomenon. It’s essentially just a few extra elements added to HTML*. The name is just hype.

So you can either use those new elements or not, but some are very handy, such as video etc. The only sense in which there’s a “switch” is in using the simpler doctype. But that doctype has worked for years, so it’s not really HTML5. It’s just simpler. As long as the browser sees a doctype, it’s happy, so you might as well use the shorter one.

But the browser doesn’t care what doctype you use and what elements you use. You could use an older doctype with the new elements and it wouldn’t matter. Only the validator would get confused, but that’s irrelevant.

Whether the new elements do anything semantically or not doesn’t really matter. You might prefer to use a dedicated element than a generic one. And if it gains semantic value in the future, then all the better.


* The other thing to note is that a lot of APIs are also being added to browsers, allowing for cool functionality baked into browsers. You access these APis with JS. They are linked to “HTML5”, but they don’t have much to do with HTML. It’s another aspect of the HTML5 marketing—partly because a lot of these APIs were proposed/mapped out alongside HTML5.

I feel let down. I have spent the last several days reading up on HTML5, and thought I would be expanding my knowledge and skill-level if I started using things like <section> or <article>. But now it seems like adding those is more “fluff” than anything. :pensive:

That is too bad, because I think they are a small improvement. But I guess you are saying that browsers and search engines and the larger world doesn’t give them any value at this point, huh?

Things may have changed recently, but it’s not making headlines. Still, I think the new elements are worth using, as they can save you using so many classes etc. It’s important to be clear on what the elements are for, though, for when they do start to mean something. And that’s a sore point—because their meaning is hopelessly vague in many respects … meaning we’ll probably be in big trouble when the do have semantic value, because they are often used incorrectly, resulting in semantic gobbledygook. :frowning:


O, and @mikey_w, try to avoid quoting whole posts each time, if possible. It’s not necessary, and clogs up threads. :slight_smile:

2 Likes

That’s key. It’s been so long since I first read about HTML5 I’ve forgotten how long. 5 years?

First it was “We have these new elements that no current browser uses and we might remove or change them, but you can use them.”

Then pages started using them.

Kind of like lets force browsers to support these because they’re being used so much they’ll have to support them.

Semantic mark-up does make the code easier to read than all the div id=header, div id=footer etc that was being used. But I think the stronger benefit will come when assistive tech catches up.

Yes, they would make nice styling hooks.

I have spent all week reading up on them - including www.w3.org - so I think I know how to use them properly. (Although, ironically, I disagree on a couple of ways that w3 uses their own new elements!!) :sunglasses:

Sorry.

Well, I was set on starting to implement article, section, aside, and nav into my company website. But one last area where I feel shaky - and this relates to my other thread - is how to do headings.

I have read so much and from so many “authoritative” sources that I now longer know who to believe!!

Before creating this thread, I was fairly convinced that code like this would be okay…

<body>
    <header>
        <h1>Mikey Consulting</h1>
    </header>
    <nav>
        <ul>
            <li>Home</li>
            <li>Services</li>
            <li>Work Samples</li>
            <li>Articles</li>
        </ul>
    </nav>
    <article>
        <h1>All About Responsive Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque...</p>
        <h2>How It Can Help</h2>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos...</p>
        <h2>About Converting Your Site</h2>
        <p>Nullam vitae finibus dolor. Vivamus cursus pellentesque lorem. Fusce a eros...</p>
    </article>
    <section>
        <h1>Recent Articles</h1>
        <ul>
            <li>Are You Losing Visitors?</li>
            <li>How to Migrate to RWD</li>
            <li>Re-thinking How You Communicate</li>
        </ul>
    </section>
    <footer></footer>
</body>

However now I am not so sure.

Would this be better??

<body>
    <header>
        Mikey Consulting
    </header>
    <nav>
        <ul>
            <li>Home</li>
            <li>Services</li>
            <li>Work Samples</li>
            <li>Articles</li>
        </ul>
    </nav>
    <article>
        <h1>All About Responsive Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque...</p>
        <h2>How It Can Help</h2>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos...</p>
        <h2>About Converting Your Site</h2>
        <p>Nullam vitae finibus dolor. Vivamus cursus pellentesque lorem. Fusce a eros...</p>
    </article>
    <section>
        <h2>Recent Articles</h2>
        <ul>
            <li>Are You Losing Visitors?</li>
            <li>How to Migrate to RWD</li>
            <li>Re-thinking How You Communicate</li>
        </ul>
    </section>
    <footer></footer>
</body>

(Here I made the article the most important, and I also down-graded the “Recent Articles” to an <h2> and removed the <h1> around the company name. I just keep going back and forth on the heading hierarchy!!)

Yes, and that’s the problem: there’s too much room for disagreement. Lots of prominent folks disagree in their interpretations of correct usage, and that’s a bad sign.

I’m no expert on section/article, but I’d question the logic/semantics of your use of them there. What makes one part and article and antother a section there?

One thing to note is that some of the new elements are classed as “sectioning” elements—that is, elements that officially divide the page into sections. According to the “semantic rules”, they each must include a heading element. So to follow the rules, your <nav> element must have a heading in it! I think that’s a really silly rule, and it puts me off using <nav> altogether. It just doesn’t make sense to me at all.

Yeah…

Remember that was a quick sample…

Why is the first an article? Because w3.org says, “The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.”

Why is the second a section? Well, w3.org says, “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of eachsection should be identified, typically by including a heading (h1-h6 element) as a child of the section element.Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”

And while my example was incomplete, I envisioned that section maybe being a side bar with: Recent Articles, Most Popular Articles, Case Studies, etc which would all constitute a section of content. See?

Good point, although you could have a heading in your nav and then CSS to hide it off screen… :smile:

@ralphm,

In my post #9, would you go with coding approach #1 or #2?

Or, asked another way, I am unsure if once you start adding “sectioning” elements, if that somehow screws with your headings and their literal interpretation?

[off topic]
I read somewhere that Google, at the last count, had over 200 web page weighting factors to determine their index page ranking.

According to this article it sounds like "do as I say and not as I do :smile:

[/off topic]

1 Like

I think I read you sample too loosely. It looked like a small amount of code, but I see it’s just a sample of a longer piece. Sorry.

Indeed, and that’s probably going to be the common approach by those who want to follow the rules … though it strikes me as a bit silly.

I refuse to use more than one H1 per page, but that’s just me. :stuck_out_tongue:

2 Likes

Then how about this version…

<body>
    <header>
        Mikey Consulting
    </header>
    <nav>
        <ul>
            <li>Home</li>
            <li>Services</li>
            <li>Work Samples</li>
            <li>Articles</li>
        </ul>
    </nav>
    <article>
        <h1>All About Responsive Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor...</p>
        <h2>How It Can Help</h2>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos...</p>
        <h2>About Converting Your Site</h2>
        <p>Nullam vitae finibus dolor. Vivamus cursus pellentesque lorem. Fusce a eros bibendum...</p>
    </article>
    <section>
        <h2>Related Articles</h2>
        <ul>
            <li>Are You Losing Visitors?</li>
            <li>How to Migrate to RWD</li>
            <li>Re-thinking How You Communicate</li>
        </ul>

        <h2>You Might Like...</h2>
        <ul>
            <li>Article #7</li>
            <li>Article #23</li>
            <li>Article #11</li>
        </ul>
    </section>
    <footer></footer>
</body>

Improvements:

  • Using new HTML5 “sectioning” elements
  • Only one H1
  • H1 is not the company name
  • Article gets the focus
 <section>
        <h2>Related Articles</h2>
        <ul>
            <li>Are You Losing Visitors?</li>
            <li>How to Migrate to RWD</li>
            <li>Re-thinking How You Communicate</li>
        </ul>

        <h2>You Might Like...</h2>
        <ul>
            <li>Article #7</li>
            <li>Article #23</li>
            <li>Article #11</li>
        </ul>
    </section>

What makes this a <section> rather than an <aside>?

3 Likes

Yes, it is rather tangential. One of the tricky things to grasp is that “aside” doesn’t mean “sidebar”, and “header” doesn’t mean “bit at the top” and “footer” doesn’t mean “bit at the bottom”.

This may be slightly away from the main question, but I was interested to see how Russ Weakley used some of the HTML5 ‘semantic’ tags in the Build Your First Website: HTML & CSS course.

Assuming it’s still accessible free, as it was a couple of weeks back, it might be worth having a look through that - it only takes a couple of hours to crack your way through, assuming you’re just watching the video content - it would take a little longer if you were recreating the code alongside that.

But you don’t HAVE to use <section> and <aside> for it to be HTML5 surely. You can still use good old <div>s. For me, one of the best reasons for using HTML5 is to use some of the features of CSS3.