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.
Inline Quote
As Shakespeare wrote, To be or not to be, that is the question.
Address
John Doe123 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
- First item
- Second item
- Third item with a longer description
- Fourth item with nested items:
- Nested ordered item one
- 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
| 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):
Progress & Meter
Progress Bar
Meter
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
Responsive 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)
漢 字 is the Japanese term for Chinese characters.
Bidirectional Text Override
This text includes a phrase in Hebrew: שלום (shalom) which means "peace".