HTML Style Guide

This HTML contains a wide variety of markup elements: link it to your CSS style sheet to make sure you have set global CSS styles for each element that may be added to your content in the future.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

[top]

Paragraph

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Donec faucibus. 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. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

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. 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. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Test link. Strong text. Emphasized text.

[top]

List Types

Definition List

This is the term to be defined
This is definition of the above term. It is usually styled with a left indent.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. Some list items will
    break to a second line.
  5. Be sure your list items
    are properly indented on the left.
  6. Be sure your list items
    have a little space between them.

Unordered List

Nested List 1: ol ul

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

Nested List 2: ul ol

[top]

Forms

You do not generally need to format form and input tags, unless you are using a CSS reset that removes their browser default styles.

Form Element

Legend


Radio Buttons:




Checkboxes:





[top]

Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

[top]

Misc Stuff – abbr, acronym, pre, code, sub, sup, etc.

You do not generally need to format these tags, unless you are using a CSS reset that removes their browser default styles.

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

<pre> tags are used to display 
preformated text (such as code) in the browser, and will show
all
	indents and
    white spaces     and line breaks,
like this:

<!-- begin validation buttons -->
<p>
 <a href="http://validator.w3.org/check?uri=referer">
  <img src="http://www.w3.org/html/logo/badge/html5-badge-h-solo.png" 
  width="31" height="32" alt="valid HTML5" />
 </a>
 <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">
  <img src="http://jigsaw.w3.org/css-validator/images/vcss" 
   alt="Valid CSS3" height="31" width="88" />
 </a>
</p>
<!-- end validation buttons -->
</body>
</html>

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.
“This style guide is going to help so freaking much.”
-Blockquote
“Please style your blockquote tags.”
-Raven

[top]