阿嬤都看得懂的文字標籤與語意化標籤

昨天我們開始寫第一支 .html 程式了，不過網頁看起來還是太樸素。今天就讓我們介紹更多文字標籤，讓我們的網頁看起來更華麗一些吧！

讓我們再介紹幾個文字經常使用的標籤。在呈現文字的時候，除了段落之外，我們應該很常想到標題 (headline) 吧！但是標題有很多種啊，什麼標題一標題二，每個標題的大小都不太一樣，那該怎麼辦呢？沒關係，我們標題標籤是有編號的，所以我們標題標籤其實是一組，從

• h1, h2, ... , h6 都有喔！長相分別會是像這樣：

這是標題一

這是標題二

這是標題三

這是標題四

這是標題五

這是標題六

• 斜體字 (italic)，就是 i 囉！看起來會像這樣： Hello, 我是斜體字。 不過，我們還有另個標籤，也讓文字變成斜體：
• 強調 (emphasized)，標籤是 em。奇怪，明明都是畫出同個樣式，為什麼要搞 2 個標籤？這樣不是又要記超多東西嗎？

你是對的，但是讓我們反過來想想，是「斜體字」讓我們知道為什麼要把這段文字改變樣式，還是「強調」呢？當然是「強調」對嗎？各位阿嬤的記憶力都不算太好，有沒有可能之後你看見「斜體字」標籤，卻完全想不起來自己到底在做什麼？沒錯，em 標籤就是提醒我們，這是當初想要強調這段文字。

這種讓標籤不再只是改變樣式，還告訴我們這個標籤在幹嘛的作法，叫作「語意化標籤」(semantic tag)。這樣的作法，不只方便我們閱讀，也方便搜尋引擎閱讀，所以也會讓我們的網頁出現在搜尋結果中比較前面的位置。

咦，你說為什麼重要？當然是因為網頁工程師都很悶騷這樣可以提高網頁的曝光率啊！這種讓網頁出現在搜尋結果中比較前面的位置的策略，就是傳說中的搜尋引擎優化 (SEO) 囉！這也是網頁工程師的管區，會讓我們更受業主青睞喔～

接下來，讓我們再介紹 4 組會幫我們加上樣式的文字標籤：

• 粗體字 (bold)，標籤是 b。沒錯，它和之前的 strong 樣式相同，但是當然是 strong 才是語意化標籤囉，所以我們多用 strong 來取代 b 吧！
• 橫槓線 (strikethrough) 和刪除 (deleted)，標籤分別是 s 和 del，會把包含的文字作出用橫槓刪除的樣子；當然，後者是語意化標籤。
• 畫底線 (underlined)，標籤是 u。底線標籤包含的文字，會畫上底線；由於這個標籤沒有語意化的版本，所以強烈建議不要使用，而改採之後使用 CSS 樣式的方式來呈現。
• 標註 (marked)，標籤是 mark。標註標籤包含的文字，預設是加上黃色底色。

今天我們介紹了常見的文字標籤，還有語意化標籤這個重要的概念。不過，想要讓網頁排版變得更美，我們還必須使用之前提到的 div 標籤，幫我們把這些文字內容打包起來。因此，明天就讓我們看看 div 標籤怎麼使用，以及開始幫標籤穿上 CSS 樣式吧！