HTML標籤

HTML（超文件標記語言，HyperText Markup Language）是用來建立網頁的標記語言。以下是一些常見的基本 HTML 標籤介紹：

1. <!DOCTYPE html>

宣告這是一個 HTML5 文件。

<!DOCTYPE html>

2. <html>

HTML 文件的根元素，包裹整個 HTML 頁面。

<html>
  ...
</html>

3. <head> 與 <body>

<head> 包含網站的中繼資料，例如標題與 CSS；<body> 包含頁面主要的內容。

<head>
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>歡迎來到我的網站</h1>
</body>

4. <title>

定義瀏覽器標籤上顯示的標題。

5. 標題標籤 <h1> ~ <h6>

用來定義標題層級，<h1> 為最大標題，<h6> 為最小標題。

6. 段落 <p>

用來定義一段文字內容。

7. 超連結 <a>

建立超連結，可連至外部網站或頁面內指定 id 位置。

外部連結範例：

錨點連結範例（跳至頁面內特定元素）：

8. 圖片 <img>

插入圖片，需指定 src（來源）與 alt（替代文字）。

9. 清單 <ul>、<ol>、<li>

  • <ul>：無序清單

  • <ol>：有序清單

  • <li>：清單項目

10. <div> 與 <span>

  • <div>：區塊元素，用於布局或分組內容。

  • <span>：行內元素，用於小範圍文字的樣式控制。

11. 強調文字 <em> 與 <strong>

  • <em>：表示語意上的強調，通常會以斜體顯示。

  • <strong>：表示重要性，通常會以粗體顯示。

12. 表格 <table>、<tr>、<th>、<td>

用來呈現結構化資料。

13. 語意化標籤（Semantic Elements）

語意化標籤使 HTML 結構更清晰，便於維護與搜尋引擎理解。

常見語意標籤：

  • <header>：網站或區塊的標頭，通常包含 logo、標題或導覽列。

  • <nav>：導覽列，內含網站主要連結或選單。

  • <main>：頁面主體內容，整體唯一。

  • <footer>：頁尾資訊，例如聯絡方式、版權聲明。

  • <section>：具主題性的區塊，如章節、功能群組。

  • <article>：獨立內容單位，例如部落格文章、留言、報導。

  • <aside>：與主內容間接相關的補充資訊，如側欄、提示區塊。

  • <figure>：包含圖片、圖表、影片等媒體。

  • <figcaption>：用於描述 <figure> 的文字說明。

  • <video> / <audio> / <embed>：用於嵌入影音或其他媒體檔案。

結構範例：

這些語意標籤有助於建立結構明確、可讀性佳的 HTML 文件。

14. 導覽錨點範例

以下是一個實際應用這些標籤與屬性的範例清單，可作為頁面內導覽：

掌握這些 HTML 標籤是建立現代網頁的第一步，搭配 CSS 與 JavaScript 可以創造互動性與視覺豐富的網站。

PreviousHTML屬性NextJavaScript 基礎語法教學

Last updated