On
Newsstands
Now
Current Issue

HTML Samples

The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.

|

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.

Advertisement

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.

Advertisement

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.

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>

Advertisement

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).

Advertisement

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();

Advertisement

Recommended for You

Newsletter Signup

Keep me up to date on the latest trends and happenings around Denver. 5280 has a newsletter for everyone. Sign Up