HTML Mastery · Chapter 15
Complete HTML Tag Reference
Every HTML tag organized by category — your ultimate cheat sheet and reference guide.
📄 Document Structure
| Tag | Category | Description | Self-Closing? |
|---|---|---|---|
| <!DOCTYPE html> | Document | Document type declaration. Must be first line. Switches browsers into standards mode. | — |
| <html> | Root | Root element. Contains all other HTML. Use lang attribute. | No |
| <head> | Metadata | Container for document metadata (not displayed). | No |
| <title> | Metadata | Page title — browser tab and SEO title tag. | No |
| <body> | Content | All visible page content. | No |
| <meta> | Metadata | Machine-readable page metadata (charset, viewport, description, OG tags). | Yes |
| <link> | Metadata | Links external resources: CSS, favicon, canonical, preload, manifest. | Yes |
| <style> | Metadata | Inline CSS for the page. | No |
| <base> | Metadata | Base URL for all relative links. Only one per page. | Yes |
| <script> | Scripting | Inline or external JavaScript. Use defer or async for performance. | No |
| <noscript> | Scripting | Fallback content when JavaScript is disabled. | No |
🏗️ Semantic Layout
| Tag | Type | Description | Self-Closing? |
|---|---|---|---|
| <header> | Sectioning | Introductory content for page or section. Can appear multiple times. | No |
| <nav> | Sectioning | Major navigation links section. | No |
| <main> | Sectioning | Primary content of the page. One per page only. | No |
| <article> | Sectioning | Self-contained content that can be independently syndicated. | No |
| <section> | Sectioning | Thematic grouping of content with a heading. | No |
| <aside> | Sectioning | Content tangentially related to main content (sidebar, pull quote). | No |
| <footer> | Sectioning | Footer for page or section — copyright, links, author info. | No |
| <address> | Sectioning | Contact information for nearest article or body ancestor. | No |
| <div> | Generic Block | Generic block container — no semantic meaning. Use when nothing else fits. | No |
| <span> | Generic Inline | Generic inline container — no semantic meaning. | No |
| <search> | Sectioning | New Landmark region for search forms. | No |
📝 Text & Typography
| Tag | Display | Description | Self-Closing? |
|---|---|---|---|
| <h1>–<h6> | Block | Six levels of headings. Use one <h1> per page. Semantic hierarchy for SEO and accessibility. | No |
| <p> | Block | A paragraph of text. Browser adds margin above and below. | No |
| <strong> | Inline | Important text — bold with semantic weight. | No |
| <em> | Inline | Emphasized text — italic with semantic weight (stress emphasis). | No |
| <b> | Inline | Bold text — no semantic meaning (stylistic bold). | No |
| <i> | Inline | Italic text — no semantic weight. For technical terms, foreign words. | No |
| <u> | Inline | Underlined text — for annotations (not links). | No |
| <s> | Inline | Strikethrough — content no longer accurate (not deleted). Used in pricing. | No |
| <del> | Inline | Deleted content with semantic meaning. Has cite and datetime attributes. | No |
| <ins> | Inline | Inserted content with semantic meaning. | No |
| <mark> | Inline | Highlighted/marked text (like a yellow marker). Used for search result highlighting. | No |
| <small> | Inline | Fine print, side comments, copyright notices. | No |
| <sub> | Inline | Subscript (H₂O, chemical formulas). | No |
| <sup> | Inline | Superscript (x², footnotes, ordinals). | No |
| <br> | Inline | Line break. Self-closing. Avoid for spacing — use CSS margin. | Yes |
| <wbr> | Inline | Word break opportunity — hint to break long URLs/words. | Yes |
| <hr> | Block | Thematic break (horizontal rule). Self-closing. | Yes |
| <blockquote> | Block | Block-level quotation from external source. Attribute: cite. | No |
| <q> | Inline | Inline quotation. Browser adds quotation marks. | No |
| <pre> | Block | Preformatted text — preserves whitespace, tabs, line breaks. | No |
| <code> | Inline | Inline code snippet. Monospace font. | No |
| <kbd> | Inline | Keyboard input — keys the user should press. | No |
| <samp> | Inline | Sample output from a computer program. | No |
| <var> | Inline | A variable in math or programming. | No |
| <abbr> | Inline | Abbreviation or acronym. Use title for full form. | No |
| <dfn> | Inline | Defining instance of a term. | No |
| <cite> | Inline | Reference to a cited work. | No |
| <time> | Inline | A date/time. Attribute: datetime for machine-readable format. | No |
| <bdi> | Inline | Bi-directional isolation — for mixed-direction text. | No |
| <bdo> | Inline | Bi-directional override. Attribute: dir="rtl|ltr". | No |
| <ruby> | Inline | Ruby annotation container (East Asian typography annotations). | No |
| <rt> | Inline | Ruby text — the annotation/pronunciation above characters. | No |
| <rp> | Inline | Ruby parenthesis — fallback for browsers that don't support ruby. | No |
📋 Lists
| Tag | Description | Key Attributes |
|---|---|---|
| <ul> | Unordered list (bullet points). | — |
| <ol> | Ordered list (numbered). | type, start, reversed |
| <li> | List item in <ul> or <ol>. | value (in ol only) |
| <dl> | Description list — for term/definition pairs. | — |
| <dt> | Description term. | — |
| <dd> | Description details/definition. | — |
| <menu> | A toolbar or context menu list of commands (mostly for web app UIs). | — |
🔗 Links & Navigation
| Tag | Description | Key Attributes |
|---|---|---|
| <a> | Anchor/hyperlink. The foundation of the web. | href, target, rel, download, hreflang, type |
🗄️ Tables
| Tag | Description | Key Attributes |
|---|---|---|
| <table> | Table container. | — |
| <caption> | Table title/description. | — |
| <thead> | Table header row group. | — |
| <tbody> | Table body row group. | — |
| <tfoot> | Table footer row group. | — |
| <tr> | Table row. | — |
| <th> | Table header cell. Bold and centered by default. | scope, colspan, rowspan, abbr |
| <td> | Table data cell. | colspan, rowspan, headers |
| <colgroup> | Groups columns for styling. | span |
| <col> | A column in a colgroup. Self-closing. | span |
📝 Forms
| Tag | Description | Key Attributes |
|---|---|---|
| <form> | Form container. Groups related inputs. | action, method, enctype, novalidate, autocomplete |
| <input> | Self-closing input field. Behavior determined by type. | type (22 values), name, value, required, disabled, placeholder, pattern, min/max |
| <textarea> | Multi-line text input. | rows, cols, wrap, maxlength, placeholder |
| <select> | Dropdown menu. | multiple, size, name, required |
| <option> | An item in a select or datalist. | value, selected, disabled |
| <optgroup> | Groups options in a select. | label, disabled |
| <button> | Clickable button. Can contain HTML. | type (submit/button/reset), disabled, form, formaction |
| <label> | Label for a form element. Clicking focuses the input. | for (must match input id) |
| <fieldset> | Groups related form controls. | disabled, form, name |
| <legend> | Caption for a fieldset. | — |
| <datalist> | Provides autocomplete suggestions for an input. | id (referenced by input list) |
| <output> | Displays a calculated result. | for, name, form |
| <progress> | Progress bar. | value, max |
| <meter> | Scalar measurement gauge. | value, min, max, low, high, optimum |
🖼️ Media
| Tag | Description | Key Attributes |
|---|---|---|
| <img> | Embeds an image. Self-closing. | src, alt, width/height, loading, srcset, sizes, decoding |
| <picture> | Responsive image container. | Contains <source> + <img> |
| <source> | Alternative media source. Self-closing. | src, srcset, type, media, sizes |
| <audio> | Embeds audio. | src, controls, autoplay, muted, loop, preload |
| <video> | Embeds video. | src, controls, autoplay, muted, loop, poster, playsinline, preload |
| <track> | Text track for audio/video (subtitles/captions). Self-closing. | kind, src, srclang, label, default |
| <figure> | Self-contained content with optional caption. | — |
| <figcaption> | Caption for a figure. | — |
| <iframe> | Embeds external webpage. | src, title, allow, sandbox, loading, allowfullscreen |
| <canvas> | JavaScript drawing surface. | width, height |
| <svg> | Scalable Vector Graphics container. | viewBox, width, height, xmlns |
| <map> | Image map container. | name |
| <area> | Clickable area in image map. Self-closing. | shape, coords, href, alt |
🎛️ Interactive & Scripting
| Tag | Description | Key Attributes |
|---|---|---|
| <details> | Disclosure/accordion widget. No JS needed. | open, name (exclusive group) |
| <summary> | Visible toggle label for <details>. | — |
| <dialog> | Native modal/dialog element. | open, JS: .showModal(), .close() |
| <template> | Client-side HTML template. Not rendered until cloned via JS. | — |
| <slot> | Placeholder in Shadow DOM for Web Components. | name |
| <object> | Embeds external content (PDFs, plugins). Mostly legacy. | data, type, width/height |
| <embed> | Embeds external application/plugin. Self-closing. Mostly legacy. | src, type, width/height |
⚠️ Deprecated Tags (Do Not Use)
| Tag | Was Used For | Modern Replacement |
|---|---|---|
| <font> Deprecated | Set font face, size, color | CSS font-family, font-size, color |
| <center> Deprecated | Center-align content | CSS text-align: center or margin: 0 auto |
| <big> Deprecated | Increase text size | CSS font-size |
| <strike> Deprecated | Strikethrough text | <s> or <del> |
| <tt> Deprecated | Teletype/monospace text | <code> or CSS font-family: monospace |
| <frame>/<frameset> Deprecated | Split browser window into frames | <iframe> |
| <applet> Deprecated | Embed Java applets | JavaScript, WebAssembly |
| <blink> Deprecated | Blinking text | CSS animation |
| <marquee> Deprecated | Scrolling text | CSS animation |
| <basefont> Deprecated | Set default font for document | CSS body { font-family: ... } |
🎉 HTML Mastery Complete!
You've completed the HTML Mastery tutorial series. Here's what you've learned:
- ✅ Ch 1–2: Document structure, meta tags, and text typography
- ✅ Ch 3–5: Links, lists, and tables with all attributes
- ✅ Ch 6–7: Forms with 22 input types and media (img, audio, video)
- ✅ Ch 8–9: Semantic HTML5 layout and all global attributes
- ✅ Ch 10–11: Scripting, embedded content, and full ARIA accessibility
- ✅ Ch 12–13: SEO best practices and interactive HTML5 elements
- ✅ Ch 14–15: All event attributes and complete tag reference