Typography

Headings

H1 A title is a name for the work

H2 A title is a name for the work

H3 A title is a name for the work

H4 A title is a name for the work

H5 A title is a name for the work
H6 A title is a name for the work

Paragraph

The paragraph element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation. Paragraphs are block-level elements.

Blockquote

blockquote>p+cite

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

The block quotation element by Mozilla MDN

Address

address

Written by the editorial and news team:
Contact author at info@example.com
Mail us at PO Box 123, Citysville
Tel +1 212 3131

Lists

Description list

dl>(dt+dd+dd+dd)

De·scrip·tion Term A
[dih-skrip-shuh n] (noun) Description detail
[dih-skrip-shuh n] (noun) Description detail
[dih-skrip-shuh n] (noun) Description detail

dl>(dt+dt+dt+dd)

De·scrip·tion Term A
De·scrip·tion Term B
De·scrip·tion Term C
[dih-skrip-shuh n] (noun) Description detail

Ordered list

ol>li

  1. List item
    1. Subitem
    2. Subitem
  2. List item
  3. List item

Unordered list

ul>li

Horizontal rule

Table

Caption specifies the caption or title of a table
Header Header Header Header Header
Footer Footer Footer Footer Footer
Data Data Data Data Data
Data Data Data Data Data Data Data Data Data Data
Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data
Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data Data

Code

Inline code

code Inline snippet: a, b, c...

kbd Keyboard input: $ npm install --save-dev library

samp Sample output: > library has been successfully installed

kbd>kbd Keystrokes: Cmd+Shift+Alt

Preformatted text

pre

.ninja {
  color: black;
  visibility: hidden;
}

pre>code

.lego {
  display: block;
  color: red;
}

Interactive

Details

details > (summary + p)

Click here to disclose details

The HTML Details Element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary element.

Inline elements

a Anchor defines a hyperlink to a location

strong Strong is used to indicate importance

b Bold is stylistically different from normal text (not to be confused with strong)

em Emphasis marks text that has stress emphasis

i Italic is offset from the normal text (not to be confused with em)

u Underline is text with an unarticulated, though explicitly rendered, non-textual annotation

del Deleted represents a range of text that has been deleted from a document

ins Inserted represents a range of text that has been added to a document

s Strikethrough renders text with a strikethrough

sup Superscript (sup) defines a span of text that should be displayed higher and often smaller

sub Subscript (sub) defines a span of text that should be displayed lower and often smaller

small Small makes the text font size one size smaller

abbr[title] Abbr. represents an abbreviation and optionally provides a full description for it

q[cite] Quote represents a short inline quotation

cite Citation represents a reference to a creative work

dfn Definition represents the defining instance of a term

mark Mark represents highlighted text

var Var represents a variable in a mathematical expression or a programming context

time[datetime] Time represents time on 24-hour clock (), or date () in Gregorian calendar