如何编写响应式语义 HTML5 页面？ （有框架？）

Question

所以我正在尝试为博客构建一个漂亮的页面，但挑战是我希望它是最合适的 HTML5 兼容和移动/seo 友好。

我制作了一个我认为合适的 HTML5 页面，如下所示：

<!-- 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>

我不了解你，但我认为它看起来像是对 HTML5 标记的正确语义使用。

现在我希望它具有响应性，并提供两个选项。

1. 我自己做所有的 css（也许使用 normalize.css 来防止在某些浏览器上发生奇怪的事情。）

2. 我使用轻量级框架，例如 Skeleton。

两者都意味着使用类，但也可能使用 div 标签来包装页面的某些部分，我不确定我应该怎么做...

我试图避免过度使用 div 标签，尤其是嵌套的 div，看起来像十年前的 ol'。

我尝试使用HTML5 Boilerplate，但我只是查看了他们主页的源代码，外观非常简单，我发现div in div in div in div in div。我的意思是，到底是什么？

那么您认为我应该怎么做才能构建响应式适当且语义化的 HTML5 页面？你有什么例子吗？

感谢您阅读我。

祝你有美好的一天。

Answer 1

据我了解，您需要一种方法来构建简单、语义化、轻量级的页面（这应该是我们所有人的目标）。

添加/嵌套 div 不是犯罪。 div 本身只是一个空白容器，与整个 HTML 文档结构几乎没有相关性，您可以使用尽可能多的 div。专注于学习 HTML/5 Semantics 并学习如何组合新标签，以便您的页面易于阅读和描述（由机器人）。

结构良好的简单页面示例。 （谷歌图片）

关于网格系统 - 我的建议是学习 SASS 并将其与称为 Neat 的 Bourbon.io's 网格系统结合使用。它非常简单且易于理解/实现。网格对齐以超级简单的方式排序，使您的代码如下：