# Text & Typography

Headings, text formatting, and inline elements for content styling.

Headings

Elements h1 through h6 create a document outline hierarchy.

Text Formatting & Inline Elements

abbr: Some vehicles meet the SULEV standard.
br was used to make this sentence start on a new line.

bdi: Some languages read right to left, مرحبا. bdo: The normal direction has been overridden.

em is used for emphasis and usually renders as italics, contrast that with i which is used for alternate voice or to offset from the normal (such as a phrase from a different language or taxonomic designation): E. coli can be bad. strong is used for importance or urgency and usually renders as bold, contrast that with b which is used to draw attention without the semantic meaning of importance.

cite: In the words of Charles Bukowski — An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.

data can be used to specify 5 A.M. that is machine-readable, but time is a better choice for specifying 5 A.M. in a machine-readable format.

del can be varily used to mark deletions. ins marks insertions. s: similar to del, but used to mark content that is no longer relevant. Windows XP version available. u: a holdover with no real meaning that should be removed. mark: the HTML equivalent of the yellow highlighter. span: a generic element with no meaning by itself.

dfn: Foreign phrases add a certain je ne sais quoi to one's prose.

q: The W3C page About W3C says the W3C's mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

kbd and samp: I did this:

c:\>format c: /yes

Is that bad? Press Ctrl+F5 for a hard reload.

var: To log in, type ssh user@example.com, where user is your user ID.

meter and progress: Storage space usage: 6 blocks used (out of 8 total) Progress: 37%

sub is used for subscripts: H₂O. sup is used for superscripts: E = MC². small is used for side comments: I wrote this whole document. [Editor's note: no he did not] wbr: used to specify where a word may break and it is supercalifragilisticexpialidocious.

Block Text Elements

address:

blockquote:

I quickly explained that many big jobs involve few hazards

This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.

pre:

    pre {
    display: block;
    padding: 7px;
    background-color: #F5F5F5;
    border: 1px solid #E1E1E8;
    border-radius: 3px;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: Menlo, Monaco;
    line-height: 160%;
    }

You are in an open field west of a big white house with a boarded
    front door.
    There is a small mailbox here.

    > open mailbox

    Opening the mailbox reveals:
    A leaflet.

    >

# Structure & Layout

Semantic elements that provide document structure and meaning.

Sectioning Elements

Elements article, aside, nav, section, main provide document structure.

nav: Navigation links

article: Standalone content

aside: Sidebar or tangential content

main: The main content area of the page

Lists & Organization

ul and ol:

• Unordered List item one
  • Nested list item
    • Level 3, item one
    • Level 3, item two
    • Level 3, item three
    • Level 3, item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

1. List item one
   1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

dl: Definition lists

Definition List Title

Definition list division.

Kitchen Sink

Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.

aside

Defines content aside from the page content

blockquote

Defines a section that is quoted from another source

# Interactive Content

Forms, buttons, dialogs, and other interactive elements for user engagement.

Interactive Elements

details and summary: Collapsible content

dialog: Modal dialogs and popups

Forms & Input Elements

datalist: Predefined options for input fields.

Modern form validation attributes:

output: Calculation results

# Media & Embeds

Images, video, audio, and other embedded content for rich media experiences.

figure: Images with captions

audio: By Cqdx [CC BY-SA 3.0 ], from Wikimedia Commons.

iframe:

img:

math:

picture:

svg:

video:

canvas: Drawing canvas for graphics.

picture with source: Responsive images.

template: Template content for JavaScript.

# Data & Tables

Structured data presentation using tables and organized information display.

In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.