Type styles DELETE when live

USING H5 for Intro style Far far away, behind the word mountains, far from the countries Vokaliaand Consonantia, there live the blind texts. Lorem ipsum scelerisque malesuada nisi, et rhoncus diam semper vitae. Phasellus eget massa nisl. Fusce urna sem, lobortis sit amet faucibus ac, ultrices et turpis. intro style Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

quote_left Separated they live in Bookmarks grove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country.

One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

<span class="quote_left">quote_left Separated they live in Bookmarks grove right at the coast of the Semantics, a large language ocean.</span>

quote_right Separated they live in Bookmarks grove right at the coast of the Semantics, a large language ocean.A small river named Duden flows by their place and supplies it with the necessary regelialia.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

<span class="quote_right">quote_right Separated they live in Bookmarks grove right at the coast of the Semantics, a large language ocean.</span>

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,  there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the  Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. Far far away, behind the word mountains

<span class="highlightBlock">Far far away, behind the word mountains</span>

Standard styles

The following tags are commonly used to give a page structure and indicate the meaning of the content. You should apply the tags to denote the structure of the page not to style the text – if you want some random text on the page to appear larger or coloured this should be done using classes not these tags.

Heading 1

The level 1 heading should be used for the most important heading on the page – this is usually the page title. Search engines (like Google) regard the text contents of this tag as extremely important.

This tag should only be used once per page. Lorem ipsum scelerisque malesuada nisi, et rhoncus diam semper vitae. Phasellus eget massa nisl. Fusce urna sem, lobortis sit amet faucibus ac, ultrices et turpis. Lorem ipsum scelerisque malesuada nisi, et rhoncus diam semper vitae. Phasellus eget massa nisl. Fusce urna sem, lobortis sit amet faucibus ac, ultrices et turpis.

Lorem ipsum scelerisque malesuada nisi, et rhoncus diam semper vitae. Phasellus eget massa nisl. Fusce urna sem, lobortis sit amet faucibus ac, ultrices et turpis.

<h1>Heading 1</h1>

Heading 2

Second level indicates text sub-headings. This tag set may be used several times on a web page, but each <h2> heading should be of equal importance.

<h2>Heading 2</h2>

Heading 3

Indicates a third level sub-heading. Can be used as sub-headings several times on the page. All <h3> heading text should be of equal importance on the page.

<h3>Heading 3</h3>

Heading 4

Indicates a fourth level sub-heading. Can be used as sub-headings several times on the page. All <h4> heading text should be of equal importance on the page.

<h4>Heading 4</h4>

Heading 5

Indicates a fifth level sub-heading. Can be used as sub-headings several times on the page. All <h5> heading text should be of equal importance on the page.

<h5>Heading 5</h5>

Heading 6

Indicates a sixth level sub-heading. Can be used as sub-headings several times on the page. All <h6> heading text should be of equal importance on the page.

<h6>Example text</h6>

General body text

General body text on a website is usually tagged within <p></p> or spaced using <br /> tags. The text will generally be set at a default size and font in the CSS and you shouldn’t need to do anything to alter this.

This text is wrapped in <p> tags to show how this will appear when rendered to the page.

<p>Example text</p>

Horizontal Rule


The <hr> tag is used for the presentational purposes of seperating content – it displays as a horizontal line and can be styled through CSS.


<hr />

Emphasised text

The <em></em> tag should be wrapped around text to indicate emphasis and this can then be translated by user agents such as screen readers to convey that item has emphasis. This may or may not be presented visually in italics depending on the CSS.

emphasised text
<em>Example text</em>

Strong

Much like the <em>, the <strong></strong> tag is used to give the wrapped text ‘stronger’ emphasis. Visually this is often presented as bold text but the <strong> tag indicates this with semantic meaning.

strong text

<strong>Example text</strong>

Other Semantic Tags

subscripted text

Normal text followed by some subscripted text

<sub>Example text</sub>

Superscripted text

Normal text followed by some superscripted text

<sup>Example text</sup>

Acronym

ASAP

<acronym>Example text</acronym>

Abbreviation

Prof.

<abbr>Example text</abbr>

Inserted Text

inserted text

<ins>Example text</ins>

Deleted Text

deleted text

<del>Example text</del>

Small Text

small text

<small>Example text</small>

Big Text

big text

<big>Example text</big>

short quotation

A short quotation

<q>Example text</q>

Blockquote

A blockquote – Ut risus quam, hendrerit vitae, ultricies in, molestie vel, eros. The Author

<blockquote>Example text</blockquote>

Preformatted text

Preformatted text

<pre>Example text</pre>

Code

Nunc eget tellus. Duis ut nunc a velit tempor adipiscing.

Aenean vestibulum. Nam id lectus vel lorem aliquet consequat.

<code>Example text</code>

Tables

Caption
Table Header Table Header Table Header
Table Data
Table Data
Table Data
Table Data
Table Data
Table Data
Table Data
Table Data
Table Data
Table Header Table Header
Table Data Table Data
Table Data Table Data
Table Data Table Data

Lorem ipsum scelerisque malesuada nisi, et rhoncus diam semper vitae. Phasellus eget massa nisl. Fusce urna sem, lobortis sit amet faucibus ac, ultrices et turpis. Nam erat tortor, porta et sodales molestie, condimentum quis sem. Curabitur sit amet scelerisque magna. Vestibulum vel velit sit amet ante volutpat laoreet ac ac sapien. Etiam vel lorem et ipsum venenatis adipiscing non sed tellus. Curabitur interdum, lectus eu lacinia blandit, nunc est rhoncus quam, eget eleifend elit quam eu purus. Vestibulum eget suscipit lacus.

Lists

Definition Lists

Term
Definition description
Term
Definition description
Term
Definition description

Ordered Lists

Orderd lists should only be used when the order of the list items is editorially significant. The numbering may be hidden via CSS.

  1. First item in an ordered list
    1. First nested ordered item in an unordered list
    2. Second nested ordered item in an unordered list
    3. Third nested ordered item in an unordered list
  2. Second item in an ordered list
  3. Third item in an ordered list
  4. Fourth item in an ordered list with a link
  5. Fifth item in an ordered list

<ol><li>Example list item</li></ol>

Unordered Lists

Un-ordered lists should only be used where the order of the list is not editorially significant.

  • First item in an unordered list
  • Second item in an unordered list
  • Third item in an unordered list
    • First nested unordered item in an unordered list
    • Second nested unordered item in an unordered list
    • Third nested unordered item in an unordered list
  • Fourth item in an unordered list with a link
  • Fifth item in an unordered list

<ul><li>Example list item</li></ul>

Nested ordered & unordered Lists

  1. First item in an ordered list
  2. Second item in an ordered list
  3. Third item in an ordered list
    • First nested unordered item in an ordered list
    • Second nested unordered item in an ordered list
    • Third nested unordered item in an ordered list
  4. Fourth item in an ordered list with a link
  5. Fifth item in an ordered list
  • First item in an unordered list
  • Second item in an unordered list
  • Third item in an unordered list
    1. First nested ordered item in an unordered list
    2. Second nested ordered item in an unordered list
    3. Third nested ordered item in an unordered list
  • Fourth item in an unordered list with a link
  • Fifth item in an unordered list