建議一：清晰的描述頁面中的內容
lang 屬性
<html lang="zh-Hant-TW"> <!--...--></html>網頁的 <html> 元素應當明確的描述 lang 屬性，好辨別這個網站主要的地區語系，像是台灣繁體中文就是 zh-Hant-TW。
<head> 元素
可以用於放置一些描述該頁面內容的資料，這些資料不會直接顯示在網頁上，但可以提供給瀏覽器或爬蟲使用。像是撰寫<meta> 元素，可以更進一步讓機器人與瀏覽器了解你的網站，使它們更熟悉網頁內容能夠更好的引導用戶進入網站。
一些社交平台像是 Twitter 與 Facebook 也會推出自家設立的標準，可以完成這些資料的描述，在這些平台上分享網站就會有比較齊全的介紹，像是：
<!-- 編碼方式 --><meta charset="UTF-8" /><!-- 頁面縮放設定 --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 頁面標題 --><title>助教統整 n 個方法幫助你寫出更好的 HTML - 網頁東東</title><!-- 頁面簡短描述 --><meta name="description" content="頁面的簡短描述" /><!-- 頁面小圖示 --><link rel="icon" type="image/png" href="http://example.com/image.png" /><!-- 頁面描述 --><meta name="description" content="這是一個網頁的描述" /><!-- Open Graph 標題 --><meta property="og:title" content="這是一個網頁的標題" /><!-- Twitter Card --><meta name="twitter:card" content="summary" /><!--...-->建議二：檢查程式代碼的有無語法錯誤
可以到 W3C 的語法檢測網站 檢測網站頁面是否有語法錯誤。常見的問題像是：
- 標籤沒有正確的閉合
- 屬性沒有正確的使用
- 不正確的使用標籤
建議三：使用語意化的標籤來描述網頁內容
在之前可能只會用到 <div> 或者是 <span> 來裝載網頁內容，比較少重視語意化的描述網頁，如今 HTML5 加入了許多語意化的標籤，這些標籤可以更有效率的架構並描述網頁內容，推薦到： Fooish 程式技術 了解不同的 HTML5 標籤與其使用時機。在底下提供一些同學常誤用的標籤，並解釋其正確的使用時機：
一個頁面只會有一個 <h1> 標籤
在一個網頁中，<h1> 標籤只能出現一次，用於標註當前頁面最重要的資訊標題，不要在一個頁面中出現一個以上的 <h1> 標籤，這是不和規的語法。反向的，也建議不要完全不使用 <h1> 標籤，良好的 <h1> 標籤可以很好的錨定整個頁面的重點。
避免跳過標題標籤
舉例來說，在 <h1> 標籤接著使用 <h3>、依此類推，這麼做雖然是和規的語法，但卻可能對使用螢幕閱讀器的使用者造成混淆，以下是兩者比較的範例代碼：
<!-- ❌ 跳過標題標籤 --><h1>網頁東東，用最簡單親切的方式描述如何設計與架構網頁</h1><h2>我們的優勢</h2><h4>圖片輔助</h4><p>一些說明</p><h4>初學者友善</h4><p>一些說明</p><h4>免費資源</h4><p>一些說明</p>
<!-- ✅ 無跳過標題標籤 --><h1>網頁東東，用最簡單親切的方式描述如何設計與架構網頁</h1><h2>我們的優勢</h2><h3>圖片輔助</h3><p>一些說明</p><h3>初學者友善</h3><p>一些說明</p><h3>免費資源</h3><p>一些說明</p>要依序的使用不同等級的標題架構網頁，不要跳躍的使用不同等級的標題。
<ul> 內必須是 <li> 標籤
<li> 只能存在於 <ul>、<ol>或<menu>標籤之內，否則是不合規的語法。
<!-- ❌ 不合規 --><ul> <div></div> <p></p></ul>
<!-- ✅ 合規 --><ul> <li></li> <li></li> <li></li></ul>
<!-- ✅ 合規 --><ul> <li><div></div></li> <li><div></div></li> <li><div></div></li></ul><section> 建議要搭配標題
只要有明顯含意的區塊就可以使用 <section> 並且建議搭配標題標籤，只有極度少數的情況才不需要（舉例來說第二層的導覽列）否則建議都搭配標題。
<section> <h2>標題</h2> <p>內容</p></section>建議四：圖片與影片的使用
大型檔案通常是網頁效能的殺手，必須額外謹慎看待，因為這些資源是優化上可以付出極小的代價獲得巨大效益的地方。為了這個主題額外寫了一篇專門說明網頁圖片的文章：所有最佳化網頁圖片的技巧都寫在這了！可以參考看看。
善用行內 SVG
如果你的 SVG 圖片是簡單的圖形且不會重複出現，那麼建議將它內嵌在 HTML 中，這樣就避免了多發送一個非必要的 HTTP 請求，並且能夠更容易的控制 SVG 的樣式，舉例來說以下案例為行內 svg 的 fill 屬性添加 currentColor 它現在可以自由地適應外部文字顏色來變換其填色了：
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"> <path d="M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z" /></svg>使用合適的格式
如果沒有特別要支援舊瀏覽器的需求，強烈建議將點陣圖片轉換為 webp 格式，這是一種支援良好的新型圖片格式，可以非常有效的減少圖片的大小，並且支援透明度。影片的話則是強烈建議使用 webm 格式。
使用合適的大小
視情況調整圖片尺寸，不要加載一個非常大張的圖片或影片但實際上顯示出來很小，需要多少大小就加載多大即可，基本上單張圖片 300k 以上就不太能接受了，再上去可以考慮使用懶加載之類的方式提升使用體驗。
撰寫詳細的 alt 屬性
強烈建議添加 alt 屬性，並明確的描述其圖片內容。為什麼圖片的 alt 屬性這麼重要？ 是因為當圖片無法正常顯示，或是爬蟲在爬取網頁時，alt 屬性的內容可以幫助爬蟲了解圖片的內容，這對於 SEO 來說是非常重要的，這裡強烈建議閱讀：Google 圖片搜尋引擎最佳化 (SEO) 的最佳做法。
撰寫 width 與 height 屬性
強烈建議添加 width 與 height 屬性，避免布局偏移。
有同學提問說：如果把圖片的 CSS 設計為 RWD 適應，這樣可以改善布局偏移嗎？ 答案是不行的，可以試想一個情境：「網頁才剛開起，連 CSS 都還沒有載入的時候」瀏覽器在繪製每個元素，但只有圖片不知道實際載入進來會是多大？因此還是會造成布局偏移的問題。應該在創建圖片的時候就清晰的描述該圖片寬與高是多少，不管 CSS 如何。