2023-06-11|閱讀時間 ‧ 約 6 分鐘

HTML 習作｜常用於文本的元素：<p>、<h1>、<span>、Text Formatting

HTML

本篇習作內容，除了練習六角預習影音內的常用語法章節外，也額外整理了其它常用於文本的 HTML 元素，希望能透過這樣的整理，在未來設計結構更複雜的網站介面內容時，能扎穩根基。

另外，可以一邊閱讀 w3schools HTML tags 來加深對標籤的知識。

(一) HTML p element

The HTML p element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

一個 p 段落總是從新的一行開始，瀏覽器會自動在段落前後添加一些空白邊距（ a margin ），如下圖呈現：

注意：本篇的圖示為了方便辨認標籤的型態，我在元素上加了 border。

p 標籤具有 block 屬性，可以在 p 標籤中包進其它元素

如下圖橘色的區塊，p 標籤帶有 margin 外邊距。這是因為瀏覽器 Chrome 預設會對每個標籤做屬性預設值（瀏覽器預設樣式）。例如：「預設行高、文字大小、列表樣式、標籤邊界及留白區域等等，且用不同瀏覽器開起來的效果也不盡相同（ Safari、IE、Firefox 呈現方式不相同）。」

橘色間距為 p 標籤預帶的 magin 外邊距，也就是瀏覽器預設樣式

(二) HTML h1~h6 element

HTML headings are titles or subtitles that you want to display on a webpage.

HTML headings 是在網頁上顯示的標題或副標題，瀏覽器會自動在標題前後添加一些空白（ margin邊距），h1~h6 為 block 屬性的 HTML 標籤。

標題在網頁內容中很重要，搜索引擎使用標題來索引網頁的結構和內容，用戶經常通過標題瀏覽頁面，因此使用標題來顯示文檔結構很重要。

h1 標題用於主標題，其次是 h2 標題，然後是不太重要的 h3，依此類推，測試了一下寫入 h7 標題，但是沒有更小。

h1~h6 標籤，越大的文字數字越小

可以發現 h1~h6 元素也帶有瀏覽器預設樣式，前後都有 margin，如下圖：

橘色外邊距 margin

另外需要注意，僅將 HTML h1~h6 用於標題，不要使用它們來讓其他文本變大或加粗，如要使其他文本變大或加粗，可使用 CSS font-size 或 CSS font weight 來定義文字樣式。

(三) HTML span element

A span element which is used to color a part of a text.

在 p 標籤中加入 span 標籤

span 標籤是一個內聯容器 ( 行內元素 inline element )，用於標記文本的一部分，或文檔的一部分，span 標籤不具語意。 span 標籤可通過 CSS 設置樣式，或者使用 class 或 id 屬性通過 JavaScript 進行操作，span 標籤與 div 元素非常相似，但 div 是塊級元素 ( block element ) 而 span 是內聯元素。

w3schools HTML span tags

(四) HTML Formatting Elements

HTML contains several elements for defining text with a special meaning. Formatting elements were designed to display special types of text.

HTML Formatting Elements，是為文本、文字定義特殊含義的 HTML 標籤：

HTML Formatting Elements 圖表一覽

需要注意的是，相較於 p 標籤或 h1 標籤的 block 屬性，上述為文本定義特殊意義的 Formatting Elements 皆為 inline 屬性：b、strong、i、em、mark、small、del、ins、sub、sup。 🚩 可以參考屬性整理一覽

b 粗體文本
strong 重要文本
i 斜體文本
em 強調文本
mark 標記的文本
small 較小的文本
del 刪除的文本
ins 插入的文本
sub 下標文本
sup 上標文本

在 w3schools 裡的提示和注意事項：根據 HTML5 規範，當沒有其他標籤更合適時，b 標籤應該作為最後的手段使用，規範規定標題應該用 h1 到 h6 標籤表示，強調文本應該用 em 標籤表示，重要文本應該用 strong 標籤表示，標記/突出顯示的文本應該是用 mark 標記表示。可使用 CSS 設置粗體文本：“font-weight: bold;”。