基础
标签
Tag
<header>...</header>含义
一个用尖括号括起来的标记关键字，它告诉浏览器创建哪种类型的元素。
如何指定
当目标是广泛的元素类型时，例如每个按钮或每个链接，请使用标签名称。
标记
<header>...</header>请求示例
更改位于标题中的所有按钮标签的样式。
编程
页面编辑用的 HTML 结构术语
搜索标签、元素、属性、页面区域、表单控件与无障碍标签。
51 个项目
基础
元素
Element
<button>Menu</button>含义
一段完整的 HTML 代码，通常由开始标签、内容和结束标签组成。
如何指定
当您指的是页面中的一个可见部分时，说 "element"，例如标题、卡片或按钮。
标记
<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>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>请求示例
将导航菜单中的链接按“转换器”、“数学”和“编程”分组。
页面区域
main
main
<main>...</main>含义
页面的主要内容区域。 页面通常应该有一个主要元素。
如何指定
使用 main 来区分页面内容和页眉、页脚或菜单。
标记
<main>...</main>请求示例
保持浮动菜单在主要内容上方，不要将其推到下方。
页面区域
部分。
section
<section>...</section>含义
一组相关的、通常带有标题的内容。
如何指定
当目标是较大的页面块时，例如 hero、工具或参考内容，请使用 section。
标记
<section>...</section>请求示例
减少移动设备上工具区域的垂直内边距。
页面区域
文章
article
<article>...</article>含义
自包含的内容项，例如卡片、帖子、引用条目或结果。
如何指定
当每个重复的卡片都有自己的标题和正文时，请使用 article。
标记
<article>...</article>请求示例
使每个术语文章在桌面上的显示更加紧凑。
页面区域
补充说明
aside
<aside>...</aside>含义
一个用于支持与主要内容相关的内容的区域，通常是侧边栏或注释。
如何指定
当请求过滤器面板、侧边导航或支持性说明时，请使用 aside。
标记
<aside>...</aside>请求示例
将侧边栏移动到移动设备上的主要内容下方。
页面区域
页脚
footer
<footer>...</footer>含义
一个底部区域，用于放置法律链接、辅助导航、联系信息或关闭内容。
如何指定
使用页脚 (footer) 来定位到页面底部，而不是定位到某个区域的底部。
标记
<footer>...</footer>请求示例
在页脚中添加一个小的法律链接组。
内容
标题
Heading
<h1>Page title</h1>含义
一个标题元素，从 h1 到 h6，用于为页面内容提供结构。
如何指定
使用标题级别 (heading level) 来请求更改层级结构，而不仅仅是视觉大小。
注意
不要仅使用 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 保留多行代码的换行符和空格。
如何指定
当命令或示例必须保持精确的空格时，请使用代码块。
标记
<pre><code>npm run build</code></pre>请求示例
以预格式化/代码块显示终端命令。
内容
强调和重点
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>请求示例
将“编程”菜单的链接更改为新的 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 值，并保持键盘顺序的自然性。