Intro

Articles and all other content should be entered semantically with no inline customized styling. Proper use of HTML tags is preferred to represent the contents of each as appropriate to convey meaning to both computer and human.

Styles will be applied across all content consistently, providing the user with an intended experience and a computer with the ability to understand the content and make it more useful, searchable and maintainable.

All of the content below is being formatted by the current site stylesheet for presentation across devices. Interfering with this by using non-semantic HTML or inline styling in an attempt to achieve a different look will result in a poor experience overall.

See below for HTML examples and how they are currently styled.

Headings

The HTML code.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

How it currently looks.

Note that H1 is only for page titles and is automatically handled by the template and not for body copy use for SEO reasons.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

List Types

Each type of list should use the correct list format to represent its contents semantically. When in doubt, ask.

Definition List

The HTML code.

<dl>
<dt>Definition Term:</dt>
<dd>Definition of Term.</dd>
<dt>Definition Term:</dt>
<dd>Definition of Term.</dd>
<dt>Definition Term:</dt>
<dd>Definition of Term.</dd>
</dl>

How it currently looks.

Definition Term:
Definition of Term.
Definition Term:
Definition of Term.
Definition Term:
Definition of Term.

Ordered List

The HTML code.

<ol>
<li>1st List Item</li>
<li>2nd List Item
<ol>
<li>1st Sub List Item 1</li>
<li>2nd Sub List Item 2</li>
</ol>
</li>
<li>3rd List Item</li>
</ol>

How it currently looks.

  1. 1st List Item
  2. 2nd List Item
    1. 1st Sub List Item 1
    2. 2nd Sub List Item 2
  3. 3rd List Item

Unordered List

The HTML code.

<ul>
<li>List Item 1</li>
<li>List Item 2
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
</ul>
</li>
<li>List Item 3</li>
</ul>

How it currently looks.

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

Navigation list

You should wrap a ul list with the <nav> tag when it is a set of links used for navigation.

The HTML code.

<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>

How it currently looks.

Table

Table Heading 1Table Heading 2Table Heading 3Table Footer 1Table Footer 2Table Footer 3

Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3
Table Data 1 Table Data 2 Table Data 3

Miscellaneous

sup, sub, cite, acronym, abbr examples

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Block Quote

The HTML code.

<blockquote>“Regular block quote.”<cite>&mdash;Name (can include a title or link)</cite></blockquote>

How it currently looks.

“Regular block quote.”—Name (can include a title or link)

Pull Quote

Alternate pull quote styled block quote (note the addition of class pull-quote).

The HTML code.

<blockquote class="pull-quote">“Pull quote with class pull-quote added to blockquote tag.” <cite>&mdash;Name (can include a title or link)</cite></blockquote>

How it currently looks.

“Pull quote with class pull-quote added to blockquote tag.” —Name (can include a title or link)

pre, code

The pre and code tags define preformatted text. Text in a pre or code element is typically displayed in a fixed-width font, and it preserves both spaces and line breaks.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


get_header();
while ( have_posts() ) {
the_post();
}
get_footer();