Grouping Elements

<header>

Used for heading titles, navigational links, introductory content, a logo or icon, authorship information. You can have multiple headers in one document.

<main>

<footer>

<article>

Similar to sections, but specifically for self-contained content that can stand alone or be reused in a different context. Articles can be nested in a section and vice versa.

<section>

A unit used to divide content into smaller chunks, like by chapters or topics. Sections typically include a heading and other content.

<aside>

Identifies content that is separate from, but tangentially related to, surrounding content. Examples include:

• sidebars
• pull quotes
• background information
• lists of links
• callouts
• et cetera...

<div>

Div element. Indicates a division of content. Div and span have no inherent presentation qualities of their own. They are a blank canvas; id and class attributes are applied to individualize and give them meaning. ids are unique, while classes signify a grouping of like types.

<span>

Span element. Indicates a word or phrase for which no text-level element currently exists. It does not automatically add line breaks like div does.

Example:

Block Elements

Heading Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Text Elements

<p>

Paragraph element. Main page content goes in the body.

<blockquote>

Blockquote Element

This is a long quotation, or a 'block quote' element.

Content within a blockquote element should itself by contained in other element types, such as paragraph, heading, or list.

<pre>

    Preformatted element.
      display exactly as it is typed, including all w   h   i   t   e   space.
      By default, 
          it also displays 
          in a constant-width
          font.
  

List Elements

<ul>

• Unordered list element.
• <li>
• List item element.

<ol>

1. Ordered list element.
2. <li>
3. List item element.

<dl>

<dt>

<dd>

Description List

Terms paired with Descriptions.

Term

Description.

Term, Name, or Label

Only dt and dd elements are allowed within a dl element.

Headings or content-grouping elements like paragraphs cannot be put in dt elements, but can be put in dd elements.

Multiple dd elements can be put under one dt element and vice versa.

Misc. Block Elements

<hr>

Horizontal rule element.

<figure> & <figcaption>

<img>

Inline Elements

<em>

Emphasized text. Used for stressing vocal emphasis on words.

<strong>

Strong text. Used to indicate important, serious, or urgent information.

<s>

Strike-through text. Used to indicate incorrect information.

<small>

Small text. Indicates an addendum or side note to main text.

<q>

Quote text. Used for short quotes.

<abbr>

Abbr text. Used to indicate abbreviations or acronyms.

<cite>

Cite text. Used to identify a reference to another source, such as a book, article, etc.

<dfn>

Defining instance text. Used to highlight the first instance of a word in a document.

<code>

Code text. Used to show code. Also related are var (variable), samp (program sample), kbd (user-entered keyboard strokes), data.

<sub>

_{Subscript text.} [TODO] List the uses of subscript text.

<sup>

^{Superscript text.} [TODO] List the uses of superscript text.

<mark>

Mark text. Used to highlight words.

<time>

Time text. Used to add machine-readable time metadata to text. January 20th, 2020, 3:40 PM, Gaithersburg MD.

<del> <ins>

Inserted or deleted text used to indicate parts of a document that have been modified. For example, Deleted TextInserted Text

<b>

Bold text. Used to bold words.

<i>

Italic text. Used to italicize words.

<u>

Underline text. Used to underline words.

<wbr>

Word break element. Used to create a desireable line break opportunity when there is not enough room to fit a whole word comfortably. For example, let us break the word expeditiously. between exped and itiously.

<br>

Break
element. Used to add a line break within a block element.