Headings
Level 1 heading
Level 2 heading
Level 3 heading
Level 4 heading
Level 5 heading
Level 6 heading
Paragraphs
The p
element represents a paragraph of text. Paragraphs are usually represented as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
() {} [] / \ ! ¡ @ € £ $ = + ÷ ≤ ≥ % ^ * – _ – ~ # ” ‘ : ; , .
“” ❝❞ ‘’ ′ ″ – — ✓ ✗ ↑ → ↓ ← ⬆ ⬇ ▲ ► ▼ ◀ ★ ☆ ♭ ♮ ♯ ½ ⅓ ⅔ ¼ ¾ ● ⦁ ◎ ◉ ⦿ ℃ ⌘ … ♀ ♂ ☰ ☀ ∞ ▾ ☎ ☕ 🍕
Phrase Elements
Some examples of elements used to style text…
This text is enclosed in the b
tag.
This text is enclosed in the strong
tag.
This text is enclosed in the i
tag.
This text is enclosed in the em
tag.
This text is enclosed in the u
tag.
This text is enclosed in the mark
tag.
This text is enclosed in the del
tag.
This text is enclosed in the s
tag.
This text is enclosed in the small
tag.
Here is an abbreviation using the abbr
tag… HTML.
We can also have superscript using the sup
tag or subscript using the sub
tag.
Dashicons Test
https://developer.wordpress.org/resource/dashicons/
Lists
Unordered List
The ul
element represents an unordered list of items, typically rendered as a bulleted list. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type
property
- Unordered list item
- Unordered list item
- Unordered list item
Ordered List
The ol
element represents an ordered list of items, typically rendered as a numbered list. Typically, ordered-list items are displayed with a preceding number.
- Ordered list item
- Ordered list item
- Ordered list item
Description List
The dl
element represents a description list. The element encloses a list of groups of terms and descriptions.
- Description list term
- Description list description
- Description list term
- Description list description
- Description list term
- Description list description
Lists Within Lists
Lists can be nested. Here’s an example with 3 levels of nesting.
- Item 1
- Item 1.1
- Item 1.1.1
- Item 1.1.2
- Item 1.1.3
- Item 1.2
- Item 1.2.1
- Item 1.2.2
- Item 1.2.3
- Item 1.3
- Item 1.3.1
- Item 1.3.2
- Item 1.3.3
- Item 1.1
- Item 2
- Item 2.1
- Item 2.1.1
- Item 2.1.2
- Item 2.1.3
- Item 2.2
- Item 2.2.1
- Item 2.2.2
- Item 2.2.3
- Item 2.3
- Item 2.3.1
- Item 2.3.2
- Item 2.3.3
- Item 2.1
- Item 3
- Item 3.1
- Item 3.1.1
- Item 3.1.2
- Item 3.1.3
- Item 3.2
- Item 3.2.1
- Item 3.2.2
- Item 3.2.3
- Item 3.3
- Item 3.3.1
- Item 3.3.2
- Item 3.3.3
- Item 3.1
Navigation List
The nav
element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Generally navigation menu items are marked up as an unordered list within the nav
element.
Quotes
The
blockquote
element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using thecite
element.
The q
element indicates that the enclosed text is a short inline quotation. This element is intended for short quotations that don’t require paragraph breaks. For example… according to Mozilla’s website, Firefox 1.0 was released in 2004 and became a big success.
Address
The address
element supplies contact information relevant to the page or site content.
Columbusplein 56-1
1057 VC Amsterdam
colin301@gmail.com
Buttons
button
elements are much easier to style than input
elements. You can add inner HTML content and make use of :after and :before pseudo-elements to achieve complex rendering while input
only accepts a text value attribute.
Details
Some details
More info about the details.