Typography HTML Markup

Typography HTML Markup

Header One

  <h1>Header One</h1>

Header Two

  <h2>Header Two</h2>

Header Three

  <h3>Header Three</h3>

Header Four

  <h4>Header Four</h4>

Header Five

  <h5>Header Five</h5>

Header Six

  <h6>Header Six</h6>

Dropcaps

G orem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum, eros et vulputate luctus, neque nunc gravida nisl, at tincidunt lectus orci quis risus. Maecenas et urna vitae nisi sodales.

S orem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum, eros et vulputate luctus, neque nunc gravida nisl, at tincidunt lectus orci quis risus. Maecenas et urna vitae nisi sodales.

R orem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum, eros et vulputate luctus, neque nunc gravida nisl, at tincidunt lectus orci quis risus. Maecenas et urna vitae nisi sodales.

T orem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum, eros et vulputate luctus, neque nunc gravida nisl, at tincidunt lectus orci quis risus. Maecenas et urna vitae nisi sodales.

Highlight with Colors

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years

HTML Tags

These supported tags come from the WordPress.com code FAQ

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag ( aka. Link )      <a>href=”http://apple.com”</a>
This is an example of a link to apple.com

Abbreviation Tag      <abbr>abbr</abbr>
The abbreviation srsly stands for “seriously”

Cite Tag      <cite>cite</cite>
“Code is poetry.” —Automattic

Code Tag<      <code>code</code>
You will learn later on in these tests that word-wrap: break-word; will be your best friend

Delete Tag      <del>del</del>
This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead)

Emphasize Tag<      <em>em</em>
The emphasize tag should italicize text

Insert Tag      <ins>ins</ins>
This tag should denote inserted text

Keyboard Tag      <kbd>kbd</kbd>
This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag

Preformatted Tag      <pre>pre</pre>
This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag      <quote>quote</quote>
Developers, developers, developers… –Steve Ballmer

Strong Tag      <strong>bold text</strong>
This tag shows bold text

Subscript Tag      <sub>2</sub>
Getting our science styling on with H2O, which should push the “2” down

Superscript Tag      <sup>2</sup>
Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up

Teletype Tag (deprecated in HTML5)      <em>em</em>
This rarely used tag emulates teletype text, which is usually styled like the <code> tag

Variable Tag      <var>variables</var>
This allows you to denote variables