Styleguide

A visual reference of HTML elements

Headings

All heading levels with their respective styling:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Text Elements

Paragraph

This is a standard paragraph element. This text is bold. This text is italicized. This text is underlined. This text is strikethrough. This text is marked/highlighted. This text is smaller. This text contains subscript and superscript elements.

Links

This is a standard link that you might use within a paragraph of text.

Blockquote

This is a blockquote. It's often used to quote someone or highlight a particular piece of text with special emphasis.

Multiple paragraphs can be included in a blockquote.

— Someone Famous

Inline Quote

As Shakespeare wrote, To be or not to be, that is the question.

Address

John Doe
123 Example Street
Example City, EX 12345
john@example.com
(123) 456-7890

Line Break and Horizontal Rule

This line will be followed by a line break.
This text appears after the line break.


The horizontal rule appears above this text.

Preformatted Text

This  text    preserves 
  white space and line breaks
as they     are typed.
It uses a monospaced font.

Lists

Unordered List

  • List item one
  • List item two
  • List item three with a longer description
  • List item four with nested items:
    • Nested item one
    • Nested item two

Ordered List

  1. First item
  2. Second item
  3. Third item with a longer description
  4. Fourth item with nested items:
    1. Nested ordered item one
    2. Nested ordered item two

Definition List

Definition Term
This is the definition or description for the term above.
Another Definition Term
Each term can have one or more definitions associated with it.
Here's a second definition for the same term.
HTML
Hypertext Markup Language
The standard markup language for documents designed to be displayed in a web browser.

Code

Inline Code

Use console.log('Hello, World!') to output a message to the browser console.

Tables

Sample Table Caption
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3
Table Footer Information

Form Elements

Basic form elements (non-functional, just for display purposes):


Fieldset with Legend

Progress & Meter

Progress Bar

75%

Meter

25%
50%
80%

Time Element

The concert takes place on .

The store is open from to every day.

The Declaration of Independence was signed on .

Media Elements

Image

Placeholder Image
A placeholder image with caption

Responsive Image

Responsive Placeholder Image

Miscellaneous Elements

Abbreviations

HTML and CSS are core web technologies.

Citations

According to the book HTML5 for Web Designers, semantic markup is important for accessibility.

Details & Summary

Click to expand for more information

This content is hidden until the user clicks on the summary element.

It's useful for FAQ sections, accordion elements, and other expandable content.

Ruby Annotation (East Asian Typography)

Kanji is the Japanese term for Chinese characters.

Bidirectional Text Override

This text includes a phrase in Hebrew: שלום (shalom) which means "peace".