HTML5語義化標籤詳細介紹教程
阿新 • • 發佈：2019-01-09
這是一個簡短的介紹新的HTML 5結構元素的工作草案，和如何使用語義類的名稱在HTML 4.01或XHTML1標記對應於這些結構元素的名稱。通過這樣做，你會開始瞭解如何使用新的元素也在某種程度上使用普通語義HTML標籤。
一、前言
HTML5將是第一個自XHTML 1.0釋出以來發布的網頁標準語言，而HTML 4.01，是在1999年釋出的，你可以看到HTML5的工作草案在2022年將徹底定稿，W3C HTML工作組和WHATWG已經作為代表，開放了一些藉口和用法出來，各大瀏覽器廠商紛紛響應，聲稱自家的瀏覽器支援html5所有屬性和方法，這是一個好的趨勢。
HTML5中新增很多語義化的新標籤，這樣更容易理解網頁的程式碼，同時也幫助搜尋引擎瞭解網站的結構，更好的收錄，同樣W3C的檔案也更好理解了。
二、<header>標籤
<header>標籤是一個網頁或者一個區域內的標題,不可與以前的頭部混淆，這往往只是一個標識標記，它也應該包含一個<h1>-<h6>的分層等級，它也可以包含一些元資訊的網頁或一段關於“最近更新”的列表，文章版本號、或者部落格作者、出版日期等資訊。
一個簡單的例子，一個頁面使用語義化class的網頁網頁結構：
你可以包括標誌標記和其他元資料層內。部落格文章下面的例子包括作者和出版日期資訊（以及作為一個例子的引用區域和文章語義類名稱的元素）：
三、<nav>標籤
<nav>元素應該包含一組導航連結，或者到其他頁面，或在當前頁面片段識別符號。引用它的語義類的名字很簡單：
四、<section>標籤
<section>元素定義了一段一個頁或不同的內容。它通常有一個標題和可能頁尾。這是我們如何能夠代表它使用語義類的名稱：
我也一直在使用＜div class=”section”>定義一組層，是相關的（如新聞事件）。在這樣的一個例子，這些小節將巢狀，每個都有自己的<h1>-<h6>在等級秩序的維護層次。比如說呢。
每個section也可以用一個語義類的名稱有一層header如果內容是必要的。
五、<article>標籤
這是怎樣的HTML 5工作草案的解釋文章元素
“文章元素代表了一部分的網頁的組成部分包括一個形成檔案，網頁的一個獨立的部分，或網站。這可能是一個論壇，雜誌或報紙上的文章，網路日誌，使用者提交的評論，或任何其他內容的獨立專案。”
多個article元素也可以巢狀。我們看的例子，一個系列的部落格文章中使用語義類的header、section這是一個獨特的使用語義類的名稱為例文章頁標題和footer：
六、<figure>標籤
figure元素包含嵌入式媒體一樣<img>和新的元素<audio> 和 <video>。它還包含一個可選的<legend>元進行標題的功能。我們的語義類別名稱的版本都是這樣：
七、<dialog>標籤
dialog元素取代<dl>含有converations類似的成績單。使用它作為一個語義類的名字很簡單：
八、<aside>標籤
引用工作草案：
“除了元素代表一段一個頁面，包括的內容是在一旁元素含量切相關，並可考慮從內容分離。這些部分通常表示為印刷字型的側邊欄。”
我一直在使用“aside”作為混合內容的側邊欄的類的名字，但我讀的草案也表明也可能是適當的引文和主要內容部分有關的任何東西，但不是。見部分有關的INS和IMG元素為例。它會似乎是適當使用一個語義類的名字一樣：
九、<footer>標籤
這是什麼工作草案說：
“頁尾元素代表的頁尾區域它適用於。A頁尾通常包含有關的區域如他寫的，有關檔案，連結資料的版權等。”
在改變元素部分HTML5的差異從HTML4這也說明，“地址元現在範圍由切片的新概念。”這是很重要的，因為現在，如果你有多個區域在一個頁面，每個人都可以有一個標題和一個頁尾與相應的地址在頁尾如果你認為有必要為每個。然而，這似乎是一個罕見的使用案例。讓我們用一個更廣泛的一個語義化類：一個頁尾的每一頁與一個單一的地址元；這是它怎麼可能會使用一個語義類的名稱：
十、語義化類（class names）
讓我們重溫一點：利用語義類的名字，我們把資訊語義增強，每一塊相關的資料是獨立的。然而，這可能成為一些設計師閱讀這一副作用，使用這種方法的明顯，並最終利用HTML 5元素本身，將名稱相同的容器內的不同內容很多。<div class=”section”>比如說呢。你可能想呈現不同的內容非常不同的瀏覽器。多個類的名字會讓你做。class=”section”可以成為class=”section news”, 或 class=”section services”.。的“節”類名稱允許我們標準化的一些介紹說，字型；例如。的”news”類名稱將使我們以不同的方式呈現它作為一款變體。
所以現在我們最好的兩個世界；臨界結構元素的預設情況下更多的語義類的名字申請我們的創造力提供hooks包含。
十一、最後
記住HTML 5是一個工作草案所以可能會有一些變化，在成為推薦。這似乎不大可能，任何新的結構元素將被刪除，但在起草更新銳利的眼睛可能是一個很好的舉措。
在這篇文章中的任何錯誤都是我自己的。如果你有過，請告訴我我會改正的。
一、前言
HTML5將是第一個自XHTML 1.0釋出以來發布的網頁標準語言，而HTML 4.01，是在1999年釋出的，你可以看到HTML5的工作草案在2022年將徹底定稿，W3C HTML工作組和WHATWG已經作為代表，開放了一些藉口和用法出來，各大瀏覽器廠商紛紛響應，聲稱自家的瀏覽器支援html5所有屬性和方法，這是一個好的趨勢。
HTML5中新增很多語義化的新標籤，這樣更容易理解網頁的程式碼，同時也幫助搜尋引擎瞭解網站的結構，更好的收錄，同樣W3C的檔案也更好理解了。
二、<header>標籤
<header>標籤是一個網頁或者一個區域內的標題,不可與以前的頭部混淆，這往往只是一個標識標記，它也應該包含一個<h1>-<h6>的分層等級，它也可以包含一些元資訊的網頁或一段關於“最近更新”的列表，文章版本號、或者部落格作者、出版日期等資訊。
一個簡單的例子，一個頁面使用語義化class的網頁網頁結構：
<div class="header">
<h1>Page Title</h1>
</div>你可以包括標誌標記和其他元資料層內。部落格文章下面的例子包括作者和出版日期資訊（以及作為一個例子的引用區域和文章語義類名稱的元素）：
<div class="section"> <div class="article"> <div class="header"> <h1>Page Title</h1> <p>By <a href="*">Author</a> on [date]</p> </div> [Article content…] </div> <div class="article"> [Repeat as required…] </div> </div>
三、<nav>標籤
<nav>元素應該包含一組導航連結，或者到其他頁面，或在當前頁面片段識別符號。引用它的語義類的名字很簡單：
<div class="nav">
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
[Repeat as required…]
</ul>
</div>四、<section>標籤
<section>元素定義了一段一個頁或不同的內容。它通常有一個標題和可能頁尾。這是我們如何能夠代表它使用語義類的名稱：
<div class="section">
<div class="header">
<h2>Section Title</h2>
</div>
[Section content…]
</div>我也一直在使用＜div class=”section”>定義一組層，是相關的（如新聞事件）。在這樣的一個例子，這些小節將巢狀，每個都有自己的<h1>-<h6>在等級秩序的維護層次。比如說呢。
<div class="section">
<div class="header">
<h2>News and Events</h2>
<p>The latest announcements and upcoming conferences</p>
</div>
<div class="section">
<h3>News</h3>
[Section content…]
</div>
<div class="section">
<h3>Events</h3>
[Section content…]
</div>
</div>每個section也可以用一個語義類的名稱有一層header如果內容是必要的。
五、<article>標籤
這是怎樣的HTML 5工作草案的解釋文章元素
“文章元素代表了一部分的網頁的組成部分包括一個形成檔案，網頁的一個獨立的部分，或網站。這可能是一個論壇，雜誌或報紙上的文章，網路日誌，使用者提交的評論，或任何其他內容的獨立專案。”
多個article元素也可以巢狀。我們看的例子，一個系列的部落格文章中使用語義類的header、section這是一個獨特的使用語義類的名稱為例文章頁標題和footer：
<body>
<div class="article">
<div class="header">
<h1>Title</h1>
</div>
[Article content…]
<div class="footer">
[Footer content…]
</div>
</div>
</body>六、<figure>標籤
figure元素包含嵌入式媒體一樣<img>和新的元素<audio> 和 <video>。它還包含一個可選的<legend>元進行標題的功能。我們的語義類別名稱的版本都是這樣：
<div class="figure">
<img src="*" alt="*">
<p class="legend">[…]</p>
</div>七、<dialog>標籤
dialog元素取代<dl>含有converations類似的成績單。使用它作為一個語義類的名字很簡單：
<dl class="dialog">
<dt>Speaker 1</dt>
<dd>So I said to him, I said…</dd>
<dt>Speaker 2</dt>
<dd>You never. You did? Oh my…</dd>
</dl>八、<aside>標籤
引用工作草案：
“除了元素代表一段一個頁面，包括的內容是在一旁元素含量切相關，並可考慮從內容分離。這些部分通常表示為印刷字型的側邊欄。”
我一直在使用“aside”作為混合內容的側邊欄的類的名字，但我讀的草案也表明也可能是適當的引文和主要內容部分有關的任何東西，但不是。見部分有關的INS和IMG元素為例。它會似乎是適當使用一個語義類的名字一樣：
<body>
<div class="section">
[Section content…]
</div>
[Repeat sections as required for main content…]
<div class="aside">
[Aside content…]
</div>
<div class="footer">
[Footer content…]
</div>
</body>九、<footer>標籤
這是什麼工作草案說：
“頁尾元素代表的頁尾區域它適用於。A頁尾通常包含有關的區域如他寫的，有關檔案，連結資料的版權等。”
在改變元素部分HTML5的差異從HTML4這也說明，“地址元現在範圍由切片的新概念。”這是很重要的，因為現在，如果你有多個區域在一個頁面，每個人都可以有一個標題和一個頁尾與相應的地址在頁尾如果你認為有必要為每個。然而，這似乎是一個罕見的使用案例。讓我們用一個更廣泛的一個語義化類：一個頁尾的每一頁與一個單一的地址元；這是它怎麼可能會使用一個語義類的名稱：
<div class="footer">
<address>[…]</address>
[Other footer content …]
</div>十、語義化類（class names）
讓我們重溫一點：利用語義類的名字，我們把資訊語義增強，每一塊相關的資料是獨立的。然而，這可能成為一些設計師閱讀這一副作用，使用這種方法的明顯，並最終利用HTML 5元素本身，將名稱相同的容器內的不同內容很多。<div class=”section”>比如說呢。你可能想呈現不同的內容非常不同的瀏覽器。多個類的名字會讓你做。class=”section”可以成為class=”section news”, 或 class=”section services”.。的“節”類名稱允許我們標準化的一些介紹說，字型；例如。的”news”類名稱將使我們以不同的方式呈現它作為一款變體。
所以現在我們最好的兩個世界；臨界結構元素的預設情況下更多的語義類的名字申請我們的創造力提供hooks包含。
十一、最後
記住HTML 5是一個工作草案所以可能會有一些變化，在成為推薦。這似乎不大可能，任何新的結構元素將被刪除，但在起草更新銳利的眼睛可能是一個很好的舉措。
在這篇文章中的任何錯誤都是我自己的。如果你有過，請告訴我我會改正的。