一、創建頁眉 <header role="banner">

頁眉包括網站標誌、主導航和其他全站鏈接，甚至搜索框。也適合對頁面深處的一組介紹性或導航性內容進行標記。

註意：role=“banner”（橫幅）地標角色改善可訪問性

二、標記導航 <nav role="navigation"> <ul>無序鏈接列表</ul> 或 <ol>有序鏈接列表</ol> </nav>

nav 標記文檔中重要的鏈接群。

三、標記頁面的主要區域 <main role="main">

main元素包圍著代表頁面主題的內容，一個頁面僅使用一次。

四、創建文章 <article>段落、列表、音頻、視頻、圖像、圖形</article>

article元素表示文檔、頁面、應用或網站的一個獨立的容器。可以是一篇帖子、文章、評論或交互式的小部件或小工具。

五、定義區塊 <section>段落、列表、音頻、視頻、圖像、圖形</section>

section元素代表文檔或應用的一個一般的區塊。section是具有相似主題的一組內容，通常包含一個標題。

註意：section可嵌套在article裏，反之不行。

六、指定附註欄 <aside role="complementary">

使用aside的例子包括重要引述、側欄、指向相關文章的一組鏈接、廣告、nav元素組（友情鏈接）、相關產品列表等。

註意：對於與內容有關的圖像（圖表、圖形或帶有說明文字的插圖）使用figure而非aside。

七、創建頁腳 <footer>

footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的頁腳。頁腳通常包含關於它所在區塊的信息，如相關文檔的鏈接、版權信息、作者或其他類似條目。

註意：只能對頁面級的footer使用role="contentinfo",且一個頁面只能使用一次。

八、創建通用容器 <div>

div是沒有任何語義的通用容器。有了div就可以為其添加樣式或javascript效果。

註意：div是塊級內容的無語義容器。span是短語內容的無語義容器，可放在段落p元素內。

九、使用ARIA改善可訪問性

WAI-ARIA:無障礙網頁倡議-無障礙的富互聯網應用。ARIA的地標角色可以幫助用戶識別頁面區域，從而讓屏幕閱讀器用戶可以直接跳到這些區域。通常，對這些區域指定role屬性就可以了。

十、為元素添加title屬性

可以使用title屬性為網站任何部分加上提示標簽，在屏幕閱讀器可以為用戶朗讀title文本，提升無障礙訪問功能。

常規html頁面結構