Text Formatting Tags

 Phrases | Style | Headers | Alignment

 Text Phrase Tags
<strong> Makes the text appear in a strong bold way.
<em> Makes the text appear in an emphasized way.
<code> Makes the text appear as computer code.
<samp> Makes the text appear as sample computer code.
<cite> Makes the text appear as a citation.

Examples

<strong>Strong Text</strong>
Strong Text
<em>Emphasized Text</em>
Emphasized Text
<code>Computer Code Text</code>
Computer Code Text
<samp>Sample Computer Code Text</samp>
Sample Computer Code Text
<cite>Citation Text</cite>
Citation Text

You can also combine any of these tags together for a "mixed" result:

<strong><em>Strong Emphasized Text</em></strong>
Strong Emphasized Text

Back to top

 Text Style Tags
<tt> Makes the text appear as mono spaced or teletype
<small> Makes the text appear as small text.
<big> Makes the text appear as big text.
<i> Makes the text appear as italic (Identical to the <em> tag).
<b> Makes the text appear as bold text (Identical to the <strong> tag).

Examples

<tt>Mono Spaced Text</tt>
Mono Spaced Text
<small>Small Text</small>
Small Text
<big>Big Text</big>
Big Text
<i>Italics Text</i>
Italics Text
<b>Bold Text</b>
Bold Text

You can also combine any of these tags together for a "mixed" result:

<b><big>Bold Big Text</big></b>
Bold Big Text

Back to top

 Header Tags
<h1> Makes the text appear as the largest header (see examples).
<h6> Makes the text appear as the smallest header (see examples).

Examples

<h1>Header 1</h1>

Header 1

<h2>Header 2</h2>

Header 2

<h3>Header 3</h3>

Header 3

<h4>Header 4</h4>

Header 4

<h5>Header 5</h5>
Header 5
<h6>Header 6</h6>
Header 6

Back to top

 Text "Alignment" Tags
<pre> Text has been pre-formatted if used.
<blockquote> Used to display long quotations.
<q> Used to display short quotations. Will automatically placequotations around the text.
<p> Used to define a paragraph.
<br /> Used to insert a single line break in the text. (There is no end tag, so <br><br /> is wrong).

Examples

<pre> 
Pre formated text that
      will keep both           spaces and
line breaks.
</pre> 

Pre formated text that
      will keep both           spaces and
line breaks.
And here, we have a LONG quotation:
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</blockquote>

And here, we have a LONG quotation:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<q>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</q>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Here is some regular text then:
<p>
Paragraph Text goes here
</p>

Here is some regular text then:

Paragraph Text goes here.

* There was no use of a line break after the "Here is some.." sentence.

I am on one line and <br /> then I am on another.

I am on one line and
then I am on another.

You can also combine any of these tags together for a "mixed" result:

And here, we have a LONG quotation broken up into smaller paragraphs:
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br /><br />
<pre> 
Duis aute irure dolor in 
	reprehenderit in voluptate 
		velit esse cillum dolore 
			eu fugiat nulla pariatur.
</pre>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Duis aute irure dolor in 
	reprehenderit in voluptate 
		velit esse cillum dolore 
			eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Back to top

That concludes this lesson on HTML Text Attributes.

HTML menu.