本文全面系统地整理了日常开发中高频使用的HTML标签，涵盖结构、表单、多媒体等多个类别，是我编程实践中不可或缺的实用参考工具。其条理清晰、分类明确，不仅便于随时查阅和快速定位所需标签，还能帮助规范代码书写，减少重复查找文档的时间，显著提升开发效率与编码流畅度。下面就一一分类列出：
基础结构标签
HTML标签 | 英文全称 | 默认ARIA Role |
|---|---|---|
<html> | HyperText Markup Language | document |
<head> | Header | none |
<title> | Title | document-title |
<body> | Body | document-body |
内容分区标签
HTML标签 | 英文全称 | 默认ARIA Role |
|---|---|---|
<header> | Header | banner |
<nav> | Navigation | navigation |
<main> | Main Content | main |
<article> | Article | article |
<section> | Section | region |
<aside> | Aside | complementary |
<footer> | Footer | contentinfo |
文本内容标签
HTML标签 | 英文全称 | 默认ARIA Role |
|---|---|---|
<h1>-<h6> | Heading 1-6 | heading (带有aria-level属性) |
<p> | Paragraph | paragraph |
<div> | Division | generic |
<span> | Span | none |
<ul> | Unordered List | list |
<ol> | Ordered List | list |
<li> | List Item | listitem |
<dl> | Description List | list |
<dt> | Description Term | term |
<dd> | Description Definition | definition |
<blockquote> | Block Quotation | blockquote |
<pre> | Preformatted Text | none |
<code> | Code | none |
链接和交互标签
HTML标签 | 英文全称 | 默认ARIA Role |
|---|---|---|
<a> | Anchor | link (当有href属性时) |
<button> | Button | button |
<input> | Input | 根据type属性变化 (如textbox, checkbox等) |
<textarea> | Text Area | textbox |
<select> | Select | combobox (单选) / listbox (多选) |
<option> | Option | option |
<form> | Form | form |
<label> | Label | label |
多媒体标签
HTML标签 | 英文全称 | 默认ARIA Role |
|---|---|---|
<img> | Image | img (无alt时为presentation) |
<video> | Video | video |
<audio> | Audio | audio |
<canvas> | Canva | img |
表格标签
HTML标签 | 英文全称 | 默认ARIA Role |
|---|---|---|
<table> | Table | table |
<thead> | Table Header | rowgroup |
<tbody> | Table Body | rowgroup |
<tfoot> | Table Footer | rowgroup |
<tr> | Table Row | row |
<th> | Table Header Cell | columnheader / rowheader |
<td> | Table Data Cell | cell |
语义化标签
HTML标签 | 英文全称 | 默认ARIA Role |
|---|---|---|
<figure> | Figure | figure |
<figcaption> | Figure Caption | figcaption |
<time> | Time | none |
<address> | Address | none |
<mark> | Mark | none |
<progress> | Progress | progressbar |
<meter> | Meter | meter |
<details> | Details | group |
<summary> | Summary | button |
表单相关标签
HTML标签 | 英文全称 | 默认ARIA Role |
|---|---|---|
<fieldset> | Field Set | group |
<legend> | Legend | legend |
<output> | Output | status |
<datalist> | Data List | listbox |
注意事项
大多数HTML5语义化标签都有默认的ARIA role，通常无需显式指定。
当使用非语义化标签(如div、span)来构建具有特定功能的组件时，应添加适当的role属性。
最佳实践是优先使用具有正确语义的HTML标签，而不是依赖ARIA roles。
某些标签的role会根据其属性或上下文发生变化(如a
<a>标签只有在有href属性时才是link role)。
上述列表涵盖了常用的HTML标签，是我日常编码工作中不可或缺的参考工具。此次整理旨在方便后续快速查阅，提高工作效率。