This guide is an excerpt from devCamp’s new HTML/CSS Bootcamp course. In this guide we are going to review the comprehensive list of HTML style tags.
The first style is going to be the marked text tag, you can use this tag to highlight a particular word, phrase or value. The tag for this style will be
<ul> <li>The <mark>marked</mark> text tag</li> </ul>
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>
The next one is the deleted text tag, represented by the tag
<del>. This tag will have a line right through the word to show that it is deleted. A great an example of when you could use this is for teachers. You can use this style when you want to show students the right way to spell a word. You can delete the wrongly-spelt word with this tag, and insert the right spelling.
<li>The <del>deleted</del> text tag</li>
Moving down the list of HTML styles, we have the inserted text tag next, and 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>
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>
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.
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 show demos to my clients.
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’re probably right. However the HTML development team thought it was important enough to include in their codebase, so I thought I’d include it in this guide.
Remember, each of these above styles can be implemented using CSS, and we’ll see how to do that later. For now though, it’s good to know the different options you have.