熟悉 HTML
這篇文章並是教如何撰寫 HTML ，而是專注在討論如何使用 HTML。
如果您還不清楚如何撰寫 HTML，可以透過 CSS 教育訓練的 HTML 教學文章學習，但這一篇觀念也可以以先閱讀，以建立正確的 HTML 觀念。
正確使用 Html tag
什麼叫正確的使用呢？
標籤被設計出來是有其意義的，根據其設計出的由來，應用在適合的場景。
舉例來說：
<nav> 具有導覽意思，<article> 具有此範圍可以獨立視為一個網頁，如此一來可以讓無障礙使用者可以快速暸解網頁區塊意義、快速操作外，也因為 UX 體驗變好，搜尋引擎也會將網站的排名提高， SEO 便有莫大的幫助。
另外，正確的使用 tag ，在網頁排版上也是至關重要，正確的使用可以引導您的版面架構更嚴謹、更有條理，所以不管在商業上、意義上、HTML 結構上，正確的使用標籤是最非常重要的。
時候需要多個 tag 一起出現才會是有意義的，例如<label>與<input>。
HTML tag 的語意也會受 CSS 影響，例如 display: none。
HTML tag 也會影響 ARIA，使其造成混亂。
HTML Dom 排序
Dom 的內容最好符合網頁 「 由左而右，由上至下 」 的規則排序，換句話說，把所有的 CSS 裝飾拿掉，這個網頁的內文必須是可以讀的通順。這是要避免當 CSS 出現問題、或是想要列印、或精簡閱讀時，內容不會出現問題。
遵循這個基本規則也對 CSS 排版有利，有助於減少降低耗能、程式簡潔，只在有需要時變化即可。
正確使用 Attribute
在我們正確的使用標籤後，還有一些細節需要注意。
直接舉例：有一個表單輸入框 <input>，目的是要讓人家填寫電話號碼。
用桌機的人可能沒有差別， 但是用手機打字的人差異就很大， 因為先設定好屬性 type="tel" 的話（先不管有沒有 Bug），鍵盤會以 「電話號碼」 按鍵模式出現，不僅符合輸入意義，按鈕也比較大，體驗上會很好。 如果是 「文字」 模式那就還要讓使用者自行切換或執行的更高的精準度操作。也許您操作的很好， 但對於無障礙使用者，他所要花費的時間更多，體驗就變差了。
Accesskey
除了瀏覽器預設的快捷鍵加上自訂義 accesskey 的搭配，如下圖：
如何達成上述項目
最好的辦法只有將 HTML 字典拿起來一項一項看，擴大 「知」 的範圍，不求全部背起來，只求有印象。 這樣到應用的時候，就有可能想起來其他解決方案的可能性。
看的時候建議先看常用的標籤，先確保常用的標籤都非常熟練，並且其 attribute 也都很熟悉，有餘力再針對工作可能會用到的或是自己有興趣的地方加強。
例如:
<h1> - <h6>
<nav>、<ul>、<ol>、<li>
<a>、<button>
<article>、<section>、<p>
<html>、<body>
<header>、<main>、<footer>
<table>、<tr>、<th>、<td>
...
HTML 到使用輔具科技的使用者
注意瀏覽器版本、行動裝置限制
一些比較新的 HTML Tag 可能只能在比較新版本的瀏覽器中運作，若您的專案/產品需要支援較舊版本的瀏覽器，您可能需要做一些額外處理，或是就不使用比較新的 Tag。
另外，如同正確使用 attribute，有些情況會只特別出現在行動裝置上，所以要顧及到 HTML Tag 在不同裝置瀏覽器的操作和狀態。
參考連結
Last updated