CODEWITHSUNDEEP
htmlsemanticsmarkup
Nils Kaspersson
Nils Kaspersson

Reputation: 9464

Should HTML 5 semantic markup be used for styling at all?

I must admit the HTML5 semantic markup confuses me. I'm talking about these tags in particular:

<header>
<nav>
<section>
<article>
<aside>
<footer>

Using semantic elements provides the UA with information it couldn't normally get from a <div>, but should they be used along with <div> tags or can/should you style the semantic markup directly?

In other words, what is the proper approach?

This:

<div id="content">
    <section>
        <h1>Lorem ipsum></h1>
        <p>Text</p>
    </section>
</div>

Or this:

<section id="content">
    <h1>Lorem ipsum></h1>
    <p>Text</p>
</section>

Upvotes: 9

Views: 1833

Answers (4)

apnerve
apnerve

Reputation: 4829

The first example is more safer to use.

<section>
  <h1>Lorem ipsum></h1>
  <p>Text</p>
</section>

is the content.

In order to style this content you can wrap it inside a container eg. div with a style hook(class) and apply style to it.

Upvotes: -1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

Since the new tags are not universally recognized by browsers, even as candidates for styling, using div with class is safer. You also have the option of using just div with class like before, and you don’t lose anything now or in the foreseeable future. No software cares about the “semantics” of the new tags.

Upvotes: -1

Guffa
Guffa

Reputation: 700850

If you are using the semantic markup tags, you should not also use division tags for the same thing. The semantic tags are a replacement for some of the div tags.

The div tags are of course still useful, for when there is no semantic tag that fits.

Upvotes: 5

thecoshman
thecoshman

Reputation: 8660

I believe your first example is semantically correct, assuming you would have more section tags in that div tag.

The div tag would imply a section of the page that is for content, and then the section tag something like posts.

Upvotes: 1

Related Questions