How to write a responsive semantic HTML5 page ? (With a framework ?)

Question

So I'm trying to build a nice page for a blog, but the challenge is I want it to be the most proper HTML5 compliant and mobile/seo friendly.

I have made what I believe to be a proper HTML5 page that looks like this :

<!-- Header -->
<header>
    <h1>Title of the page</h1>
    <h2>Subtitle of the page</h2>
    <!-- nav -->
    <nav>
        <ul>
            <li><a href="#">Page one</a></li>
            <li><a href="#">Page two 2</a></li>
            <li><a href="#">Page three 3</a></li>
            <li><a href="#">Page four 4</a></li>
        </ul>
    </nav>
</header>

<!-- last articles -->
<section>

    <article>
        <header>
            <h2>Article title</h2>
        </header>

        Content of the article.

        <aside>
            Related post or other links.
        </aside>

        <footer>
            <a href="#">Read the full article.</a>
            <ul>
                <li><a href="#">Share on Facebook</a></li>
                <li><a href="#">Tweet it</a></li>
            </ul>
        </footer>
    </article>

    <article>
        <header>
            <h2>Article title</h2>
        </header>

        Content of the article.

        <aside>
            Related post or other links.
        </aside>

        <footer>
            <a href="#">Read the full article.</a>
            <ul>
                <li><a href="#">Share on Facebook</a></li>
                <li><a href="#">Tweet it</a></li>
            </ul>
        </footer>
    </article>

</section>


<!-- sidebar -->

<aside>

    <h2>Sidebar</h2>

    <h3>Social media</h3>
    <ul>
        <li><a href="#">Facebook account</a></li>
        <li><a href="#">Twitter account</a></li>
        <li><a href="#">Github account</a></li>
    </ul>

    <h3>Last comments</h3>
    <nav>
        <ul>
            <li><a href="#">Comment 1</a></li>
            <li><a href="#">Comment 2</a></li>
            <li><a href="#">Comment 3</a></li>
        </ul>
    </nav>

</aside>

<!-- footer -->
<footer>
    © 1264-2016 - Handsome coder (me) industry
</footer>

I don't know about you but I think it looks like a proper semantic use of HTML5 tags.

Now I want it to be responsive and two options are presented.

1. I do all the css by myself (maybe using normalize.css to prevent weird stuff from happening on some browsers.)

2. I use a lightweight framework, for example Skeleton.

Both would mean the use of classes but also of probably the use of div tags to wrap certain parts of the pages and I'm not sure it is how I should do it...

I'm trying to avoid the over use of div tags, especially the nested div that look like ol' of ten years ago.

I tried to use the HTML5 Boilerplate, but I just looked at the source code of their main page which is quite simple in appearance and I found div in div in div in div in div. I mean, what the hell ?

So what do you think I should do to build responsive proper and semantic HTML5 pages ? Do you have any example ?

Thank you for reading me.

Have a nice day.

Answer 1

As far as I understood, you want a way to build simple, semantic, lightweight pages (which should be the aim of us all).

Adding / nesting divs is not a crime. A div by itself is just a blank container which holds very little relevance to the overall HTML document structure, you can use as much divs as you like. Focus on learning HTML/5 Semantics and learning how to combine the new tags so that your page can be easy to read and describe (by the bots).

Example of a well structured simple page. (Google images)

Concerning grid systems - My advice is to learn SASS and combine it with Bourbon.io's grid system called Neat. It is pretty straightforward and easy to understand/implement. The grid alignment is sorted in a super-simple manner which gets your code down to something like: