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>