CODEWITHSUNDEEP
htmltwitter-bootstrap
herrfischer
herrfischer

Reputation: 1828

More semantic html 5 code with bootstrap 3?

I want to make my (wordpress) bootstrap 3 template more html 5-semantic. Now i wonder if i should use the new html 5 tags for layouting like:

<section class="container">
    <article class="row">
        <main class="col-md-8>
            <header><h1>HEADLINE</h1></header>
            ...
        </main>
        <aside class="col-md-4>
            ...
        </aside>
    </article>
</section>

or only to divide the document into meaningful parts like:

<section>
    <div class="container">
        <div class="row">
            <article>
                <div class="col-md-8>
                    <main>
                        <div class="col-md-8>
                            <header><h1>HEADLINE</h1></header>
                            ...
                        </div>
                    </main>
                    <aside>
                        <div class="col-md-4>
                            ...
                        </div>
                    </aside>
                </div>
            </article>
        </div>
    </div>
</section>

I tend to like the second option more because i think it's easier to code and read for complex websites but i tend to code with less tags as possible, too ... . what do you think?

Upvotes: 0

Views: 277

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

section should not contain the main element semantically. But main element can contain any. So, you may do as followings:

<main>
   <article>
   </article>
   <section>
      <article>you can nest article in section</article>
   </section>
   <section>
   </section>
</main>
<aside>
element aside main element
</aside>

While using section consider the following points:

  • If it makes sense to separately syndicate the content of a section element, use an article element instead.
  • Do not use the section element as a generic container; this is what div is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

So, consider the following while using main:

  • main must not be a descendant of an article, aside, footer, header, or nav element.

To consider what should I do or what should I not do you may search in Google like this:

mdn article html

So, this would result Mozilla developer network's article

So, searching is easy like mdn aside html, then you would get article of what you need exactly.

Upvotes: 2

Related Questions