Demo
Resize the screen
to see headings and other elements scale.
Included font-families:
H1 Heading level 1
These elements represent headings for their sections.
Read more on w3.org.
The <h1> element has the highest rank.
H2 Heading level 2
The <h2> element has the second highest rank.
Vestibulum tincidunt rhoncus suscipit. Nulla at magna elit. Ut at elementum ex, a facilisis lorem.
Duis at sodales purus. Duis nec commodo tellus.
H3 Heading level 3
Vestibulum tincidunt rhoncus suscipit. <h3> Nulla at magna elit. Ut at elementum ex, a facilisis lorem.
Duis at sodales purus. Duis nec commodo tellus. Curabitur semper metus nec pretium auctor.
Integer pharetra est felis, vitae consequat nulla placerat et.
H4 Heading level 4
Vestibulum <h4> tincidunt rhoncus suscipit. Nulla at magna elit. Ut at elementum ex, a facilisis lorem.
Duis at sodales purus. Duis nec commodo tellus. Curabitur semper metus nec pretium auctor.
Integer pharetra est felis, vitae consequat nulla placerat et.
H5 Heading level 5
Vestibulum tincidunt rhoncus suscipit. Nulla at magna elit. <h5> Ut at elementum ex, a facilisis lorem.
Duis at sodales purus. Duis nec commodo tellus. Curabitur semper metus nec pretium auctor.
Integer pharetra est felis, vitae consequat nulla placerat et.
H6 Heading level 6
The <h6> element has the highest rank. Nulla at magna elit. Ut at elementum ex, a facilisis lorem.
Duis at sodales purus. Duis nec commodo tellus. Curabitur semper metus nec pretium auctor.
Integer pharetra est felis, vitae consequat nulla placerat et.
Heading
Heading
Heading
Heading
Heading
Heading
Paragraphs
The <p> element represents a paragraph.
This element should not be used when a more specific element is more appropriate.
Read more about paragraphs on w3.org.
Anchors
The <a> element represents a hyperlink.
Example: This is a link
Buttons
Horizontal break
The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story,
or a transition to another topic within a section of a reference book.
Inline elements
Common
The <strong> element
represents strong importance for its contents.
The HTML element emphasis <em> marks text that has stress emphasis.
The em element can be nested,
with each level of nesting indicating
a greater degree of emphasis.
The <b> element
represents a span of text to be stylistically offset from the normal prose without conveying any extra importance.
according to w3.org.
The <i> element
represents a span of text in an alternate voice or mood,
or otherwise offset from the normal prose in a manner indicating a different quality of text
according to w3.org.
Inline quotes / citations
According to w3.org,
the
<q> element represents some phrasing content quoted from another source.
The cite element <cite> represents the cited title of a work; for example, the title of a book mentioned within the main text flow of a document.
Code
w3.org:
The HTML Code Element
<code> represents a fragment of computer code.
Document edits
By using the , text can be marked as deleted.
<del> element
The <ins> element marks the text as inserted.
Use the <mark> element for text highlighting.
Abbreviation
The <abbr> element represents an abbreviation or acronym.
Blockquote
The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
Preformatting
The <pre> element
represents a block of preformatted text.
Figures
<figure> with a <figcaption>.
Read more about those elements on developer.mozilla.org .
Images
<img> tags
Navigations
The HTML <nav> element (HTML Navigation Element)
represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Tables
<table>,
<caption>,
<thead>,
<tbody>,
<tfoot>,
<tr>,
<th> and
<td>
| Heading one | Heading two | Heading three | Heading four |
|---|---|---|---|
| Column one | Column two | Column three | Column four |
| Column one | Column two | Column three | Column four |
| Column one | Column two | Column three | Column four |
| Heading one | Heading two | |
|---|---|---|
| Vestibulum tincidunt rhoncus suscipit. Nulla at magna elit. Ut at elementum ex, a facilisis lorem. | Duis at sodales purus. Duis nec commodo tellus. | Duis at sodales purus. Duis nec commodo tellus. Curabitur semper metus nec pretium auctor. |
| Duis at sodales purus. Duis nec commodo tellus. | Vestibulum tincidunt rhoncus suscipit. Nulla at magna elit. Ut at elementum ex, a facilisis lorem. | Duis at sodales purus. Duis nec commodo tellus. |
Lists
<ul>,
<ol> and
<li>
Unordered lists
- List item one
- List item two
-
List item three
- List item three A
- List item three B
- List item three C
-
List item four
Second line
Ordered lists
- List item one
- List item two
-
List item three
- List item three A
- List item three B
- List item three C
-
List item four
Second line
Datalist
<dl>,
<dt> and
<dd>
- Term
- Definition ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Pretium nec scelerisque
- Another term
- Another definition
- Lorem ipsum
- Dolor sit amet
- Pretium scelerisque
- Morbi congue ullamcorper sapien
Address
The <address> element represents the contact information for its nearest article or body element ancestor.
My address
1234 City, Country
Phone: 00011222
E-mail: email@email.org
Details
Not supported by all browsers, see caniuse.com/#feat=details
This is a <summary> element
Details