css - 如何组织 HTML5 结构以获得更好的实践和更好的代码可读性？

Question

我是 HTML 和一般编程的新手，我想确保我的代码井井有条，并且我在进行过程中使用了最佳实践。

所以，我制作了这个示例布局，我想将其转换为 HTML5: https://postimg.org/image/je10syxhz/

这是我创建的 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 文件更干净)。

谢谢! :)

Answer 1

1. div 与部分

如果页面部分内的内容在主题上相似，则使用部分，div 的内容不需要主题相似性，div 的目的是样式而不是内容相似

更多详情 -> What is the difference between <section> and <div>?

div 与文章

article 表示“联合”内容，例如“论坛帖子、杂志或报纸文章、博客文章”。

更多详情 -> Section, Article, or Div? and Smaller text in a section and article tag?

1. 标题标签允许“语义组织”，如果一页上有很多可变内容，最好用标题标签来组织部分

更多详情 -> http://html5doctor.com/the-header-element/

1. 如果要在部分之间添加 br 标记以指示页面的新结构区域，则允许在 html 中添加 br，但是，对于纯粹基于样式的目标，请使用样式表

更多详情 -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

1. 嵌套部分标签是可以的，但请记住正确使用部分标签(主题相似性)，不建议出于样式目的嵌套部分，使用 div

更多详情 -> Nesting HTML5 section tags

此外，我每页只有一个 h1，这与保持 html 组织一致