top of page Skip to main content

Elements 2020: HTML Elements

Shows what elements look like within LibGuides and our current CSS. Intended audience: UofL Libraries web content providers.

Heading 1 - do not use (page title only)

Heading 2 - h2 is used for box heading; only use within box if box is "floated"

Heading 3 - this is the header you usually use inside a titled (non-floated) box

Heading 4

Heading 5
Heading 6

Blockquotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

Said no one, ever.

Inline Elements

This is a text link - a.

Strong is used to indicate strong importance.

This text has added emphasis.

Abbreviation: HTML

This text is a short inline quotation - q.

This is a citation.

Inline SVG

Lists

Definition List Title - dt
This is a definition list division - dd.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Ordered List with class="upperalpha"

  1. List Item 1
  2. List Item 2
  3. List Item 3

Ordered List with class="loweralpha"

  1. List Item 1
  2. List Item 2
  3. List Item 3

Ordered List with class="outline"

  1. List Item 1
  2. List Item 2
    1. Level 2 item 1
      1. Level 3 item 1
      2. Level 3 item 2
        1. Level 4 item 1
        2. Level 4 item 2
        3. Level 4 item 3
          1. Level 5 item 1
          2. Level 5 item 2
    2. Level 2 item 2
  3. List Item 3

Horizontal Rules


Iframe

Form Elements

Legend within fieldset

Input fields

Select menus

Checkboxes
Radio buttons
Textareas

Action buttons as Inputs

 

Action buttons as Buttons

Discover. Create. Succeed.