This is the header. Theoretically it could also contain all the tags below, but generally this is carefully defined by the template, so it doesn’t need to account for everything. The nav is also part of the header.This is the nav. Theoretically it could also contain all the tags below, but generally this is carefully defined by the template, so it doesn’t need to account for everything.

Section Heading 1 before paragraph Example

The point of this document is to ensure we consider most of the ways our HTML templates might be used on a site. If we haven’t considered these combinations, then we haven’t completed our template. This is an example of a longish paragraph. It should give you a good idea of line spacing. For all elements, look carefully at the space between them, the formatting of the text itself and the line spacing when long text wraps. Also think through what colour links look like when in any of these states: link(normal), active, hover, visited.

Here is an example of space between paragraphs. Link looks like this in a paragraph. This is strong. There are also occasions for emphasis.

In this paragraph, the content includes a vector image in the middle, followed by a normal image . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id. Mauris vitae quam in leo convallis hendrerit. Suspendisse potenti. Nam mauris purus, facilisis at consectetur accumsan, lobortis luctus nibh. Nulla vestibulum, magna lobortis ullamcorper consequat, eros dolor dapibus ipsum, et suscipit dolor mauris nec est.

Whereas this paragraph, was preceded by an image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id. Mauris vitae quam in leo convallis hendrerit. Suspendisse potenti. Nam mauris purus, facilisis at consectetur accumsan, lobortis luctus nibh. Nulla vestibulum, magna lobortis ullamcorper consequat, eros dolor dapibus ipsum, et suscipit dolor mauris nec est.

Above are two tables, followed by this paragraph.

Section Heading 2 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

Section Heading 3 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

Section Heading 4 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

Section Heading 5 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

Section Heading 6 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

1. This is the first item in an ordered list.
2. Another item in an ordered list, but this one has a link.
3. What happens if one item in the list is really long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id.
4. Sometimes the list has another level.
5. Mauris vitae quam in leo convallis hendrerit.
   1. This is another level of list, also with a link.
   2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.
6. And back out to the previous level.

• This is the first item in an unordered list.
• Another item in an ordered list, but this one has a link.
• What happens if one item in the list is really long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id.
• Sometimes the list has another level.
• Mauris vitae quam in leo convallis hendrerit.
  • This is another level of list, also with a link.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.
• And back out to the previous level.

This is a definition list item.

This defines the item above.

Item 2

Definition 2 is longer. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id.

Section Heading 1 before h2 Example

Section Heading 2 before h3 Example

Section Heading 3 before h4 Example

Section Heading 4 before h5 Example

Section Heading 5 before h6 Example

Section Heading 6 before h1 Example

Section Heading 1 before h2 where the heading is long enough to wrap to the next line like this one is currently doing. Example

Section Heading 2 before h3 where the heading is long enough to wrap to the next line like this one is currently doing. Example

Section Heading 3 before h4 where the heading is long enough to wrap to the next line like this one is currently doing. Example

Section Heading 4 before h5 where the heading is long enough to wrap to the next line like this one is currently doing. Example. I need more test to get such a small heading to wrap. It may never happen.

Section Heading 5 before h6 where the heading is long enough to wrap to the next line like this one is currently doing. Example. I need more test to get such a small heading to wrap. It may never happen.

Section Heading 6 before h1 where the heading is long enough to wrap to the next line like this one is currently doing. Example. I need more test to get such a small heading to wrap. It may never happen.

Article Heading 1 before paragraph Example

The point of this document is to ensure we consider most of the ways our HTML templates might be used on a site. If we haven’t considered these combinations, then we haven’t completed our template. This is an example of a longish paragraph. It should give you a good idea of line spacing. For all elements, look carefully at the space between them, the formatting of the text itself and the line spacing when long text wraps. Also think through what colour links look like when in any of these states: link(normal), active, hover, visited.

Here is an example of space between paragraphs. Link looks like this in a paragraph. This is strong. There are also occasions for emphasis.

In this paragraph, the content includes a vector image in the middle, followed by a normal image . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id. Mauris vitae quam in leo convallis hendrerit. Suspendisse potenti. Nam mauris purus, facilisis at consectetur accumsan, lobortis luctus nibh. Nulla vestibulum, magna lobortis ullamcorper consequat, eros dolor dapibus ipsum, et suscipit dolor mauris nec est.

Whereas this paragraph, was preceded by an image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id. Mauris vitae quam in leo convallis hendrerit. Suspendisse potenti. Nam mauris purus, facilisis at consectetur accumsan, lobortis luctus nibh. Nulla vestibulum, magna lobortis ullamcorper consequat, eros dolor dapibus ipsum, et suscipit dolor mauris nec est.

Above are two tables, followed by this paragraph.

Article Heading 2 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

Article Heading 3 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

Article Heading 4 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

Article Heading 5 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

Article Heading 6 before paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

1. This is the first item in an ordered list.
2. Another item in an ordered list, but this one has a link.
3. What happens if one item in the list is really long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id.
4. Sometimes the list has another level.
5. Mauris vitae quam in leo convallis hendrerit.
   1. This is another level of list, also with a link.
   2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.
6. And back out to the previous level.

• This is the first item in an unordered list.
• Another item in an ordered list, but this one has a link.
• What happens if one item in the list is really long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id.
• Sometimes the list has another level.
• Mauris vitae quam in leo convallis hendrerit.
  • This is another level of list, also with a link.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.
• And back out to the previous level.

This is a definition list item.

This defines the item above.

Item 2

Definition 2 is longer. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id.

Article Heading 1 before h2 Example

Article Heading 2 before h3 Example

Article Heading 3 before h4 Example

Article Heading 4 before h5 Example

Article Heading 5 before h6 Example

Article Heading 6 before h1 Example

Article Heading 1 before h2 where the heading is long enough to wrap to the next line like this one is currently doing. Example

Article Heading 2 before h3 where the heading is long enough to wrap to the next line like this one is currently doing. Example

Article Heading 3 before h4 where the heading is long enough to wrap to the next line like this one is currently doing. Example

Article Heading 4 before h5 where the heading is long enough to wrap to the next line like this one is currently doing. Example. I need more test to get such a small heading to wrap. It may never happen.

Article Heading 5 before h6 where the heading is long enough to wrap to the next line like this one is currently doing. Example. I need more test to get such a small heading to wrap. It may never happen.

Article Heading 6 before h1 where the heading is long enough to wrap to the next line like this one is currently doing. Example. I need more test to get such a small heading to wrap. It may never happen.

Citation looks like this.

This is an h1 in an aside.

Theoretically it could also contain all the tags above, but generally this is carefully defined by the template, so it doesn’t need to account for everything. However paragraphs with an h1 and h2 and a list are very common.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.

This is an h2 in an aside.

1. This is the first item in an ordered list.
2. Another item in an ordered list, but this one has a link.
3. What happens if one item in the list is really long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id.
4. Sometimes the list has another level.
5. Mauris vitae quam in leo convallis hendrerit.
   1. This is another level of list, also with a link.
   2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.
6. And back out to the previous level.

• This is the first item in an unordered list.
• Another item in an ordered list, but this one has a link.
• What happens if one item in the list is really long. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id.
• Sometimes the list has another level.
• Mauris vitae quam in leo convallis hendrerit.
  • This is another level of list, also with a link.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo.
• And back out to the previous level.

This is a definition list item.

This defines the item above.

Item 2

Definition 2 is longer. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra felis sit amet felis iaculis a feugiat est egestas. Mauris at eros mi, non semper leo. Nulla placerat iaculis ante, id placerat ligula interdum ac. Aenean lobortis facilisis dolor, non hendrerit est volutpat id.

This is the footer. Theoretically it could also contain all the tags above, but generally this is carefully defined by the template, so it doesn’t need to account for everything.