三列文章的基本HTML结构

Question

一般来说，我对HTML和编程都很陌生，我希望确保我的代码是有组织的，并且我正在使用最佳实践。

因此，我将这个示例布局转换为HTML5：

这是我创建的HTML5代码：

<!-- Solutions Section -->
<section id="Solutions">
  <header>
    <h1>Title</h1>
    <h2>Subhead</h2>
  </header>

  <!-- Items -->
  <section> 
    <article class="Solutions_items">
      <!-- Should I have a <header> inside each article? -->
      <h1>Item 1</h1>
      <p>Lorem ipsum...</p>
    </article>

    <article class="Solutions_items">
      <h1>Item 2</h1>
      <p>Lorem ipsum...</p>
    </article>

    <article class="Solutions_items">
      <h1>Item 3</h1>
      <p>Lorem ipsum...</p>
    </article>
  </section>
</section>

现在来回答以下问题：

• 使用div而不是sections或articles有什么区别吗？我的意思是，不仅在组织领域，而且在优化领域？现在是否有关于这一特定主题的一般最佳做法公约？因为我觉得使用sections和articles可以使代码更容易阅读(同时也使CSS文件更加清晰)。
• 我应该在每个header中设置一个article标记吗？我听说这是最好的实践，但我觉得这会使代码更难读，同时我觉得它使代码更有条理，所以我有点搞不懂该做什么。
• 关于代码的可读性:我是否应该在不同的项目(如sections )之间保留一个行间隔？在一个很小的HTML文件中，我知道像断点一样不会有什么大不了的，但是在一个大型HTML文件中，可以有大约200行空行，这使得代码比必须要大得多。人们通常对此做些什么？

Answer 1

HTML是一种被称为标记语言的语言，这意味着元素的实际意义(无论您选择div还是sections)取决于代码来解释。

浏览器有自己的CSS文件，它们应用于每个页面，所以您选择用于元素的标记并不重要。除了在浏览器中有特殊用途的img和video等类型之外

也就是说，使用更符合目的的标记名称可以提高代码的可读性，并为将来的开发提高可维护性。

像HTML5这样的标准为元素添加了更多的样式规则(以及添加更多的特殊用途类型，如img和更多的东西)。

没有优化权衡，因为CSS引擎不处理div上的规则与sections上的规则不同。

我应该在每一篇文章中有一个标题标记吗？

是的，这正是它的目的！Mozilla开发人员网络说header元素是用来表示标题元素的，特别是引用了为包装部分的标题而设计的用法。

我听说这是最好的实践，但我觉得这会使代码更难读。

虽然代码可读性可以说是个人的事情，但我始终认为这种布局：

<div class='section'>
  <h1 class='header'>Item</h1>
  <div class='content'>
    <div class='photo'>
      <img src="logo.png" />
    </div>
    <div class='description'>
      <p>Text</p>
    </div>
  </div>
</div>

比这样的事情更难理解：

<section>
  <header>Item</header>
  <content>
    <photo>
      <img src="logo.png" />
    </photo>
    <description>
      <p>Text</p>
    </description>
  </content>
</section>

尤其是你现在可以很容易地看到哪个结束标记是哪个。

我应该在像sections这样的不同项目之间保留一个行间隔吗？

同样，代码的可读性取决于您，做任何更容易理解的事情。

在一个很大的HTML文件中，可以有大约200行空行，使得代码比必须要大得多。人们通常对此做些什么？

如果您有那么多元素，那么可能需要使用一个库(如jQuery、Ember、Angular )来管理您的数据并为您制作HTML布局。

然而，对于一个普通的HTML文件，换行并不一定是坏的。额外的行不会膨胀文件，所以你不需要太担心文件膨胀。

正如我之前所说的，代码可读性是一件非常个人化的事情。虽然我(和任何其他评审员)可以查看代码，告诉您它的可读性如何，但是开发它的是您，它是您创建的。

Answer 2

我会尽力回答的。不要用章节或文章来代替div。Div应该用来创建您的网站的布局，而区段和文章应该用来构建您的网站。在构建布局时，始终坚持元素内部的div。

您可以在每一篇文章中最明确地使用标题。标题应用于构造和分组项目元素中的任何标题级别。

对于空行的使用，我没有真正的建议。我想大的网页会因为过度使用行间隔而变得缓慢，但我想其他人在这个话题上会比我更好。:)

要获得更好的指导，请参考html5doctor.com