Are HTML5 Sectioning Elements semantic?

[chrisofarabia]

@Gandalf

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.

Absolutely. No one is forcing any one to use them, though they are now fully supported across all major browsers.
I read something last night that said the primary function of semantic tags are:

• Labelling containers clearly
• Adding meaning and structure
• Enabling easier styling

At the moment, it feels to me as if anything is likely to drive their increased use, it’s going to be the way in which search engines respond to them, and in turn how site creators shape what they’re doing to maximise their SEO return.

[ralphm]

@Gandalf

one of the best reasons for using HTML5 is to use some of the features of CSS3.

Hm, CSS3 doesn’t depend on HTML5, though. As long as the browser understands CSS3, it doesn’t matter what HTML elements or doctype you’re using.

[dresden_phoenix]

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.

This is a great point. consider it a for of pseudo enforced CSS standardization. If you are in the habit of using a div with an id of ‘header’ ( or like me you abbreviate, or maybe you code in Spanish… ‘hed’ or ‘caboose’) it will work just the same. BUT if you had the HEADER tag it leaves no question in in the mind of SOMEONE ELSE updating your code that you are targeting a header.

Admittedly, this is nearly impossible to quantify, but the effect is there none the less.

[Gandalf]

@ralphm

Hm, CSS3 doesn’t depend on HTML5, though. As long as the browser understands CSS3, it doesn’t matter what HTML elements or doctype you’re using.

I know you can use CSS3 with, say, HTML4 but is it good practise?

[DaveMaxwell]

@Gandalf

I know you can use CSS3 with, say, HTML4 but is it good practise?

The css level and html version have nothing to do with each other, so there’s nothing to consider in thinking about good practices.

What you need to consider is your clientele, and what browsers they are using. If they are using older browsers, then you’ll want to be sure to built in more robust fall backs.

[felgall]

@Gandalf

For me, one of the best reasons for using HTML5 is to use some of the features of CSS3

Most people who are using CSS3 are using it with HTML 3.2

The doctype people change to when they think their page is HTML 5 is the short version of the HTML 2 doctype so no HTML version is implied by using that doctype. Mostly you can tell that people are still using HTML 3.2 is that the page contains at least one tag or attribute that was declared to be obsolete in 1997 and which would have been able to be removed in HTML 5 if most web authors were not still writing HTML 3.2. Many explicitly declare that their page still contains HTML 3.2 tags by using the HTML 4 transitional doctype.

[Gandalf]

@felgall

The doctype people change to when they think their page is HTML 5 is the short version of the HTML 2 doctype so no HTML version is implied by using that doctype. Mostly you can tell that people are still using HTML 3.2 is that the page contains at least one tag or attribute that was declared to be obsolete in 1997 and which would have been able to be removed in HTML 5 if most web authors were not still writing HTML 3.2. Many explicitly declare that their page still contains HTML 3.2 tags by using the HTML 4 transitional doctype.

Geez!

[mikey_w]

@felgall

 <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>?

Taken out of context - which it somewhat is in my contrived example - it could be either…

[ot]
Mods: Why is it that sometimes when I quote people it breaks in Discourse like above?

[mikey_w]

@ralphm

@felgall

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

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”.

It could be either, but the only thing tangential here is whether it is a <section> or <aside>

It could be either and would depend on the entire web page - which I never spelled out.

[mikey_w]

@dresden_phoenix

This is a great point. consider it a for of pseudo enforced CSS standardization. If you are in the habit of using a div with an id of ‘header’ ( or like me you abbreviate, or maybe you code in Spanish… ‘hed’ or ‘caboose’) it will work just the same. BUT if you had the HEADER tag it leaves no question in in the mind of SOMEONE ELSE updating your code that you are targeting a header.

Admittedly, this is nearly impossible to quantify, but the effect is there none the less.

Here is where I am at…

• I am willing to change my heading approach and start making the most important content thing (e.g. article title) the H1 and not the company name

• I like how header, section, aside, and nav help make it clear what all of my code is about.

• I like how having “sectioning” elements (e.g. section/aside/nav/header) make the heading structure more clear because you can see your <Hx> tie back to things like a section.

• What I still do NOT like is multiple H1’s…

• I would like to start using HTML5 for my responsive design, and start using header/nav/section/aside, however I am still liking the older HTML4 approach of having H1, H2, H3,… H6.

But my fear is that if I had this, that HTML5 might screw it up…

    <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>

From all of my reading, it sorta sounds like HTML5 would promote <h2>Related Articles</h2> to an <h1> because it is the first heading in the sectioning element.

In a way I have mixed feelings, because I like how normal HTML5 would have something like this so you would know what each section is about…

    <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>
        <h1>Related 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>

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

But I think what is more important to me is that this given (contrived) web page has the following structure…

<h1> (only one)
<h2>…<h6> (multiple)

[djsmithme]

This is a very good read that should bring you up to speed:
http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

Basically it’s to do with the DOCTYPE you are using. If you are using HTML5 with section/articles then the same SEO rules do not appy.

[felgall]

@djsmithme

Basically it’s to do with the DOCTYPE you are using. If you are using HTML5

HTML 5 doesn’t have a doctype as it is not based on SGML. For the purpose of switching to standards mode it introduced an HTML tag called doctype that is identical to the short version of the HTML 2 doctype. From that tag you can’t tell whether the page is HTML 2, 3.2, 4 or 5. You would need to look at the tags used in the page to work out the HTML version from that doctype.

[djsmithme]

My applogies I’m not using word correctly, what I really mean is the Html Specification you are using.

[SamA74]

@mikey_w

But my fear is that if I had this, that HTML5 might screw it up…

As I mentioned, you are not forced to use multiple h1 tags. Also, if you do choose to use them, use them correctly. It does not mean that every section or article should have a h1, only articles of equal top level weight. So for me your first example in post #30 is right. I don’t think “Related Articles” or “You Might Like” are h1 material, with equal weight to “All About Responsive Design” which is what the main content of the page is about.
Just because it is the main header of a article/section does not necessarily give it h1 status. you only use multiple h1 for articles of equal weight.
Eg:-

<header>Mikey's News</header>
<article>
   <h1>Pig Found on Mars</h1>
   <p>Loerm ipsum etc.</p>
</article>
<article>
   <h1>Elvis is Still Dead</h1>
   <p>Loerm ipsum etc.</p>
</article>
<article>
   <h1>Research Says Fish don't like Tennis</h1>
   <p>Loerm ipsum etc.</p>
</article>

This is OK, but you may have:-

<header>Mikey's News</header>
    <article>
       <h1>World Shattering Story</h1>
       <p>Loerm ipsum etc.</p>
    </article>
    <article>
       <h2>Thing of Minor Interest</h2>
       <p>Loerm ipsum etc.</p>
    </article>

h1 is still the daddy, for only the most important thing(s) on the page. But you may now have a number of articles of equal importance each with h1. Anything that is not the most important thing on the page is not h1 just because it is the first thing in its section. At least that is how I have interpreted the new h1 usage.
Or you can still use just one h1 as before if you prefer.