In this guide we are going to review the comprehensive list of HTML style tags.

To begin, create an unordered list (bullet point list) using the tag <ul> and we will place each style on a different line with the <li> tag.

<ul>
  <li></li>
</ul>

Mark Style

The first style is the marked text tag, you can use this tag to highlight a particular word, phrase or value. The tag for this style will be <mark>.

<ul>
  <li>The <mark>marked</mark> text tag</li>
</ul>

Small Style

The next style is the small text tag, <small>, this style will make a particular word smaller in size.

<li>The <small>small</small> text tag</li>

Deleted Style

The next one is the deleted text tag, represented by the tag <del>. This tag has a line through the word to show that it is deleted. A great an example of when you could utilize this is when creating a website for teachers. You could use this style when you want to teach students the right way to spell a word. You can "delete" the misspelled word with this tag, and insert the right spelling.

<li>The <del>deleted</del> text tag</li>

Inserted Style

Moving down the list of HTML styles, is the inserted text tag. This is represented by the tag <ins>. This tag will underline a particular word or phrase, so you know it is inserted.

<li>The <ins>inserted</ins> text tag</li>

Subscript Style

The next one is subscript, and the tag for this is <sub>. This tag is useful when you want to teach or represent logarithms or any other mathematical concept that uses subscript numbers.

<li>The <sub>subscript</sub> text tag</li>

Superscript Style

As you might imagine, similar to subscript, there is a superscript tag, represented by the tag <sup>. This tag raises the word or number by a few pixels, and is typically used for representing exponents.

<li>The <sup>superscript</sup> text tag</li>

Both the subscript and superscript tags are quite handy for mathematical expressions. They are also easy to represent when compared to using CSS styling.

Pre Style

The next tag gives us the ability to put in a programming code. It's called the code or pre tag, and is represented by <pre>. This tag converts the word into a code-like font such as Courier. Also, it pushes the text to a new line.

<li>The <pre>pre</pre> text tag</li>

I use this tag quite a bit to demonstrate to my clients.

Quotation Style

The last style is the quotation tag, represented by <q>. As the name suggests, it adds quotes to text, and doesn't require you to add quotes to the code.

<li>The <q>quotation</q> text tag</li>

If you're thinking it's easier to use quotes instead of the tag, you are correct. However the HTML development team thought it was important enough to include in their codebase, so it is implemented in this course..

Remember, each of these above styles can be implemented using CSS, and will be explored in later sections. Until then, this will familiarize you with your variety of options.