梳理HTML知識：HTML5語義化

來自專欄我愛學前端

一、啥是語義化。

維基百科是這麼說的：語義化是前端開發裡面的一個專用術語，其優點在於標籤語義化有助於構架良好的html結構，有利於搜索引擎的建立索引、抓取；另外，亦有利於頁面在不同的設備上顯示儘可能相同；此外，亦有利於構建清晰的機構，有利於團隊的開發、維護

總結起來就是，

對機器：

有利於 SEO ，搜索引擎的爬蟲依賴於標籤來確定上下文和各個關鍵字的權重。

方便其他設備的解析（如屏幕閱讀器、盲人閱讀器等），利於無障礙閱讀，提高可訪問性。對人：便於團隊的開發和維護。

在沒有載入 CSS 的情況下也能呈現較好的內容結構與代碼結構，易於閱讀。

最開始是由 PHP 後端寫 HTML，不會 CSS，於是就用 table 來布局。table 使用展示表格的。嚴重違反了 HTML 語義化。 後來有了專門的寫 CSS 的前端，他們會使用 DIV + CSS 布局，主要是用 float 和絕對定位布局。稍微符合了 HTML 語義化。 再後來，前端專業化，知道 HTML 的各個標籤的用法，於是會使用恰當的標籤來展示內容，而不是傻傻的全用 div，會盡量使用 h1、ul、p、main、header 等標籤

二、語義化標籤介紹

<article>

  • 定義可以在任何上下文中存在的自包含內容塊。它可以有自己的頁眉，頁腳，部分......對於博客帖子列表很有用。

<article> <header> <h3> <a href="/my-blog-post">My blog post</a> </h3> </header> <section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p> </section> <footer> <small> Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a> </small> </footer></article>

<aside>

  • 定義與主要內容相關的內容塊。通常顯示為側邊欄。

<main> <h1>My blog post</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p> <p>etc.</p></main><aside> <h3>About the author</h3> <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p></aside>

<figure>

  • 定義單個自包含元素，通常是圖像。

<figure> <img src="/images/html-reference-logo.png" alt="HTML Reference logo"></figure>

<figcaption>

  • 定義<figure>的標題

<figure> <img src="/images/html-reference-logo.png" alt="HTML Reference logo"></figure>

<footer>

  • 定義網頁或部分的頁腳。通常包含作者、版權信息或者相關鏈接等；

<footer> HTML Reference - A free reference to all HTML5 elements and attributes</footer>

<header>

  • 定義文章的介紹信息：標題，logo，slogan；包裹目錄部分，搜索框，一個nav或者任何相關的logo；
  • 一個頁面中<header>的個數沒有限制，可以為每個內容塊添加一個header；

<header> <h1>HTML Reference</h1> <nav> <a>Home</a> <a>About</a> <a>Contact</a> </nav></header>

<main>

  • 定義文章的主要內容
  • main標籤在一份文檔中是唯一的，其後代元素常常包括`<article>`；

<main> <h1>My blog post</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p> <p>etc.</p></main><aside> <h3>About the author</h3> <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p></aside>

<mark>

  • 定義突出顯示的文本。

We use HTML5 to write <mark>content</mark> on the Web.

<nav>

  • 定義帶有導航鏈接的部分。

<nav> <a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a> </nav>

<section>

  • 定義網頁中的部分。比如章節。

<section> <h2>Section title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p></section>

time

  • Defines atimeon a 24h clock.

The game starts at <time datetime="2017-04-29T19:00">19:00</time>.

<img>

  • img元素最好附帶alt信息，即對圖片進行文本說明，當圖像無法查看時會顯示這段文本描述;

<table>

table元素現在有一系列語義化結構標籤

<caption>: 表格的標題，跳脫於表格之外;

<thead>：表格的表頭行，定義表格的表頭內容;

<tbody>：表格的主體部分，表格的主體部分;

<tfoot>：表格的腳註部分，tfoot要和thead，tbody結合起來使用;

<form>

  • <label>標籤的用法：label標籤，為input元素定義標註，改進了表單控制項的可用性，當你點擊到label標籤時，會自動聚焦到對應控制項上，label標籤一般有兩種用法

1. label的for屬性與控制項的id相對應，比如：

<label for="username">請輸入用戶名: </label> <input type="text" id="username" name="username">

2. label中內嵌控制項，比如:

<label>請輸入用戶名<input type="text" id="username" name="username"></label>

此外，

  1. placeholder屬性，其值會在輸入欄位為空時顯示，並會在欄位獲得焦點時消失；
  2. 表單中的單選radio控制項和複選checkbox控制項以及下拉框select控制項，可以為radio, checkbox添加checked屬性以及為option添加selected屬性讓其默認選中

參考文章：初探 · HTML5語義化

htmlreference.io/semant


推薦閱讀：
相关文章