Typography

Back Reference site for html elements (their usage and examples)

H1 through h6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

HEADING 1

HEADING 2

HEADING 3

HEADING 4

HEADING 5
HEADING 6

alphabet abcdefghijklmnopqrstuvwxyz

alphabet abcdefghijklmnopqrstuvwxyz

alphabet abcdefghijklmnopqrstuvwxyz

alphabet abcdefghijklmnopqrstuvwxyz

alphabet abcdefghijklmnopqrstuvwxyz
alphabet abcdefghijklmnopqrstuvwxyz

numbers 0123456789

numbers 0123456789

numbers 0123456789

numbers 0123456789

numbers 0123456789
numbers 0123456789

symbols !@#$%^&*()_+=-[]{}'\,./<>?`~¡™£¢∞§¶•ªº–≠€

symbols !@#$%^&*()_+=-[]{}'\,./<>?`~¡™£¢∞§¶•ªº–≠€

symbols !@#$%^&*()_+=-[]{}'\,./<>?`~¡™£¢∞§¶•ªº–≠€

symbols !@#$%^&*()_+=-[]{}'\,./<>?`~¡™£¢∞§¶•ªº–≠€

symbols !@#$%^&*()_+=-[]{}'\,./<>?`~¡™£¢∞§¶•ªº–≠€
symbols !@#$%^&*()_+=-[]{}'\,./<>?`~¡™£¢∞§¶•ªº–≠€

Header element

The header element represents a container for introductory content or a set of navigational links.

A header element typically contains:

one or more heading elements (h1 - h6)
logo or icon
authorship information
You can have several header elements in one document.

Note: A header tag cannot be placed within a footer, address or another header element.

Some additional information here, mostly a chapeau

Most important heading here

Less important heading here

Some additional information here, mostly a lead

Lorem Ipsum dolor set amet....

Paragraph

Aliquam lobortis. Quisque ut nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Aliquam lobortis. Quisque ut nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Aliquam lobortis. Quisque ut nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Aliquam lobortis. Quisque ut nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Aliquam lobortis. Quisque ut nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Quotes

Aliquam lobortis. Quisque ut nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Aliquam lobortis.
Inline quote mentioned here

Figure

Aliquam lobortis. Quisque ut nisi.

Table caption

Table caption
Table head heading
Table data cell

Text modifier elements

Big Small Strong Emphasis StrikethroughDeleted textInserted textKeyboard text Sampled text Teletype
                Preformatted text
                    Preformatted text
                    Preformatted text
                        Preformatted text
                Preformatted text
A piece of computer code Variable Marked text

sub text in paragraph

sub text in paragraph

Using DFN tag and ABBR tag

reference

HTML dfn with title (first time term coined in document)

HTML dfn with abbr

HTML simple dfn

HTML dfn with id

HTML reference with anchor to dfn

Time element

We open at every morning.

I have an appointment on .

Acronym

acronym ASAP

Data element

The following example displays product names but also associates each name with a product number:

  • Cherry Tomato
  • Beef Tomato
  • Snack Tomato

Datalist

The datalist tag specifies a list of pre-defined options for an input element.

The datalist tag is used to provide an "autocomplete" feature on input elements. Users will see a drop-down list of pre-defined options as they input data.

Use the input element's list attribute to bind it together with a datalist element.

Output (form related)

Perform a calculation and show the result in an output element:

0100 + =100

Legend

Legend of formfield

Dialog element

The dialog tag defines a dialog box or window.
The dialog element makes it easy to create popup dialogs and modals on a web page.

this text wraps the

dialog element

Meter

reference

Use the meter element to measure data within a given range (a gauge):

2 out of 10
60%

Address, should use microdata for this

Schema.org
Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

Details and summary

The details tag specifies additional details that the user can view or hide on demand.
The details tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the details tag.
The content of a details element should not be visible unless the open attribute is set.
The summary tag defines a visible heading for the details element. The heading can be clicked to view/hide the details.

Copyright 1999-2018.

- by Refsnes Data. All Rights Reserved.

All content and graphics on this web site are the property of the company Refsnes Data.