HTML Element Tag Tests

All other HTML tags listed in the FAQ:

Here is the address for Automattic, using the <address> tag:

355 1st Street Suite 202
San Francisco, CA 94105
United States

This is an example of an <anchor> (otherwise known as a link). This abbr. is an example of an <abbr> tag in the middle of a sentence. Here is a TLA showing off the <acronym> tag. What, you want to see some over-sized text using the <big> tag? Can you cite a reference for that, using the <cite> tag? Have you noticed that all of the tag names are displayed in code-form, using the <code> tag? Similarly, I could emulate keyboard text, using the <kbd> text tag, or emulate teletype text using the <tt> tag.

Oh no! I wrote something incorrectly. I’d better delete it, using the <del> tag. I could alternately strike something out using the <strike> tag, or strike something out using the <s> tag. So many choices, which I emphasize using the <em> tag. Just to clarify, this is some inserted text, that I’ll highlight using the <ins> tag.

Need to display completely unformatted text, such as a large block of code? Use the <pre> tag, which lets you display:

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100{76506f6a92244c8bb556bf797b05322e398a901d4e551e7864bf34649d56a3ec};
}

Want to quote the WordPress tagline Code is Poetry? Use the <q> tag to add quotes around it. This is strong text (otherwise known as bold), using the <strong> tag.

Need to write H2O or E = MC2? You may find great use for subscripting text using the <sub> tag, or for superscripting text using the <sup> tag. Need to call out a variable? Use the <var> tag.

Div and Span Tests

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This is a div with “myclass” class, inside of another div, using the <div> tag.

Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. This is a span inside of a paragraph, using the <span> tag. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl.

Definition List

Definition List Title
This is a definition list division.
Definition
An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.
Gallery
A feature introduced with WordPress 2.5, that is specifically an exposition of images attached to a post. In that same vein, an upload is “attached to a post” when you upload it while editing a post.
Gravatar
A globally recognized avatar (a graphic image or picture that represents a user). A gravatar is associated with an email address, and is maintained by the Gravatar.com service. Using this service, a blog owner can configure their blog so that a user’s gravatar is displayed along with their comments.

[fancy_header subtitle=”How inline styles looks”]Inline Styles[/fancy_header]

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

Markers

It is a long established fact that a reader will be distracted by the [marker color=”red”]readable content of a page[/marker] when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. [marker color=”blue”]Many desktop publishing packages and web[/marker] page editors now use [marker color=”yellow”]Lorem Ipsum as their default[/marker] model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, [marker color=”green”]sometimes by accident[/marker], sometimes on purpose (injected humour and the like).

[divider]

[fancy_header subtitle=”Quotations Styles”]Block Quotes[/fancy_header]

It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures

Simple Quote

It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures

[fancy_header subtitle=”Simple table and table in box style”]Table Styles[/fancy_header]

Table Header 1 Table Header 2 Table Header 3 Table Header 4 Table Header 5
Lorem ipsum Dolor sit Consectetuer Adipiscing elit Diam
Li europan Lingues es Del Sam familie Separat
Consectetuer Adipiscing elit Diam Nonummy nibh Tincidunt
Del Sam familie Separat Existentie es Myth

[fancy_header subtitle=”Different Table”]Table With Box[/fancy_header]

Table Header 1 Table Header 2 Table Header 3 Table Header 4
Lorem ipsum Dolor sit Consectetuer Adipiscing elit
Li europan Lingues es Del Sam familie
Consectetuer Adipiscing elit Diam Nonummy nibh
Del Sam familie Separat Existentie es

[divider]

[fancy_header subtitle=”List styles with different bullets”]List Styles[/fancy_header]

[list]

  • Sample List Item 1
  • Sample List Item 2
  • Sample List Item 3
  • Sample List Item 4
  • Sample List Item 5

[/list]

[list style=”leaf”]

  • Sample List Item 1
  • Sample List Item 2
  • Sample List Item 3
  • Sample List Item 4
  • Sample List Item 5

[/list]

[list style=”check”]

  • Sample List Item 1
  • Sample List Item 2
  • Sample List Item 3
  • Sample List Item 4
  • Sample List Item 5

[/list]

Ordered List

  1. Sample List Item 1
  2. Sample List Item 2
  3. Sample List Item 3
  4. Sample List Item 4
  5. Sample List Item 5
  1. Sample List Item 1
  2. Sample List Item 2
  3. Sample List Item 3
  4. Sample List Item 4
  5. Sample List Item 5
  1. Sample List Item 1
  2. Sample List Item 2
  3. Sample List Item 3
  4. Sample List Item 4
  5. Sample List Item 5

[divider style=”b”]

[fancy_header subtitle=”Sample contents in boxes with style”]Boxes[/fancy_header]

[box]
If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/box]

[box style=”info” title=”Sample Information Box”]
If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/box]

[box style=”stop” title=”Sample Stop Box”]
If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/box]

[divider style=”c”]

[fancy_header subtitle=”Horizontal and Vertical Tabs”]Tabs[/fancy_header]

[tabs]
[tab title=”Tab Item 1″]
1 If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/tab]
[tab title=”Tab Item 2″ active=”true”]
2 If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/tab]
[tab title=”Tab Item 3″]
3 If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/tab]
[/tabs]

[tabs type=”vertical”]
[tab title=”Tab Item 1″]
1 If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/tab]
[tab title=”Tab Item 2″]
2 If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/tab]
[tab title=”Tab Item 3″]
3 If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/tab]
[/tabs]

[fancy_header subtitle=”Divide the contents”]Dividers[/fancy_header]

[divider]
[divider style=”b”]
[divider style=”c”]

[fancy_header subtitle=”Accordion style”]Accordion[/fancy_header]

[accordion]
[section title=”Item Title 1″]
If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/section]
[section title=”Item Title 2″]
If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/section]
[section title=”Item Title 3″]
If you need help getting started, check out our documentation on First Steps with WordPress. If you’d rather dive right in, here are a few things most people do first when they set up a new WordPress site. If you need help, use the Help tabs in the upper right corner to get information on how to use your current screen and where to go for more assistance.
[/section]
[/accordion]

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *