68 tags · 4 categories
HTML reference
Every HTML tag with its description, attributes and examples you see right away in a live preview. From document structure to forms, tables and media.
68 entries
Sections and semantics
Elements that split a page into logical parts and describe what they mean.
- <article>Self-contained content that makes sense read or shared on its own.
- <section>A thematic part of a document, usually with its own heading.
- <header>An introduction to a page or section: logo, title, navigation, author info.
- <footer>A page or section’s footer: author, copyright, links, contact info.
- <main>The page’s main, unique content. Only one should be visible per page.
- <nav>A block of primary navigation links: a menu, a table of contents, breadcrumbs.
- <aside>Tangential content loosely related to its surroundings: a callout box, a sidebar, a note.
- <h1>-<h6>Headings at six levels, from the most important h1 to the least important h6. Together they form the page’s outline.
- <hgroup>Groups a heading together with a subtitle, tagline, or kicker.
- <address>Contact information for an article’s author or a site’s owner.
- <search>Marks the part of a page that holds a search box or result filters.
Text and formatting
Paragraphs, links, emphasis, quotes and tags for pieces of code.
- <a>A link to another page, a file, an email address, or a place on the same page.
- <p>A paragraph of text.
- <strong>Text of great importance: a warning, key information.
- <br>A line break at the point it’s inserted, without starting a new paragraph.
- <hr>A thematic break in content, for example a scene change in a story or a shift to a different topic.
- <pre>Preformatted text: it preserves spaces, tabs, and line breaks exactly as they appear in the code.
- <blockquote>A longer quotation from another source, displayed as a separate, indented block.
- <div>A generic block-level container with no meaning, for grouping elements and styling.
- <span>A generic inline container with no meaning, for styling a piece of text.
- <em>Stress in a sentence: a word that, read aloud, is pronounced with emphasis.
- <b>Draws attention to a piece of text without giving it any extra weight, e.g. keywords.
- <i>Text in a different tone or voice: foreign expressions, Latin names, a character’s thoughts, technical terms.
- <u>Text with an annotation that can’t be expressed in words, most often a spelling-error mark.
- <s>Content that’s no longer accurate, such as an old price. The browser strikes it through.
- <small>Fine print: disclaimers, legal notices, copyright, and short side notes.
- <mark>Highlights a piece of text like a highlighter, because it’s relevant in the current context.
- <abbr>An abbreviation or acronym, with an optional expansion in the title attribute.
- <cite>The title of a work: a book, an article, a movie, a song, a game, or a piece of software.
- <code>A piece of computer code: the name of a variable, function, tag, or file, as well as a short listing.
- <kbd>Input entered by the user: keys, keyboard shortcuts, and commands to type.
- <samp>Sample output from a program: a message, a console response, or error text.
- <var>A variable in a math formula or a program, as well as a placeholder symbol in a command.
- <sub>Subscript: text lowered and shrunk, for example in chemical formulas.
- <sup>Superscript: text raised and shrunk, for example exponents and footnote numbers.
- <time>A date, time, or duration written clearly for people and, at the same time, understandably for machines.
- <data>Links human-readable content to a machine value, for example a product name with its code.
- <q>A short quote woven into a sentence. The browser adds the quotation marks itself.
- <dfn>A term being defined at this point in the text, that is, the first, explanatory use of the concept.
- <bdi>Isolates a piece of text whose writing direction is unknown, e.g. a username written in Arabic.
- <bdo>Forces the text’s display direction, bypassing the automatic bidirectional algorithm.
- <wbr>A spot where the browser may break a long word or string of characters when the line runs out of room.
- <ins>Text added to a document, for example in a new version of a terms page or a corrected article.
- <del>Text removed from a document, shown struck through to preserve the history of changes.
- <ruby>Ruby annotations: small text above characters, most often the pronunciation of Chinese or Japanese characters.
- <rt>The annotation text in a ruby element: pronunciation or meaning displayed above the base text.
- <rp>Fallback parentheses around a ruby annotation, visible only where ruby isn’t supported.
Forms
Fields, buttons, select lists and everything users send data with.
- <form>A form that collects data from the user and sends it to a given address.
- <input>A form field: text, email, password, number, date, slider, checkbox, file and many more.
- <label>A form field’s label. Clicking the label moves the cursor to the field.
- <button>A clickable button: submits a form, clears it, or runs an action on the page.
- <select>A dropdown list the user picks one or more options from.
- <option>A single option in a `<select>` list, or a suggestion in a `<datalist>`.
- <optgroup>A named group of options inside a `<select>` list.
- <textarea>A multi-line text field for longer input: messages, reviews, descriptions.
- <fieldset>A group of related form fields with a border and a `<legend>` caption.
- <legend>The caption of a `<fieldset>` group of fields, displayed on its border.
- <datalist>A list of suggestions for an `<input>` field. You can pick a proposal or type your own value.
- <output>The result of a calculation or a user action, for example a total in a calculator.
- <progress>A progress bar for a task: uploading a file, an installation, or course completion.
- <meter>A gauge for a value within a known range: disk space used, a test score, battery level.
Comparisons
How similar tags differ and when to pick each one.
- <div> vs <span><div> is a block-level container with no meaning, and <span> is its inline counterpart. Both exist only for grouping and styling, never to describe content.
- <section> vs <article> vs <div><article> is self-contained content, <section> is a thematic part of something larger, and <div> is a neutral container with no meaning at all.
- <strong> vs <b><strong> marks content that is important, urgent or serious. <b> only draws attention to a piece of text, without adding any weight. Visually, both are bold.
- <em> vs <i><em> is stress that changes the meaning of a sentence when read aloud. <i> marks a different tone: foreign words, names or thoughts, without changing meaning.
- class vs idclass can repeat across many elements and combine several at once. id must be unique across the whole document and is used for anchors, labels and JS.
- <button> vs <a><button> performs an action on the page, e.g. submitting a form. <a> navigates: it changes the address or opens a resource. Both work with the keyboard.
- <header> vs <head><head> is an invisible section holding the page’s metadata, one per document. <header> is a visible introductory element, and a page can have several.