前幾天介紹了網頁的基本組成元素，以及構成這些元素的語法。
接下來幾天，要開始說明怎麼編輯網頁的實際內容啦～

就像是使用Word等文書軟體撰寫文件，可以依據需求對文字添加不同樣式，或是插入圖片、表格等內容，或是將文件排版成各種版面。
建立網頁時，我們也可以透過HTML與CSS，將網頁變成我們想要的樣子。

爲文字添加樣式

透過下列這些元素，可以爲文字添加常見的樣式：

• 將文字以<b>元素包覆，可以將文字變成粗體。
• 將文字以<i>元素包覆，可以將文字變成斜體。
• 將文字以<u>元素包覆，可以爲文字加上底線。
• 將文字以<s>元素包覆，可以爲文字加上刪除線。
• 將文字以<mark>元素包覆，可以爲文字加上顏色註記。
• 將文字以<sup>元素包覆，可以將文字轉為上標。
• 將文字以<sub>元素包覆，可以將文字轉為下標。

同樣都是...，原來意思不同

粗體、斜體、底線

<strong>元素與<b>類似，都會讓文字變成粗體。而<em>元素與<i>類似，都會讓文字變成斜體。
他們的差別在於，<strong>有非常重要的涵義，<em>則有強調的意思。因此以無障礙功能唸出這兩個元素中的文字時，會改變朗讀的語調。如果使用粗體與斜體是基於前述原因，應該使用這兩個元素。[1]

在西方國家的書寫習慣中，使用粗體、斜體、底線的涵義如下：

• 斜體表示外來語、分類名稱、技術術語、想法...[2]
• 粗體表示關鍵字、產品名稱...[3]
• 底線表示拼字錯誤、專有名詞...[4]。

如果使用粗體、斜體與底線時是要表達這些意思，可以使用<b>、<i>、<u>等元素，並以class屬性說明背後的涵義。
相對的，如果使用粗體、斜體與底線等樣式時，沒有特別想傳達的涵義，則會建議使用CSS來設定。

刪除線

刪除線的使用也有這樣的差異。雖然<s>跟<del>同樣都可以為文字加上刪除線，但意義有些不同：

• <s>表示某段文字不再準確或相關，例如商品售價的更改。[5]
• <del>則專門用於呈現文件修改的狀況，表示將某段文字從文件中刪除。[6]

使用<del>時常常會搭配<ins>元素，以表示後來新增的文字。也可以使用cite屬性，加上解釋修改脈絡的資料。或是使用datetime屬性，說明修改的時間。

分段

寫文章時通常會將文字分段以便閱讀，這時就可以使用<p>元素。<p>元素的名稱即paragraph的意思。除了文字之外，也可以將圖片等內容分成不同段落。

<p>第一段</p>
<p>第二段</p>
<p>文章寫好了～</p>

<p>是區塊層級的元素，預設會從新的一行開始。關於區塊層級是什麼，之後會再詳細解釋，這邊先暫時帶過～

以無障礙功能唸出網頁內容時，可以識別<p>元素，以快速跳到下一個或上一個段落。但如果段落裡面沒有任何內容，可能會造成使用者的困擾。因此如果要拉開段落間的距離，應該使用CSS來設定。[7]

換行

第三天有提過，瀏覽器在渲染HTML檔案時會忽略其中的換行符。如果要將某個段落中的文字分行，可以使用<br>元素，如下列程式碼所示。<br>常會在撰寫詩歌或地址時用到。[8]

<p>
白日依山盡 黃河入海流<br>
欲窮千里目 更上一層樓<br>
我不想上樓 讓我當白癡<br>
不要啟蒙我 讓我當白癡
</p>

就像是在Word裡Enter與Shift + Enter有區別，前者是分段，後者只是換行但沒有分段。在網頁中如果要分段，應該要使用<p>元素而非<br>元素；如果只是要換行，則應該使用<br>元素而非<p>元素。

加上標題

寫文章通常都會下標題以便閱讀。若要在網頁中添加標題，可以使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>等元素。

數字越小，層級越高，顯示出來的字體大小也會越大。
<h1>是層級最高的標題，字體也是最大的。通常每個網頁只會有一個，表示網頁的主標題。

雖然總共有6種層級，但不建議在同個網頁中使用太多層級，通常最多只會使用3種。
使用這些元素時，需要遵循層級順序。如果先使用低層級再使用高層級的標題，像是先用<h3>再用<h2>，可能會讓讀者感到困惑。[9]

由於會影響讀者的閱讀體驗以及SEO，通常會建議為網頁添加標題。這些標題在使用無障礙功能唸出網頁內容時也很有幫助。

但如果只是想改變字體大小，而沒有想將文字設為標題的意圖，建議使用CSS來達成。

分隔線

如果要在段落之間添加水平分隔線，可以使用<hr>元素。

不過這通常帶有主題轉變或故事場景切換的涵義。如果只是單純想要加上分隔線，建議使用CSS來達成。[10]

小結

今天我們介紹了怎麼透過HTML的元素，為網頁中的文字加上粗體、斜體等樣式，將這些文字換行、分段，以及在段落之間加上標題、分隔線。

同樣的效果可以透過多種方式達成。可能是使用不同的HTML元素，或是另外搭配CSS來設定樣式。

但使用的方式不同，背後傳達的涵義其實也有差別。所以在決定用用哪一種方式之前，需要先確認想表達什麼意思。

參考資料

[1]:MDN, Emphasis and importance
[2]:MDN, <b>: The Bring Attention To element
[3]:MDN, <i>: The Idiomatic Text element
[4]:MDN, <u>: The Unarticulated Annotation (Underline) element
[5]:MDN, <s>: The Strikethrough element
[6]:MDN, <del>: The Deleted Text element
[7]:MDN, <p>: The Paragraph element
[8]:MDN, <br>: The Line Break element
[9]:MDN, <hr>: The Thematic Break (Horizontal Rule) element
[10]:MDN, Headings and paragraphs