作為線上作家或部落客您需要了解的 7 個 HTML 標籤

要點

HTML 在網路上傳播書面內容方面發揮著至關重要的作用，因為網頁依靠其能力以吸引人的方式呈現資訊並組織資訊以透過搜尋引擎進行最佳索引。

為了完全控制書面作品的呈現和美學吸引力，作者必須熟悉基本的 HTML 元素，例如標題標籤、粗體和斜體文字標籤以及段落標籤。

清單、項目符號和圖像標籤可用於增強文章的組織和美學吸引力，而超連結則提供額外的上下文並提高搜尋引擎排名。

有些作者（包括那些專門從事技術報告的作者）普遍存在這樣的誤解:不需要精通 HTML 知識。然而，對於要在網路上發布的內容，對 HTML 的理解變得比最初想像的更加相關和重要。

網站利用 HTML 作為顯示內容的方式。儘管一些標記編輯器、網站創建者和內容管理平台允許對文章進行視覺化編輯，但值得注意的是，HTML 程式碼仍然參與此過程。

為了全面掌控內容的外觀並對其表示進行精確調整，熟悉核心 HTML 元素至關重要。這些元素對網頁或網站在版面、風格和組織上的顯示方式有相當大的影響。熟悉其用法使用戶能夠根據特定的偏好和要求有效地塑造其數位內容。

標題標籤

標題標籤允許對文章中的特定段或子段進行總結。通常，網頁瀏覽器會以更大、更粗的字體顯示標題標籤，使它們比周圍的文字更顯眼。

除了透過標題傳達視覺訊息外，它們還賦予內容組織感和排名，從而促進網路爬行演算法對網頁排列的理解。

使用六個編號的標題標籤，其中更有效的數字對應於較低等級的標題。建議將標籤用於網頁的主標題，而標籤應用於部分，標籤應用於子部分。

考慮到內容和目標受眾的性質，謹慎採用適當的組織結構。雖然標籤可能適合複雜或法律導向的材料，但它們的可讀性可能會給一般受眾帶來挑戰。

標題在將冗長的文章分解為更易於管理的部分方面發揮著至關重要的作用，使那些可能覺得文字牆令人生畏的讀者更容易閱讀它們。與可能瀏覽沒有吸引力的內容的被動讀者不同，標題提供了一種鼓勵積極參與材料的結構感。透過主題之間的簡短插曲，作者和讀者都可以在深入討論當前的討論之前喘口氣並重新組合。

請確保使用適當的結束標記來結束每個標題元素，例如 。

粗體、斜體和其他文字格式

標題標籤在塑造網頁的整體架構中起著至關重要的作用，而更具體的格式標籤旨在解決文本中的微小細節。例如，當試圖強調句子的特定片段時，這些標籤提供了一種改變文字外觀而不影響其層次意義的方法。

⭐ 用於粗體文字。

⭐ 表示斜體文字。

⭐ 用於帶有刪除線的文字。

從替代應用程式傳輸文字時，Markdown 和內容管理工具經常複製格式。要精煉此訊息，請從原始來源中刪除這些程式碼，或在插入資料時移除格式，以避免在初始過程中出現此類問題。

段落和間距

除了使用標題將內容組織成不同的片段之外，還可以使用 和 元素分別來描繪段落或建立行中斷。

一些視覺化編輯工具會在鍵入時自動合併這些標記，例如按下回車鍵時。儘管如此，使用者可以在基於文字的編輯器中編寫內容，將這些屬性直接包含在 HTML 程式碼中。

當編寫需要在行之間進行視覺分隔而不需要開始新段落的文字時，使用 HTML 自關標籤是一個合適的選擇。在創作詩歌或其他文學作品時，這一點尤其重要，其中思想從一行無縫地流向另一行，並且不需要創建不同的段落。在這種情況下，利用標籤可以實現平滑過渡，同時保持所需的空間劃分。

標籤是一個 HTML 元素，缺少對應的結束對應項，因此應獨立使用。此屬性可以歸因於它不包含也不影響任何內容或描述。

這些標記的使用使得能夠遵守與書面和數位內容的美學品質有關的既定準則，從而提高人類訪客和搜尋引擎演算法感知的網頁的可信度。

數字和項目符號

在連續呈現多個項目時，列表是排列資訊的有效手段。當描述單一組件的集合時，例如食譜的成分或順序說明，使用清單可以確保連貫的組織。

此元素用於建立有序或編號列表，而標籤表示包含項目符號項目的無序列表。此標籤用於定義任一清單類型中的各個元素。

以下是 HTML 格式中由五個元素組成的有序清單的範例:css 第一項 第二項 第三項 第三項 第五項

 <ol>
     <li>alpha</li>
     <li>bravo</li>
     <li>charlie</li>
     <li>delta</li>
     <li>echo</li>
</ol>

上述標記在由 Web 瀏覽器呈現時，以類似下列結構的格式顯示:

如果您喜歡使用枚舉列表，請替換 以獲得項目符號清單。

提供的 HTML 程式碼示範如何使用嵌套清單來組織內容。最外面的列表由帶有標識符“my-list”的``標籤定義。在外部列表中，有兩個使用 標籤建立的內部列表，其中嵌套了由 元素表示的進一步列表項，後面跟著包含在 標籤中的相應文字描述。這種結構允許以易於理解的格式有組織地呈現多層級資料。

該任務要求您使用適當的語言和語氣提供給定文本的更精緻和雄辯的版本，在保持正式風格的同時傳達相同的含義。

 <ol>
  <li>alpha</li>
  <li>
    bravo
    <ol>
      <li>Hip</li>
      <li>Hip</li>
      <li>Hooray</li>
    </ol>
  </li>
  <li>charlie</li>
  <li>
    delta
    <ul>
      <li>Difference</li>
      <li>River mouth</li>
    </ul>
  </li>
  <li>echo</li>
</ol> 

您可以使用包含各種清單格式的嵌套清單結構，以說明更複雜的層次結構並增強讀者對給定主題的理解。

建表

在處理大量相互關聯的資料時，使用表格可能是一種有效的組織方式。

若要建立 HTML 表格，請從 `

元素開始。它應該包含您想要在表中顯示的所有資訊。使用 `` 元素定義表格的每一行，並使用 `` 元素表示每行中的各個儲存格。如果您希望指示表格標題，可以將 元素替換為 ` 元素，表示「表格標題」。請記住為表格、行和儲存格提供相應的結束元素。

 <table>
     <tr>
          <th>Group 1</th>
          <th>Group 2</th>
     </tr>
     <tr>
          <td>Mark</td>
          <td>Belle</td>
     </tr>
     <tr>
          <td>Ralph</td>
          <td>Shane</td>
     </tr>
     <tr>
          <td>John</td>
          <td>Josie</td>
     </tr>
</table>

在 Web 瀏覽環境中呈現的形式中，該表應如下所示:

使用 HTML 建立表格時，請務必注意流程是逐行而不是逐列進行的。然而，人們可以採用現代 CSS 技術為表格注入各種風格元素，例如邊框描繪、彩色行迭代和其他裝飾。

新增圖像

與格式化文字內容相比，將視覺元素合併到網頁中提出了獨特的挑戰。通常，圖像不會透過語言來傳達，因此需要將它們儲存在單獨的檔案中。因此，必須結合相應的 HTML 標籤來建立識別這些文件位置的方法。

使用“”元素可以將視覺影像合併到文件中；然而，有必要使用稱為「屬性」的 HTML 功能來指定隨附圖像檔案的位置。這些屬性附加到標籤的識別碼並位於結束的尖括號之前。每個屬性都擁有一個名字和一個對應的值，它們透過等號連接。建議將屬性值括在雙引號內。

這是一個例子:

 <img alt="tree leaves and branches"
    src="https://images.unsplash.com/photo-1532365673558-f9bb768644e7"> 

“src”屬性表示來源，指定要合併的圖像的 URL。這可以是關係 URL 或絕對 URL，這取決於它是外部圖像還是駐留在同一伺服器上。

“alt”屬性表示“替代文字”，用於提供圖像中所描繪內容的描述。通常建議合併此屬性，因為它對螢幕閱讀器用戶和搜尋引擎演算法都有價值。無論觀看者是人類還是機器，那些因任何原因無法感知原始圖像的人都可以透過提供替代文字來深入了解其內容。

瀏覽器將合併「src」屬性中提供的來源 URL 指定的圖像，將其無縫整合到網頁中，如下所示: