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

时间:2016-07-18 01:32:17

标签: html css html5 optimization

我是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代替sectionsarticles之间有区别吗?我的意思是,不仅在组织领域,而且在优化领域?现在有关于这个特定主题的一般最佳实践惯例吗?因为我觉得使用sectionsarticles使代码更容易阅读(并且还使CSS文件更清晰)。

谢谢! :)

1 个答案:

答案 0 :(得分:1)

  1. div vs section
  2. 如果页面部分内的内容在主题上相似,则使用section,div的内容不需要主题相似,div的目的是为样式而不是内容相似性

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

    div vs article

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

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

    1. 标题标记允许“语义组织”,如果您在一个页面上有大量可变内容,最好使用标题标记组织部分
    2. 更多详情 - &gt; http://html5doctor.com/the-header-element/

      1. 如果要在各部分之间添加br标签以指示页面的新结构区域,则允许在html中添加br,但是,对于纯粹基于样式的目标,请使用样式表
      2. 更多详情 - &gt; https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

        1. 嵌套部分标签没问题,但请记住正确使用部分标签(主题相似性),不建议使用嵌套部分进行样式设计,使用div
        2. 更多详情 - &gt; Nesting HTML5 section tags

          另外,我每页只有一个h1,这与保持html井井有条