推薦使用 HTML5 的文檔類型申明: <!DOCTYPE html>
.
(建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性,比如 application/xhtml+xml
在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限)。
HTML 中最好不要將無內(nèi)容元素[1] 的標(biāo)簽閉合,例如:使用 <br>
而非 <br />
.
一般情況下,建議使用能通過標(biāo)準規(guī)范驗證的 HTML 代碼,除非在性能優(yōu)化和控制文件大小上不得不做出讓步。
使用諸如 W3C HTML validator 這樣的工具來進行檢測。
規(guī)范化的 HTML 是顯現(xiàn)技術(shù)要求與局限的顯著質(zhì)量基線,它促進了 HTML 被更好地運用。
不推薦
- <title>Test</title>
- <article>This is only a test.
推薦
- <!DOCTYPE html>
- <meta charset="utf-8">
- <title>Test</title>
- <article>This is only a test.</article>
HTML5 規(guī)范中規(guī)定了 HTML 標(biāo)簽是可以省略的。但從可讀性來說,在開發(fā)的源文件中最好不要這樣做,因為省略標(biāo)簽可能會導(dǎo)致一些問題。
省略一些可選的標(biāo)簽確實使得頁面大小減少,這很有用,尤其是對于一些大型網(wǎng)站來說。為了達到這一目的,我們可以在開發(fā)后期對頁面進行壓縮處理,在這個環(huán)節(jié)中這些可選的標(biāo)簽完全就可以省略掉了。
出于性能考慮,腳本異步加載很關(guān)鍵。一段腳本放置在 <head>
內(nèi),比如 <script src="main.js"></script>
,其加載會一直阻塞 DOM 解析,直至它完全地加載和執(zhí)行完畢。這會造成頁面顯示的延遲。特別是一些重量級的腳本,對用戶體驗來說那真是一個巨大的影響。
異步加載腳本可緩解這種性能影響。如果只需兼容 IE10+,可將 HTML5 的 async 屬性加至腳本中,它可防止阻塞 DOM 的解析,甚至你可以將腳本引用寫在 <head>
里也沒有影響。
如需兼容老舊的瀏覽器,實踐表明可使用用來動態(tài)注入腳本的腳本加載器。你可以考慮 yepnope 或 labjs。注入腳本的一個問題是:一直要等到 CSS 對象文檔已就緒,它們才開始加載(短暫地在 CSS 加載完畢之后),這就對需要及時觸發(fā)的 JS 造成了一定的延遲,這多多少少也影響了用戶體驗吧。
終上所述,兼容老舊瀏覽器(IE9-)時,應(yīng)該遵循以下最佳實踐。
腳本引用寫在 body 結(jié)束標(biāo)簽之前,并帶上 async 屬性。這雖然在老舊瀏覽器中不會異步加載腳本,但它只阻塞了 body 結(jié)束標(biāo)簽之前的 DOM 解析,這就大大降低了其阻塞影響。而在現(xiàn)代瀏覽器中,腳本將在 DOM 解析器發(fā)現(xiàn) body 尾部的 script 標(biāo)簽才進行加載,此時加載屬于異步加載,不會阻塞 CSSOM(但其執(zhí)行仍發(fā)生在 CSSOM 之后)。
所有瀏覽器中,推薦
- <html>
- <head>
- <link rel="stylesheet" href="main.css">
- </head>
- <body>
- <!-- body goes here -->
- <script src="main.js" async></script>
- </body>
- </html>
只在現(xiàn)代瀏覽器中,推薦
- <html>
- <head>
- <link rel="stylesheet" href="main.css">
- <script src="main.js" async></script>
- </head>
- <body>
- <!-- body goes here -->
- </body>
- </html>
根據(jù)元素(有時被錯誤地稱作“標(biāo)簽”)其被創(chuàng)造出來時的初始意義來使用它。打個比方,用 heading 元素來定義頭部標(biāo)題,p 元素來定義文字段落,用 a 元素來定義鏈接錨點,等等。
有根據(jù)有目的地使用 HTML 元素,對于可訪問性、代碼重用、代碼效率來說意義重大。
以下示例列出了一些的語義化 HTML 主要情況:
不推薦
- <b>My page title</b>
- <div class="top-navigation">
- <div class="nav-item"><a href="#home">Home</a></div>
- <div class="nav-item"><a href="#news">News</a></div>
- <div class="nav-item"><a href="#about">About</a></div>
- </div>
- <div class="news-page">
- <div class="page-section news">
- <div class="title">All news articles</div>
- <div class="news-article">
- <h2>Bad article</h2>
- <div class="intro">Introduction sub-title</div>
- <div class="content">This is a very bad example for HTML semantics</div>
- <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div>
- <div class="article-foot-notes">
- This article was created by David <div class="time">2014-01-01 00:00</div>
- </div>
- </div>
- <div class="section-footer">
- Related sections: Events, Public holidays
- </div>
- </div>
- </div>
- <div class="page-footer">
- Copyright 2014
- </div>
推薦
- <!-- The page header should go into a header element -->
- <header>
- <!-- As this title belongs to the page structure it's a heading and h1 should be used -->
- <h1>My page title</h1>
- </header>
- <!-- All navigation should go into a nav element -->
- <nav class="top-navigation">
- <!-- A listing of elements should always go to UL (OL for ordered listings) -->
- <ul>
- <li class="nav-item"><a href="#home">Home</a></li>
- <li class="nav-item"><a href="#news">News</a></li>
- <li class="nav-item"><a href="#about">About</a></li>
- </ul>
- </nav>
- <!-- The main part of the page should go into a main element (also use role="main" for accessibility) -->
- <main class="news-page" role="main">
- <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -->
- <section class="page-section news">
- <!-- A section header should go into a section element -->
- <header>
- <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
- <h2 class="title">All news articles</h2>
- </header>
- <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other
- re-usable module / section that can occur multiple times on a page) a article element should be used -->
- <article class="news-article">
- <!-- An article can contain a header that contains the summary / introduction information of the article -->
- <header>
- <!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
- <div class="article-title">Good article</div>
- <!-- Small can optionally be used to reduce importance -->
- <small class="intro">Introduction sub-title</small>
- </header>
- <!-- For the main content in a section or article there is no semantic element -->
- <div class="content">
- <p>This is a good example for HTML semantics</p>
- </div>
- <!-- For content that is represented as side note or less important information in a given context use aside -->
- <aside class="article-side-notes">
- <p>I think I'm more on the side and should not receive the main credits</p>
- </aside>
- <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
- <footer class="article-foot-notes">
- <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
- while the actual text in the time element can also be more human readable / relative -->
- <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p>
- </footer>
- </article>
- <!-- In a section, footnotes or similar information can also go into a footer element -->
- <footer class="section-footer">
- <p>Related sections: Events, Public holidays</p>
- </footer>
- </section>
- </main>
- <!-- Your page footer should go into a global footer element -->
- <footer class="page-footer">
- Copyright 2014
- </footer>
對頁面上的媒體而言,像圖片、視頻、canvas 動畫等,要確保其有可替代的接入接口。圖片文件我們可采用有意義的備選文本(alt),視頻和音頻文件我們可以為其加上說明文字或字幕。
提供可替代內(nèi)容對可用性來說十分重要。試想,一位盲人用戶如何能知曉一張圖片是什么,要是沒有 @alt 的話。
(圖片的 alt 屬性是可不填寫內(nèi)容的,純裝飾性的圖片就可用這么做:alt=""
)。
不推薦
- <img src="luke-skywalker.jpg">
推薦
- <img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">
盡量用 alt 標(biāo)簽去描述圖片,設(shè)想你需要對于那些只能通過語音或者看不見圖片的用戶表達圖片到底是什么。
不推薦
- <img src="huge-spaceship-approaching-earth.jpg" alt="Header image">
推薦
- <img src="huge-spaceship-approaching-earth.jpg" alt="A huge spaceship that is approaching the earth">
理解 web 中如何和為何區(qū)分不同的關(guān)注點,這很重要。這里的關(guān)注點主要指的是:信息(HTML 結(jié)構(gòu))、外觀(CSS)和行為(JavaScript)。為了使它們成為可維護的干凈整潔的代碼,我們要盡可能的將它們分離開來。
嚴格地保證結(jié)構(gòu)、表現(xiàn)、行為三者分離,并盡量使三者之間沒有太多的交互和聯(lián)系。
就是說,盡量在文檔和模板中只包含結(jié)構(gòu)性的 HTML;而將所有表現(xiàn)代碼,移入樣式表中;將所有動作行為,移入腳本之中。
在此之外,為使得它們之間的聯(lián)系盡可能的小,在文檔和模板中也盡量少地引入樣式和腳本文件。
清晰的分層意味著:
<style>.no-good {}</style>
)<hr style="border-top: 5px solid black">
)<script>alert('no good')</script>
)<b>
, <u>
, <center>
, <font>
, <b>
)不推薦
- <!DOCTYPE html>
- <html>
- <head>
- <link rel="stylesheet" href="base.css">
- <link rel="stylesheet" href="grid.css">
- <link rel="stylesheet" href="type.css">
- <link rel="stylesheet" href="modules/teaser.css">
- </head>
- <body>
- <h1 style="font-size: 3rem"></h1>
- <b>I'm a subtitle and I'm bold!</b>
- <center>Dare you center me!</center>
- <script>
- alert('Just dont...');
- </script>
- <div class="red">I'm important!</div>
- </body>
- </html>
推薦
- <!DOCTYPE html>
- <html>
- <head>
- <!-- Concatinate your style sheets into a single one -->
- <link rel="stylesheet" href="main.css">
- </head>
- <body>
- <!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet -->
- <h1 class="title"></h1>
- <!-- Don't use presentational elements and assign sensible classes -->
- <div class="sub-title">I'm a subtitle and I'm bold!</div>
- <!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet -->
- <span class="comment">Dare you center me!</span>
- <!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet
- what you want to do with it -->
- <div class="important">I'm important!</div>
- <!-- Put all your scripts into files and concatinate them into a single one -->
- <script async src="main.js"></script>
- </body>
- </html>
不要讓非內(nèi)容信息污染了你的 HTML?,F(xiàn)在貌似有一種傾向:通過 HTML 來解決設(shè)計問題,這是顯然是不對的。HTML 就應(yīng)該只關(guān)注內(nèi)容。
HTML 標(biāo)簽的目的,就是為了不斷地展示內(nèi)容信息。
img
元素當(dāng)做專門用來做視覺設(shè)計的元素以下例子展示了誤將 HTML 用來解決設(shè)計問題的這兩種情況:
不推薦
- <!-- We should not introduce an additional element just to solve a design problem -->
- <span class="text-box">
- <span class="square"></span>
- See the square next to me?
- </span>
- .text-box > .square {
- display: inline-block;
- width: 1rem;
- height: 1rem;
- background-color: red;
- }
推薦
- <!-- That's clean markup! -->
- <span class="text-box">
- See the square next to me?
- </span>
- /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
- .text-box:before {
- content: "";
- display: inline-block;
- width: 1rem;
- height: 1rem;
- background-color: red;
- }
圖片和 SVG 圖形能被引入到 HTML 中的唯一理由是它們呈現(xiàn)出了與內(nèi)容相關(guān)的一些信息。
不推薦
- <!-- Content images should never be used for design elements! -->
- <span class="text-box">
- <img src="square.svg" alt="Square" />
- See the square next to me?
- </span>
推薦
- <!-- That's clean markup! -->
- <span class="text-box">
- See the square next to me?
- </span>
- /* We use a :before pseudo element with a background image to solve the problem */
- .text-box:before {
- content: "";
- display: inline-block;
- width: 1rem;
- height: 1rem;
- background: url(square.svg) no-repeat;
- background-size: 100%;
- }
省略樣式表與腳本上的 type 屬性。鑒于 HTML5 中以上兩者默認的 type 值就是 text/css 和 text/javascript,所以 type 屬性一般是可以忽略掉的。甚至在老舊版本的瀏覽器中這么做也是安全可靠的。
不推薦
- <link rel="stylesheet" href="main.css" type="text/css">
- <script src="main.js" type="text/javascript"></script>
推薦
- <link rel="stylesheet" href="main.css">
- <script src="main.js"></script>
如果 HTML5 語義化標(biāo)簽使用得當(dāng),許多可用性問題已經(jīng)引刃而解。ARIA 規(guī)則在一些語義化的元素上可為其添上默認的可用性角色屬性,使用得當(dāng)?shù)脑捯咽咕W(wǎng)站的可用性大部分成立。假如你使用 nav
, aside
, main
, footer
等元素,ARIA 規(guī)則會在其上應(yīng)用一些關(guān)聯(lián)的默認值。
更多細節(jié)可參考 ARIA specification
另外一些角色屬性則能夠用來呈現(xiàn)更多可用性情景(i.e. role="tab"
)。
檢查文檔中的 tab 切換順序并傳值給元素上的 tabindex,這可以依據(jù)元素的重要性來重新排列其 tab 切換順序。你可以設(shè)置 tabindex="-1"
在任何元素上來禁用其 tab 切換。
當(dāng)你在一個默認不可聚焦的元素上增加了功能,你應(yīng)該總是為其加上 tabindex
屬性使其變?yōu)榭删劢範(fàn)顟B(tài),而且這也會激活其 CSS 的偽類 :focus
。選擇合適的 tabindex
值,或是直接使用 tabindex="0"
將元素們組織成同一 tab 順序水平,并強制干預(yù)其自然閱讀順序。
如果 SEO 和可用性環(huán)境條件允許的話,建議考慮采用微格式。微格式是通過在元素標(biāo)簽上申明一系列特定數(shù)據(jù)來達成特定語義的方法。
谷歌、微軟和雅虎對如何使用這些額外的數(shù)據(jù)一定程度上的達成一致,如果正確的使用,這將給搜索引擎優(yōu)化帶來巨大的好處。
你可以訪問 schema.org 獲得更多內(nèi)容細節(jié)。
看一個電影網(wǎng)站的簡單例子:
不帶微格式
- <div>
- <h1>Avatar</h1>
- <span>Director: James Cameron (born August 16, 1954)</span>
- <span>Science fiction</span>
- <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
- </div>
帶有微格式
- <div itemscope itemtype ="http://schema.org/Movie">
- <h1 itemprop="name">Avatar</h1>
- <div itemprop="director" itemscope itemtype="http://schema.org/Person">
- Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
- </div>
- <span itemprop="genre">Science fiction</span>
- <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
- </div>
通常一個比較好的做法是將頁面內(nèi)所有的頭部標(biāo)題元素都加上 ID. 這樣做,頁面 URL 的 hash 中帶上對應(yīng)的 ID 名稱,即形成描點,方便跳轉(zhuǎn)至對應(yīng)元素所處位置。
打個比方,當(dāng)你在瀏覽器中輸入 URL http://your-site.com/about#best-practices
,瀏覽器將定位至以下 H3 上。
- <h3 id="best-practices">Best practices</h3>
在每一個塊狀元素,列表元素和表格元素后,加上一新空白行,并對其子孫元素進行縮進。內(nèi)聯(lián)元素寫在一行內(nèi),塊狀元素還有列表和表格要另起一行。
(如果由于換行的空格引發(fā)了不可預(yù)計的問題,那將所有元素并入一行也是可以接受的,格式警告總好過錯誤警告)。
推薦
- <blockquote>
- <p><em>Space</em>, the final frontier.</p>
- </blockquote>
- <ul>
- <li>Moe</li>
- <li>Larry</li>
- <li>Curly</li>
- </ul>
- <table>
- <thead>
- <tr>
- <th scope="col">Income</th>
- <th scope="col">Taxes</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>$ 5.00</td>
- <td>$ 4.50</td>
- </tr>
- </tbody>
- </table>
使用雙引號(“”) 而不是單引號(”) 。
不推薦
- <div class='news-article'></div>
推薦
- <div class="news-article"></div>
[1]: 此處的空白元素指的是以下元素:area
, base
, br
, col
, command
, embed
, hr
, img
, input
, keygen
, link
, meta
, param
, source
, track
, wbr
更多建議: