dzhi
dzhi

Reputation: 1674

HTML5 Elements Positioning Semantics

Is this semantic?

<!--LINKS-->
<section role="links">

<!--CATEGORIES-->
<section id="categories">
<h3>Categories</h3>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</section>

<!--BLOGROLL LINKS-->
<section id="links">
<h3>Blogroll</h3>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</section>
</section>

Upvotes: 0

Views: 276

Answers (1)

Alohci
Alohci

Reputation: 82986

The question you should be asking is not "Is this semantic?" but "Does this carry the correct semantics". i.e., Is the meaning of the information correctly conveyed from you to the reader? Ultimately, only you know what meaning you wish to convey, so only you can answer the question.

In this case, for example you've used "lorem ipsum" text. But the actual meaning may depend on what those links actually are.

One general comment. There's no ARIA role links. Consider using the <nav> element instead of <section role="links">. The nav element maps to the ARIA role navigation but it is recommended to use the native element if possible.

You can nest <nav> elements, so the other sections could be changed as well, but you will need to consider whether the nature of those links justifies it. Otherwise <section> is fine for those.

Other than that, it looks appropriate.

Upvotes: 1

Related Questions