Style Guide

This document contains a sample of HTML elements that can exist on the site, to ensure proper styling.

Block Level Elements

Headings

Headings are use to mark sections of content. There are six levels of headings.

First-Level Heading

A first-level heading is used for the main header of a page. Only one should be used.

Second-Level Heading

A second-level heading should come after a first-level heading in the document hierarchy. More than one can be used.

Third-Level Heading

A third-level heading should come after a second-level heading in the document hierarchy. More than one can be used.

Fourth-Level Heading

A fourth-level heading should come after a third-level heading in the document hierarchy. More than one can be used.

Fifth-Level Heading

A fifth-level heading should come after a fourth-level heading in the document hierarchy. More than one can be used.

Sixth-Level Heading

A sixth-level heading should come after a fifth-level heading in the document hierarchy. More than one can be used.

Paragraphs

Paragraphs are wrapped with a <p> tag. They can contain a variety of other inline elements, such as links, emphasized text, strong text, code, deleted text, and inserted text

Blockquotes

Blockquotes are wrapped with a <blockquote> tag, and can contain a variety of other markup, including paragraphs, headings, and lists.

Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Lists

Unordered Lists

Unordered lists are wrapped with <ul> tag, and contain any number of list items wrapped with a <li> tag. Unordered lists can be descendants of individual list items to create nested lists.

Ordered Lists

Similar to unordered lists, ordered lists are wrapped with <ul> tag, and contain any number of list items wrapped with a <li> tag. Ordered lists can be descendants of individual list items to create nested lists.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipisicing elit
  3. Sed do eiusmod tempor incididunt
    1. Ut labore et dolore magna aliqua
    2. Ut enim ad minim veniam, quis nostrud exercitation
      1. Ut labore et dolore magna aliqua
      2. Ut enim ad minim veniam, quis nostrud exercitation
        1. Ut labore et dolore magna aliqua
        2. Ut enim ad minim veniam, quis nostrud exercitation
          1. Ut labore et dolore magna aliqua
          2. Ut enim ad minim veniam, quis nostrud exercitation
          3. Ullamco laboris nisi ut aliquip ex ea commodo consequat
        3. Ullamco laboris nisi ut aliquip ex ea commodo consequat
      3. Ullamco laboris nisi ut aliquip ex ea commodo consequat
    3. Ullamco laboris nisi ut aliquip ex ea commodo consequat
  4. Duis aute irure dolor in reprehenderit
  5. In voluptate velit esse cillum dolore

Definition Lists

Definitions lists, wrapped with the <dl> tag, denotes a list of term/description pairs (using <dt> and <dd>, respectively), which can be useful for marking up lists of vocabulary terms, dialogue, or any other similar scenarios.

Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Nostrud Quis Veniam
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Voluptate Velit
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tables

A table is used to display tabular data. It uses a <table> tag, and requires several descendant tags to denote rows (<tr>) and divisions within rows (<td>). Tables can have a head section using the <thead> tag, and a footer using the <tfoot> tag.

Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco
Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco
Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco
Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco
Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco

Leave a Reply

Your email address will not be published. Required fields are marked *