不久前才有一篇文章聊到某些 CSS 秘訣，接著再來跟大家聊聊 HTML 的竅門了！本文將提點某些 HTML 程式碼的小訣竅與建議，其中更有幾點很適合初學者納為己用，例如適當分段落、使用標題標籤、改善表單。但我們仍會討論圖像的 SVG sprites，以及更進階的。
文字方面
段落
我們寫的大多數程式碼必須再予以分段，這時應該使用 <p> 這個 HTML 元素分段。請勿使用 <br> 斷行標籤切割出文字的段落；斷行標籤本來就不是這種用法。
避免：
Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream pie jelly
beans muffin donut marzipan oat cake.
<br>
Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes pudding
chocolate cake cheesecake toffee.
1234567
Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream pie jellybeans muffin donut marzipan oat cake. <br> Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes puddingchocolate cake cheesecake toffee.
建議：
<p>Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice cream
pie jelly beans muffin donut marzipan oat cake.</p>
<p>Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubes
pudding chocolate cake cheesecake toffee.</p>
12345
<p>Cupcake ipsum dolor sit. Amet chupa chups chupa chups sesame snaps. Ice creampie jelly beans muffin donut marzipan oat cake.</p> <p>Gummi bears tart cotton candy icing. Muffin bear claw carrot cake jelly jujubespudding chocolate cake cheesecake toffee.</p>
斷行標籤應用於詩、歌的斷行：
<p>So close, no matter how far<br>
Couldn’t be much more from the hearth<br>
Forever trusting who we are<br>
And nothing else matters</p>
1234
<p>So close, no matter how far<br>Couldn’t be much more from the hearth<br>Forever trusting who we are<br>And nothing else matters</p>
標題
標題標籤從 <h1> 到 <h6>，各自代表 1 (最重要) 到 6 (最不重要) 的等級。
為正確傳達語義，請依照順序使用標頭，而不要只顧及瀏覽器所將繪製的標頭效果。若只是單純需要字體大小的效果，你可以、也應該使用 CSS 達到你所需。
避免：
<article>
<h1>Monkey Island</h1>
<h4>Look behind you! A three-headed monkey!</h4>
<!-- ... -->
</article>
12345
<article> <h1>Monkey Island</h1> <h4>Look behind you! A three-headed monkey!</h4> <!-- ... --></article>
建議：
<article>
<h1>Monkey Island</h1>
<h2>Look behind you! A three-headed monkey!</h2>
<!-- ... -->
</article>
12345
<article> <h1>Monkey Island</h1> <h2>Look behind you! A three-headed monkey!</h2> <!-- ... --></article>
另外應該考慮的，就是該如何搭配標題來建立子標題或標籤行。根據 W3C 的建議 ，應使用一般文字標記 (Markup)，而避免較低層級的標題。
避免：
<header>
<h1>Star Wars VII</h1>
<h2>The Force Awakens</h2>
</header>
1234
<header> <h1>Star Wars VII</h1> <h2>The Force Awakens</h2></header>
建議：
<header>
<h1>Star Wars VII</h1>
<p>The Force Awakens</p>
</header>
1234
<header> <h1>Star Wars VII</h1> <p>The Force Awakens</p></header>
表單方面
提示欄位輸入文字
在 <input> 表單元素中的輸入欄位提示文字 (Placeholder)，可為使用者呈現範例值，並在使用者於該欄位輸入時自動消除。此提示文字即是某一欄位的有效格式範例。
但現有的實作上，有很多提示文字都如同 <label> 元素「告知此為何種欄位」的作用，而不是作為有效輸入值的範例。這種實作的親和度較低，開發者更應避免之。
避免：
<input type="email" placeholder="Your e-mail" name="mail">
1
<input type="email" placeholder="Your e-mail" name="mail">
建議：
<label>
Your e-mail:
<input type="email" placeholder="darth.vader@empire.gov" name="mail">
</label>
1234
<label> Your e-mail: <input type="email" placeholder="darth.vader@empire.gov" name="mail"></label>
行動裝置的鍵盤
針對如手機或平板電腦等行動裝置上的瀏覽活動，理應提供打字秘訣給使用者。只要為我們所使用的 <input> 元素選出正確的類別，就能達到此效果。
舉例來說，type="number" 可讓手機顯示數字鍵盤，而非常見的英數字元鍵盤。同理，type="email"、type="tel" 等都是。
避免：
<label>Phone number: <input type="text" name="mobile"></label>
1
<label>Phone number: <input type="text" name="mobile"></label>
建議：
<label>Phone number: <input type="tel" name="mobile"></label>
1
<label>Phone number: <input type="tel" name="mobile"></label>
下圖的左、右兩邊分別是用 type="text"與 type="tel" 所顯示的鍵盤：
圖像
來認識 SVG 檔案！你不僅可以透過 <img> 標籤使用向量圖片：
<img src="acolyte_cartoon.svg" alt="acolyte">
1
<img src="acolyte_cartoon.svg" alt="acolyte">
也可以在自己的網站中使用 SVG sprites 實作向量圖示，藉以取代 Web Font。因為瀏覽器將 Web Font 圖示當做文字而非圖像，所以 Web Font 可能無法產生較平滑的線條而發生鋸齒效果，且還有如內容＼廣告阻擋軟體可能阻擋下載 Web Fonts 等的潛在問題。你可欣賞由 Sarah Semark 主講的影片，進一步了解 SVG 較 Web Font 更優於用做圖示的理由。你也可參閱 CSS-Tricks 知道此一技術。
其實 SVG sprites 的概念與 CSS sprites 極為類似。實作上必須將所有的 SVG 靜態檔案 (Asset) 融入單一圖像檔案之中。在 SVG 的狀態下，所有靜態檔案應包裹進單一 <symbol> 標籤之中，如下所示：
<svg>
<symbol id="social-twitter" viewBox="...">
<!-- actual image data here -->
</symbol>
</svg>
12345
<svg> <symbol id="social-twitter" viewBox="..."> <!-- actual image data here --> </symbol></svg>
接著，可在你的 HTML 中透過類似的 <svg> 標籤使用該圖示。我們這裡即以 SVG 檔案指向 symbol ID：
<svg class="social-icon">
<use xlink:href="icons.svg#social-twitter />
</svg>
123
<svg class="social-icon"> <use xlink:href="icons.svg#social-twitter /></svg>
建立 SVG spritesheet 看起來太麻煩了嗎？所以才有類似「gulp-svgstore」的工具，可自動進行整個程序，依據各個靜態圖像檔案產生 1 組 spritesheet。
另請記得，因為我們是以 <svg> 標籤取代 <img> 來包裹圖像，所以也能透過 CSS 套用樣式。如此一來，你用 Web Font 圖樣達到的酷炫效果，也同樣能用 SVG 圖樣完成。
.social-icon {
fill: #000;
transition: all 0.2s;
}
.social-icon:hover {
fill: #00f;
}
12345678
.social-icon { fill: #000; transition: all 0.2s;} .social-icon:hover { fill: #00f;}
但 CSS 仍有某些限制，如當使用 SVG 並以 <use> 連至 <symbol> 之時，圖像會透過 Shadow DOM 投射，讓我們無法使用某些 CSS 功能。在此情況下，我們就不能擇優挑出 SVG 的元素並套用樣式，且某些屬性 (如 fill) 也只能套用到尚未定義的元素。但 Web Font 圖樣也是相同情況喔！
在下列展示裡，你可看到 SVG sprite 的運作範例。只要滑鼠游標移到圖像之上，火把上的火焰就會透過 CSS 改變其顏色。
希望這些秘訣能幫到你。如果你有任何問題，或要對大家分享自己的秘訣，歡迎在下方留言！
原文連結：A few HTML tips