标签语义化

2016-07-31 本文已影响50人进击的前端

MDN上关于语义化的好处。Mdn
语义化标签
<body>,<nav>, <article>, <aside>
, < h1>, < h2>, < h3>
,< h4>, < h5>, < h6>, < hgroup>
, < footer>
, <section>
, <address>

figure标签mdn figure

Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text.
主要是在文本流中插入的图片，描述，图表，代码段，概要等等和文本有关的类似内容。

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
 <img></img>
</figure>

header标签 mdn header

The HTML <header>element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.
自己翻译得不太标准。head标签用来表示一组引导性或者导航性的帮助，它主要包括标题性的元素以及其他类似于logo,包裹单元的头部，搜索表单等等。

section标签 mdn section

The HTML <section> element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading as a child of the <section> element

html section标签，表示了文档的普通的部分，比如一组有主题的内容，特别是是包含了头部，每个section应该都是独一无二的，特别是包含了一个头部作为子节点。section和article是互相替代的，如果主要为了加样式或者当容器，应该要用div. outline of a document是文档的大纲么。

<section>
  <h1>Forest elephants</h1>
 
  <section>     
    <h1>Introduction</h1>     
    <p>In this section, we discuss the lesser known forest elephants.</p>
  </section>

  <section>     
    <h1>Habitat</h1>
    <p>Forest elephants do not live in trees but among them.</p>
  </section>

  <aside>
    <p>advertising block</p>
  </aside>
</section>

<footer>
  <p>(c) 2010 The Example company</p>
</footer>

能够从这样的结构中，提取文档大纲内容。

1. Forest elephants
   1.1 Introduction
   1.2 Habitat

article标签 mdn section

The HTML <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). This could be a forum post, a magazine or newspaper article, a blog entry, an object, or any other independent item of content. Each <article> should be identified, typically by including a heading as a child of the <article> element.

article表示文档，页面或者应用中自我独立的组成部分，独立分配以及可重用，可以是论坛的帖子，杂志或者报纸的文章，博文，或者对象，每个article都应该是独特的，包含一个heading作为子节点。

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>

footer标签

The** HTML <footer> element** represents a footer for its nearest sectioning content orsectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.

footer标签标识它最临近的sectioning content或者sectioning root的元素，footer标签主要包括跟这个section的作者有关的信息，版权，或者相关文档的链接。
一般我看到footer的使用分成几种，一种是跟header,section,组成一个部分

<section>
  <header></header>
  <section></section>
  <footer></footer>
</section>