標簽語義化

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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容