Geek Answers Handbook

Bootstrap and HTML5 tag structure semantics

I am coding a site using bootstrap and html5 together and I am trying to structure it as much as possible semantic.

so my page is pretty simple: it consists of a heading, a section with two columns and a footer.

I am wondering which of the methods below is the best way to structure things semantically, such as parts of a section and page footer.

<div class="row"> <section> .... </section> <div class="row"> <footer> .... </footer> </div> <section> <div class="row"> ... </div> </section> <footer> <div class="row"> .... </div> </footer> <section class="row"> ... </section> <footer class="row"> ... </footer>
+6
source share
2 answers

Last:

 <section class="row"> ... </section> <footer class="row"> ... </footer>

The row class is presentation.

+6
source

Use the <article> tags for the main content. If both columns contain article content, you can use <section> to separate the columns.

 <article> <section id="part-1"> <header class="section-header">...</header> ... </section> <section id="part-2"> <header class="section-header">...</header> ... </section> </article> <footer id="main-footer"> ... </footer>

And then add as many <div> as you need, like CSS hooks.

Do not use class names related to a particular visual rendering, such as a string. Instead, use classes (and identifiers) that are relevant to the content, such as "part-1" and "main-footer".

+2
source

More articles:


All Articles