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.

1. Ordered list item
2. Ordered list item
3. 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 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 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

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 the cite 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.

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.

Click Me

Details