CODEWITHSUNDEEP
htmlsemantic-markup
Cheetah
Cheetah

Reputation: 14449

Which of these is better semantically?

In order to make websites more accessible I have been encouraged to use HTML5 tags <header>, <footer>, etc... to only surround the actual content, but I have a feeling that I might be doing something wrong.

An example body:

<header>
    <div class="center">
        <h1>Title</h1>
        <nav>
            ...
        </nav>
    </div>
</header>
<div>
    <section>
        ...
    </section>
</div>
<footer>
    <div class="center">
        ...
    </div>
</footer>

.center {
   max-width: 70em;
   margin: 0 auto;
}

header {
   width: 100%
   background-color: red;
}

footer {
   width: 100%
   background-color: green;
}

body > div {
   width: 100%
   background-color: blue;
}

Is it actually better like this?

<div id="head">
    <header>
        <h1>Title</h1>
        <nav>
            ...
        </nav>
    </header>
</div>
<div>
    <section>
        ...
    </section>
</div>
<div id="foot">
    <footer>
        ...
    </footer>
</div>

Upvotes: 0

Views: 116

Answers (4)

Raynos
Raynos

Reputation: 169541

Try

<section>
  <header> head content </header>
  main content
  <footer> footer content </footer>
</section>

This get's rid of all those silly divs and now you have your header and footer linked to your section like they should be.

Upvotes: 0

robertc
robertc

Reputation: 75777

It'd be better like this:

<header>
    <h1>Title</h1>
    <nav>
        ...
    </nav>
</header>
<section>
    ...
</section>
<footer>
    ...
</footer>

Or alternatively:

<div class="header">
    <h1>Title</h1>
    <div class="nav">
        ...
    </div>
</div>
<div class="section">
    ...
</div>
<div class="footer">
    ...
</div>

Why are you being told to add those extra wrapper div elements?

Upvotes: 0

Waiting for Dev...
Waiting for Dev...

Reputation: 13037

Basically, that div elements are not required semantically speaking (maybe you need them for styling?).

div is an element without semantic (as its counterpart for inline elements span) and you have to use them where there isn't anything better. Even if you give them some semantic with its id attribute, that semantic is only known by you and not for, for example, any web search motor (google) or any screen reader (for blind people, for example), because there aren't any definitive conventions about id or class values.

If you use header, footer etc, you are giving them semantics. Maybe you want to increase their semantic using some value for the role attribute.

By the way, that section surely it isn't needed. Look at what people from HTML5 Doctor say:

In HTML 5 you can specifically mark up all the “secondary” content on a page such as navigation, branding, copyright notices, so it feels odd that you can’t specifically mark up the most important part of your page—the content.

But what would be the purpose of marking it up specifically, anyway? If you need to style it, use a div. An assistive technlogy like a screenreader can find the main content because it is the first thing inside a page that isn’t a header, nav or footer.

With a <div role="main"> you have everything you need.

Upvotes: 0

Marat Tanalin
Marat Tanalin

Reputation: 14123

As for what is better — DIV inside structural elements like HEADER/FOOTER or structural elements inside DIV, it does not matter since DIV is common container without any semantic sense at all.

What is really unsemantic/bad-practice in your first example is center class name. Class names should reflect purpose of block (content, products, etc.), not its presentation (center, red, etc.).

Upvotes: 1

Related Questions