我们想说我想创建一个简单的响应式单页主页。我找到了几种替代方案，但最佳选择是什么？我在网上看过几篇文章，包括W3C的文章，但我没有得到明确的答案！
我将有两个列布局，左侧是文本，右侧是图像。在台式计算机上，它们将彼此相邻，左右风格。但是在移动设备等较小的设备中，右侧列将更改为左侧并位于文本列的下方。
从HTML5的角度来看，替代方案1是不是很糟糕？我的想法是将页面与备选1或2的几个部分分开。还有第三种选择（我想其他选项几乎无穷无尽）在article元素中使用两个section元素并为图像使用article元素而不是aside元素。
我猜你们中的一些人可能还建议我使用article元素而不是section元素，并使用嵌套的article。它与所有这些选项相混淆！
我还应该在备选方案1中使用article和header元素吗？
预先提供一些反馈和指导！对不起我的所有问题，我只是想提高我的编码技巧！
备选方案1：
<div id="intro">
<div class="content-left">
<h2>Headline</h2>
<p>Text</p>
</div><!-- end class content-left -->
<div class="content-right">
<img src="...."/>
</div><!-- end class content-right -->
</div><!-- end id intro -->
替代2与HTML5元素：
<section id="intro">
<article>
<header>
<h1>Headline</h1>
</header>
<p>Text</p>
</article>
<aside>
<img src="...."/>
</aside>
</section>
答案 0 :(得分：1)
答案是：除了代码可读性之外，它并不重要。有关详情，请参阅Why use HTML5 tags?。
您可以拥有包含所有<section class="articles">元素的<article>。您可以拥有包含所有<div class="articles">元素的<div class="article">。我认为可以肯定地说，第一个更容易为开发人员阅读。你的选择。
然而，有一个问题：你自我关闭<img> - 不再需要html5了。请参阅Are (non-void) self-closing tags valid in HTML5?。
在HTML 5中，
<foo />表示<foo>，即开始标记。它不是一个自动关闭标签＆＃34;。相反，某些元素被指定为没有结束标记，例如<br>。这些统称为空元素。对于沉迷于XML的人来说，斜杠只是语法糖。在非void元素标记中使用斜杠无效，但浏览器无论如何都会将其解析为开始标记，从而导致结束标记不匹配。