HTML Tag List

Understand the topic

Use this compact reference to choose common elements by purpose. It is a starting point rather than a replacement for the full HTML specification. Check content rules and accessibility guidance when using an unfamiliar element. Prefer the element that accurately describes the content instead of choosing one only for its default visual appearance.

Worked example

<table><caption>Common HTML elements by purpose</caption><tr><th scope="col">Purpose</th><th scope="col">Elements</th></tr>
<tr><th scope="row">Document</th><td>html, head, body, title, meta, link, script</td></tr>
<tr><th scope="row">Landmarks</th><td>header, nav, main, aside, footer</td></tr>
<tr><th scope="row">Sections</th><td>article, section, h1-h6</td></tr>
<tr><th scope="row">Text</th><td>p, strong, em, small, mark, time, code, pre</td></tr>
<tr><th scope="row">Collections</th><td>ul, ol, li, dl, dt, dd</td></tr>
<tr><th scope="row">Tables</th><td>table, caption, thead, tbody, tfoot, tr, th, td, colgroup, col</td></tr>
<tr><th scope="row">Forms</th><td>form, label, input, select, option, textarea, button, fieldset, legend, output</td></tr>
<tr><th scope="row">Media</th><td>img, picture, source, audio, video, track, iframe, canvas, svg</td></tr>
<tr><th scope="row">Disclosure</th><td>details, summary, dialog</td></tr></table>

Each group connects a purpose to candidate elements. Some elements have specific nesting rules, such as li within a list and source inside supported media containers.

Practice

Choose elements for a glossary, a main navigation region, and an expandable answer.

Glossary: dl, dt, dd.
Navigation: nav containing links.
Expandable answer: details with summary.

Common mistake

Do not use obsolete presentational elements such as font or center for new work. Use semantic HTML and CSS.

HTML documentation