基礎
標籤
Tag
<header>...</header>意思
一個用尖角括號包圍的標記關鍵字，用於告訴瀏覽器創建哪種類型的元素。
如何指定
當目標是廣泛的元素類型時，例如每個按鈕或每個連結，請使用標籤名稱。
標記
<header>...</header>請求範例
變更標題中所有按鈕標籤的樣式。
程式設計
頁面編輯用的 HTML 結構術語
搜尋標籤、元素、屬性、頁面區域、表單控制項與無障礙標籤。
51 個項目
基礎
元素
Element
<button>Menu</button>意思
一個完整的 HTML 片段，通常由起始標籤、內容和結束標籤組成。
如何指定
當您指的是頁面的一個可見部分時，說「元素」，例如標題、卡片或按鈕。
標記
<button>Menu</button>請求範例
將語言切換元素移動到菜單按鈕旁邊。
基礎
屬性
Attribute
<a href="/ko">Home</a>意思
額外資訊寫在開始標籤內，例如 href、class、id、src 或 aria-label。
如何指定
當相同的標籤出現很多次，但只有一個具有特定的類別、ID 或標籤時，屬性非常有用。
標記
<a href="/ko">Home</a>請求範例
為僅圖標的菜單按鈕添加 `aria-label` 屬性。
基礎
開啟和關閉標籤
Opening and closing tag
<section>Content</section>意思
許多元素以起始標籤開始，並以對應的結束標籤結束。
如何指定
這有助於說明在標記中一個部分的開始和結束位置。
注意
缺少結束標籤可能會導致瀏覽器將後續內容視為錯誤元素的組成部分。
標記
<section>Content</section>請求範例
檢查卡片部分是否有匹配的開頭和結尾標籤。
文件結構
DOCTYPE
DOCTYPE
<!doctype html>意思
一個聲明，指示瀏覽器將文檔渲染為現代 HTML。
如何指定
它通常由框架處理，並且在組件開發過程中很少被修改。
標記
<!doctype html>請求範例
不要更改文件類型；僅編輯頁面組件。
文件結構
html
html
<html lang="ko">...</html>意思
包含整個 HTML 文件的根元素。
如何指定
HTML 元素用于文档范围内的设置，例如语言或主题属性。
標記
<html lang="ko">...</html>請求範例
為每個地區正確設定 HTML 的 lang 屬性。
文件結構
頭部
head
<head><title>...</title></head>意思
包含元数据、标题、图标、SEO 标签和脚本的文档区域，这些内容不是可见的页面内容。
如何指定
在請求更改SEO標題、描述、規範URL或元數據時，使用此術語。
標記
<head><title>...</title></head>請求範例
更新 HTML 結構術語頁面的元資料標題。
文件結構
body
body
<body>Visible page</body>意思
包含可见页面内容的文档区域。
如何指定
大部分版面配置、標題、菜單和工具的修改都發生在正文內。
標記
<body>Visible page</body>請求範例
保持淺色和深色模式下的主體背景一致。
文件結構
標題
title
<title>AI Engineering Tools</title>意思
瀏覽器標籤中顯示的頁面標題，通常用於搜尋引擎。
如何指定
在 H1 標題可以接受，但瀏覽器或 SEO 標題需要更改時使用。
標記
<title>AI Engineering Tools</title>請求範例
使瀏覽器標題更具體，但不要更改可見的頁面標題。
文件結構
meta
meta
<meta name="description" content="...">意思
用於描述頁面、視窗、編碼或社交預覽資訊的元數據標籤。
如何指定
元描述會影響預覽和搜尋摘要，但不影響頁面上的文字。
標記
<meta name="description" content="...">請求範例
更新說明文字，提及可搜尋的 HTML 術語。
頁面區域
標題
header
<header>...</header>意思
一個語義區域，用於介紹性或頂部導航內容。
如何指定
使用 `header` 元素，當目標是網站標題、頂部導航、主題按鈕、語言按鈕或菜單按鈕時。
標記
<header>...</header>請求範例
將語言切換元素移動到標題控制中，靠近菜單按鈕。
頁面區域
nav
nav
<nav>...</nav>意思
一個語義區域，用於主要的導航連結。
如何指定
在編輯類別連結、選單群組或頁面導航時，請使用 nav。
標記
<nav>...</nav>請求範例
將菜單鏈接分組到「轉換器 (Converter)」、「數學 (Math)」和「編程 (Programming)」下。
頁面區域
main
main
<main>...</main>意思
頁面的主要內容區域。 頁面通常應該有一個主要元素。
如何指定
使用 main 來區分頁面內容與標題、頁腳或選單。
標記
<main>...</main>請求範例
保持浮動菜單在主要內容上方，不要將其推到下方。
頁面區域
區段。
section
<section>...</section>意思
一個相關內容的主題性分組，通常帶有標題。
如何指定
當目標是大型頁面區塊時，例如主要內容、工具或參考內容，請使用 section。
標記
<section>...</section>請求範例
減少行動裝置上工具區域的垂直邊距。
頁面區域
article
article
<article>...</article>意思
一個獨立的內容項目，例如卡片、帖子、引用條目或結果。
如何指定
對於每個重複的卡片都具有自己的標題和內容時，請使用 article。
標記
<article>...</article>請求範例
使每個術語文章在桌面上的顯示更加緊湊。
頁面區域
aside
aside
<aside>...</aside>意思
一個區域，用於支持與主要內容相關的內容，通常是側邊欄或註釋。
如何指定
當要求過濾面板、側邊導航或支援說明時，請使用 aside。
標記
<aside>...</aside>請求範例
在行動裝置上，將側邊欄移動到主要內容下方。
頁面區域
頁尾
footer
<footer>...</footer>意思
一個底部區域，用於放置法律鏈接、次要導航、聯繫信息或關閉內容。
如何指定
使用 `footer` 元素，當目標是頁面底部時，而不是某個區塊的底部。
標記
<footer>...</footer>請求範例
在頁腳中添加一個小的法律鏈接組。
內容
標題
Heading
<h1>Page title</h1>意思
一個從 h1 到 h6 的標題元素，用於為頁面內容提供結構。
如何指定
當要求更改層級結構時，使用標題級別，而不僅僅是視覺大小。
注意
不要僅僅使用 h1 或 h2 來調整大小；使用 CSS 進行視覺大小調整，並使用標題來定義文件結構。
標記
<h1>Page title</h1>請求範例
將頁面標題設定為 h1，並將卡片標題設定為 h2 或 h3。
內容
段落
p
<p>Description text.</p>意思
一段文字。
如何指定
當更改描述性正文文字或其間距時，請使用段落。
標記
<p>Description text.</p>請求範例
縮短標題下方的段落。
內容
錨點連結
a
<a href="/ko/tools/math-prompt">Start</a>意思
一個鏈接元素，用於導航到另一個頁面、路徑、文件或位置。
如何指定
當元素移動到某個位置而不是執行原地操作時，請使用 anchor 或 link。
標記
<a href="/ko/tools/math-prompt">Start</a>請求範例
更改「瀏覽」工具鏈接，使其滾動到工具部分。
內容
清單
List
<ul><li>Item</li></ul>意思
一組相關項目，可以是無序列表（ul）或有序列表（ol）。
如何指定
當需要新增、刪除、重新排序或分組重複的文字項目時，請使用列表。
標記
<ul><li>Item</li></ul>請求範例
將菜單項目分組到類別列表中。
內容
表格
table
<table><tr><td>Cell</td></tr></table>意思
一個結構化的行和單元格網格，用於表格數據。
如何指定
當內容是真實的行和列資料，而不是僅僅是卡片的視覺網格時，請使用表格。
標記
<table><tr><td>Cell</td></tr></table>請求範例
對於真值表資料，請使用表格，而不是純 div 區塊。
內容
程式碼區塊
code / pre
<pre><code>npm run build</code></pre>意思
code marks code text. pre 保留多行代碼的換行符和空格。
如何指定
當命令或範例必須保持確切的間距時，請使用 code block。
標記
<pre><code>npm run build</code></pre>請求範例
以 `<pre>` 或 `<code>` 區塊顯示終端命令。
內容
強調
strong / em
<strong>Important</strong>意思
語義強調元素。 `strong` 表示重要性；`em` 表示強調。
如何指定
使用這些功能進行有意義的強調，而不是僅用於裝飾性的粗體或斜體樣式。
標記
<strong>Important</strong>請求範例
對於註釋中的警告語句，請使用 strong。
圖片與媒體
圖像
img
<img src="/hero.png" alt="Tool preview">意思
一個用於顯示圖像文件的元素。
如何指定
當要求替換、調整大小、裁剪或添加替代文字到視覺媒體時，使用 `image` 元素。
標記
<img src="/hero.png" alt="Tool preview">請求範例
為主要圖像添加清晰的 `alt` 屬性。
圖片與媒體
替代文本
alt
<img alt="Menu panel open">意思
用於螢幕閱讀器以及當圖像無法載入時的圖像描述文本。
如何指定
當要求改進可訪問性或影像含義時，請使用 alt 屬性。
注意
裝飾性圖片可以使用空的`alt`文字，但有意義的圖片需要一個有用的描述。
標記
<img alt="Menu panel open">請求範例
添加解釋截圖內容的 `alt` 文本。
圖片與媒體
SVG
svg
<svg>...</svg>意思
一個常用的矢量圖形元素，用於圖標、圖表和可縮放的形狀。
如何指定
當視覺元素是簡單的形狀或圖標，並且應該保持清晰時，請使用 SVG。
標記
<svg>...</svg>請求範例
如果沒有可用的圖標庫，請為選單按鈕使用 SVG 圖標。
表單與控制項
按鈕
button
<button type="button">Menu</button>意思
一個控制元件，在點擊或點擊時執行某個動作。
如何指定
當控制項更改 UI 狀態、開啟選單、提交表單或執行動作時，請使用 button。
注意
對於導航，鏈接通常比按鈕更好。
標記
<button type="button">Menu</button>請求範例
使選單按鈕在開啟選單之前關閉語言下拉式選單。
表單與控制項
表單
form
<form>...</form>意思
一組用於收集和提交用戶輸入的控件。
如何指定
使用 `form` 元素，當輸入元素屬於一個提交或一個輸入流程時。
標記
<form>...</form>請求範例
將搜索輸入和類別控件放在一個類似表單的控件區域中。
表單與控制項
標籤
label
<label for="search">Search</label>意思
用於命名表單控制項的文本。
如何指定
當輸入需要可見或適合螢幕閱讀器的命名時，請使用標籤。
標記
<label for="search">Search</label>請求範例
為搜索輸入添加一個標籤，而不會使 UI 變得雜亂。
表單與控制項
輸入
input
<input type="search" placeholder="Search">意思
一個用戶可以輸入或選擇值的字段。
如何指定
使用 `input` 元素，當目標是搜尋欄位、文本欄位、數字、複選框或其他簡單控件時。
標記
<input type="search" placeholder="Search">請求範例
在行動裝置上，使搜尋輸入框的寬度為滿寬。
表單與控制項
選擇
select
<select><option>English</option></select>意思
一個用於從列表中選擇一個選項的本地下拉控件。
如何指定
當控制項是原生表單下拉式選單，而不是自訂選單面板時，請使用 select。
標記
<select><option>English</option></select>請求範例
樣式化語言選擇器，以便在深色模式下，選中的選項可讀。
表單與控制項
文本區域
textarea
<textarea>Long text</textarea>意思
一個多行文本輸入。
如何指定
當使用者需要貼上或編輯較長的文字時，請使用 textarea。
標記
<textarea>Long text</textarea>請求範例
增加文本區域的高度，以便輸入較長的提示。
屬性
類別
class
<button class="icon-button">...</button>意思
一個用於將元素分組以進行樣式設定或行為的屬性。
如何指定
類別通常是針對重複的 UI 模式的最實用方法。
標記
<button class="icon-button">...</button>請求範例
將相同的類別應用於所有選單類別切換按鈕。
屬性
ID
id
<section id="tools">...</section>意思
一個頁面上的一個元素的唯一標識符。
如何指定
當鏈接需要滾動到特定的部分時，或者標籤需要連接到一個輸入元素時，使用 `id` 屬性。
注意
同一個 ID 不應在同一頁面上重複用於多個元素。
標記
<section id="tools">...</section>請求範例
為工具部分添加一個 ID，以便可以滾動到「瀏覽工具」鏈接的位置。
屬性
href
href
<a href="/ko/reference/html-structure-terms">HTML</a>意思
链接的目标 URL 或片段。
如何指定
當鏈接指向錯誤的頁面或部分時，使用 `href` 屬性。
標記
<a href="/ko/reference/html-structure-terms">HTML</a>請求範例
將「程式設計」選單的超連結 (href) 變更為新的 HTML 結構說明頁面。
屬性
src
src
<img src="/images/example.png" alt="Example">意思
圖像、腳本、iframe 和類似媒體的原始檔案路徑。
如何指定
當圖片或腳本遺失、錯誤或需要替換時，請使用 src。
標記
<img src="/images/example.png" alt="Example">請求範例
將圖片來源 (src) 替換為新的預覽圖片路徑。
屬性
資料屬性
data-*
<html data-theme="dark">意思
自訂屬性用於在元素上儲存狀態或元數據。
如何指定
當樣式取決於狀態，例如主題、開啟、關閉或選取時，請使用 data 屬性。
標記
<html data-theme="dark">請求範例
使用 `data-theme` 屬性，將其應用於 HTML 元素，以切換深色模式的顏色。
無障礙
角色。
role
<div role="menu">...</div>意思
一個可訪問性屬性，用於描述元素所代表的 UI 對象類型。
如何指定
當自訂組件需要清晰的語義時，例如選單、對話框、分頁或警告，請使用 role。
注意
原生語義元素通常比向通用 `<div>` 元素添加 `role` 屬性更好。
標記
<div role="menu">...</div>請求範例
給自定義語言列表一個適當的菜單角色。
無障礙
aria-label
aria-label
<button aria-label="Toggle menu">...</button>意思
一個用於輔助技術的文本標籤，當可見文本缺失或不足時使用。
如何指定
對於僅包含圖標的控制項，例如選單、搜尋、關閉或主題按鈕，請使用 aria-label 屬性。
標記
<button aria-label="Toggle menu">...</button>請求範例
為漢堡菜單按鈕添加一個清晰命名的 `aria-label`。
無障礙
aria-expanded
aria-expanded
<button aria-expanded="false">Menu</button>意思
一個可訪問性屬性，用於指示是否打開或關閉控制面板。
如何指定
適用於下拉按鈕、手風琴和菜單切換。
標記
<button aria-expanded="false">Menu</button>請求範例
當選單類別開啟或關閉時，更新 aria-expanded 屬性。
階層與關係
父元素和子元素
Parent and child
<nav><a>Link</a></nav>意思
父元素包含在其內的子元素。
如何指定
當目標取決於其位置時，使用此方法，例如導航中的連結或標題中的按鈕。
標記
<nav><a>Link</a></nav>請求範例
僅樣式導航欄的子元素連結。
階層與關係
兄弟姐妹
Sibling
<button /> <button />意思
共享相同父元素的元素是兄弟元素。
如何指定
當間距或互動取決於相鄰項目時，請使用 sibling。
標記
<button /> <button />請求範例
減少主題按鈕、語言按鈕和菜單按鈕之間的間距。
階層與關係
嵌套
Nesting
<section><article><h2>Title</h2></article></section>意思
當元素放置在其他元素內部時，形成的結構。
如何指定
當需要明確說明哪個內部元素應該更改時，請使用巢狀結構。
標記
<section><article><h2>Title</h2></article></section>請求範例
在每個卡片中，將請求示例移動到屬性芯片下方。
階層與關係
封裝器
Wrapper
<div class="container">...</div>意思
一個主要用於組、約束或定位其他元素的元素。
如何指定
當佈局需要一個周圍的元素，而不是更改每個子元素時，使用wrapper。
標記
<div class="container">...</div>請求範例
在標題控件周圍添加一個包裝器，以便下拉菜單可以對齊到右側。
階層與關係
容器
Container
<div class="container">Page content</div>意思
一個將頁面內容對齊並限制在可讀寬度的包裝器。
如何指定
當更改整體內容寬度或側邊填充時，請使用 container。
標記
<div class="container">Page content</div>請求範例
在桌面版上，使主要內容容器稍微縮小。
階層與關係
片段
Fragment
<>...</>意思
一個在 React 中使用的包裝器，用於將元素分組，而無需添加額外的 DOM 元素。
如何指定
使用 `fragment`，當您需要將元素分組，而又不影響佈局或 CSS 選擇器時。
標記
<>...</>請求範例
使用片段，而不是添加不必要的 wrapper div。
無障礙
語義 HTML
Semantic HTML
<main><section><h1>...</h1></section></main>意思
使用 HTML 時，應使用元素來表達其含義，而不僅僅是其視覺外觀。
如何指定
當改善結構、可訪問性、SEO 或可維護性時，請使用語義 HTML。
標記
<main><section><h1>...</h1></section></main>請求範例
對於參考頁面的部分，請使用語義 HTML，而不是隨處使用通用的 div 元素。
無障礙
標誌性點
Landmark
<header> <nav> <main> <footer>意思
對於輔助技術使用者來說，重要的頁面區域有助於快速導航。
如何指定
標題、導航、主體、側邊欄和頁腳可以用作地標。
標記
<header> <nav> <main> <footer>請求範例
每個頁面都保持一個清晰的主要標記。
無障礙
可訪問的名稱
Accessible name
<button aria-label="Open menu">☰</button>意思
辅助技术用于宣布控件的名称。
如何指定
當控制項在視覺上清晰，但未為螢幕閱讀器命名的情況下，請使用 accessible name。
標記
<button aria-label="Open menu">☰</button>請求範例
給主題切換一個清晰且易於訪問的名稱，適用於所有地區設置。
無障礙
tabindex
tabindex
<button tabindex="0">Action</button>意思
一個可以影響鍵盤焦點順序的屬性。
如何指定
當自訂控件無法通過鍵盤訪問時，請小心使用它。
注意
正數的 tabindex 值可能會導致鍵盤順序混淆。 原生的焦點順序通常更好。
標記
<button tabindex="0">Action</button>請求範例
避免使用正數 tabindex 值，並保持鍵盤的自然順序。