Skip to content
<article>-
Represents a self-contained composition in a page, which could be viewed
on its own. In other words, an article
<aside>-
should be used for things like callout boxes containing interesting
facts not part of the main content
<button>-
for anything users are meant to click without triggering navigation, even if it doesn't necessarily
look like a button
datalist-
An element wrapping a set of options, can be attached to an input to
specify the allowable options for that input/provide suggestions.
details-
A dropdown which wraps a summary element (displayed when the dropdown is
closed) and its content.
dialog- Kinda like a modal, should be used as the base for custom modals.
<dl>-
should be used for lists of terms and their definitions. It contains
<dt> <dd> pairs for the terms and
descriptions respectively
<figure> & <figcaption>- Represents self-contained content like an image and its optional caption with
<figcaption>
<footer>- Used to represent a footer for the nearest sectioning context
<header>- Represents introductory content for the page or a section context
<input> and <label>- should always be associated with each other
-
Either set the
for="" attribute of the label to the id of
the input, or
- nest the input inside the label
-
Also make sure you set the correct
type="" attribute on
inputs
<main>- The dominant content of the body element
<math>- Lets you use MathML to faithfully recreate mathematical formulae
mark-
Like a
span which highlights text, some browsers haev
default styles.
meter-
Provides a little bar thingy with attributes determining how much of it
is filled/what color the fill should be.
<nav>- Provides links, either within the page or to other pages
<optgroup>- Groups the options provided to a select input, takes a label attribute to title the group.
progress-
A progress bar! Value element can be set to control how much is filled
or left indeterminate. Color will follow the system's accent color by
default, or can be set with
accent-color css property.
<sub>-
Used inline to wrap subscript like x2.
<sup>-
Used inline to wrap superscript like x2.
<table>-
for anything that would be presented in a table, no stacking divs like I
did on the old event sheet
<ul> and <ol>- should be used for their respective list types
<section>-
Represents a generic section that doesn't have a more specific semantic
element to represent it. Should always have a heading.