The only post you'll ever need to test a template

The aim of this post is to write a page that contains all the elements of html that I'll ever use. For the purpose of theme development to ensure all elements are properly styled.

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.

The headers h1 through to h6 just in case

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Then a couple of paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sample external link In eu mauris vel magna mattis mollis. Sample internal link Donec rhoncus odio non purus convallis sit amet aliquet eros pretium. Donec consectetur dictum risus, ut cursus ipsum lobortis sed. Quisque dui augue, dignissim id viverra eget, rhoncus eu ligula. Donec luctus ante ac neque porta laoreet. Etiam ut ante libero, vel venenatis ligula. Pellentesque nibh quam, feugiat nec tincidunt vitae, feugiat quis nulla. Sed interdum aliquam egestas. Donec id est sit amet nisl vulputate gravida et quis mi. Etiam congue aliquam lectus quis laoreet. Donec pellentesque velit molestie purus posuere quis sollicitudin orci pharetra.

Integer fringilla pharetra tellus mattis rhoncus. Proin leo lectus, vehicula vel tempus et, semper et dolor. Nulla gravida porttitor volutpat. Donec convallis, nisl eu viverra porttitor, elit mauris viverra dui, eget pharetra felis odio a metus. Proin lacinia lorem non erat consequat dignissim. Nam consectetur condimentum egestas. Nullam ante purus, posuere in faucibus vel, fringilla at ante. Nullam a velit tortor. Praesent sodales suscipit diam, ac pulvinar diam commodo vitae. Nam nec ligula id ligula mollis elementum. Aliquam rutrum, augue in tincidunt porta, eros ante posuere tellus, quis adipiscing nulla sem in magna. Nam accumsan feugiat libero vitae fringilla. Donec iaculis, magna sed suscipit vestibulum, lorem magna suscipit ipsum, id cursus odio nibh sit amet tellus.

Lists

  • List item 1
  • List item 2
    • Sub list item 1
    • Sub list item 2
    • Sub list item 3
  • List item 2
  1. List item 1
  2. List item 2
    1. Sub list item 1
    2. Sub list item 2
    3. Sub list item 3
  3. List item 2
Definition List term 1
Definition List term 1 definition 1
Definition List term 1 definition 2
Definition List term 2
Definition List term 2 definition 1
Definition List term 2 definition 2

Quotes and Blockquotes pre and code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu mauris vel magna mattis mollis. Donec rhoncus odio non purus convallis sit amet aliquet eros pretium. Donec consectetur dictum risus, ut cursus ipsum lobortis sed. Quisque dui augue, dignissim id viverra eget, rhoncus eu ligula. Donec luctus ante ac neque porta laoreet. Etiam ut ante libero, vel venenatis ligula. Pellentesque nibh quam, feugiat nec tincidunt vitae, feugiat quis nulla. Sed interdum aliquam egestas. Donec id est sit amet nisl vulputate gravida et quis mi. Etiam congue aliquam lectus quis laoreet. Donec pellentesque velit molestie purus posuere quis sollicitudin orci pharetra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Within this is a quotation In eu mauris vel magna mattis mollis. Donec rhoncus odio non purus convallis sit amet aliquet eros pretium. Donec consectetur dictum risus, ut cursus ipsum lobortis sed. Quisque dui augue, dignissim id viverra eget, rhoncus eu ligula. Donec luctus ante ac neque porta laoreet. Etiam ut ante libero, vel venenatis ligula. Pellentesque nibh quam, feugiat nec tincidunt vitae, feugiat quis nulla. Sed interdum aliquam egestas. Donec id est sit amet nisl vulputate gravida et quis mi. Etiam congue aliquam lectus quis laoreet. Donec pellentesque velit molestie purus posuere quis sollicitudin orci pharetra.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Emphasized text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Strong text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Definition term Lorem ipsum dolor sit amet, consectetur adipiscing elit. Computer code text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sample computer code text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Keyboard text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Variable Lorem ipsum dolor sit amet, consectetur adipiscing elit. Citation Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
 
<a href="mailto:sales@yourcompany.com">
  E-mail our sales department
</a>

ABBR and Acronym

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ROT13 In eu mauris vel magna mattis mollis. Can I get this ASAP? Donec rhoncus odio non purus convallis sit amet aliquet eros pretium. Donec consectetur dictum risus, ut cursus ipsum lobortis sed. Quisque dui augue, dignissim id viverra eget, rhoncus eu ligula. Donec luctus ante ac neque porta laoreet. Etiam ut ante libero, vel venenatis ligula. Pellentesque nibh quam, feugiat nec tincidunt vitae, feugiat quis nulla. Sed interdum aliquam egestas. Donec id est sit amet nisl vulputate gravida et quis mi. Etiam congue aliquam lectus quis laoreet. Donec pellentesque velit molestie purus posuere quis sollicitudin orci pharetra.

Forms

Legend

 

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.

Form Element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.


Radio 1
Radio 2
Radio 3

Radio 1
Radio 2
Radio 3

 

Tables

Table caption
Table Header 1 Table Header 2 Table Header 3
Footer 1 Footer 2 Footer 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Comments

Medium

  • Images with a data-picture-mapping attribute will be responsive, with a file size appropriate for the browser width.