Home > Tutorials > HTML/CSS/JS Tutorials > Text Formatting Tags

Text Formatting Tags

Adding text couldn’t be simpler. To put text on a web page, simple start typing within the body of the document. What you type there, as a long as it isn’t a tag, will appear on the screen. However, that isn’t much fun, so lets look at what you can do to text to make it look exactly how you want:

The <font> tag is used to alter text font. This includes the style, color and size. To change the color, you must first know the basic color codes. HTML requires you to use hexidecimal, which is the same as the regular number system except that it doesn’t stop at 9, but goes onto a,b,c,d,e,f, like so: 1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10,11,12,13,14, etc… up to ff.

To change the color of the text put the tag: <font color=#ffffff>This colour change causes the text to be like this. The ff on the left is for red, the ff in the middle is for green, and the ff on the right is for blue. With all colours at max, the text is white.

As well as changing the colour, you can also change the size of text. For example, using the tag: <font size=”+1″> you can alter the size to make it bigger, like so. Putting a number after + or – causes the size to be altered in relation to its standard size.

To top it off, you can alter the font style of your text. For an easy list, just go into Microsoft word and take a look at the massive variety of font faces. An example however is this: <font face=”impact”> which has this result.

It isn’t just font tags that can alter the text though. In addition, there are special tags such as <b> which causes the text to be bold and <em> which makes the text go to italics. I have compiled a list below outlining the different tags available to you:

Tags Description
<b> Defines Bold Text
<big> Defines Big Text
<em> Defines Emphasised Text
<i> Defines Italic Text
<small> Defines Small Text
<strong> Defines Strong Text
<sub> Defines Subscripted Text
<sup> Defines Superscripted Text
<ins> Defines Inserted Text
<del> Defines Deleted Text

Computer Output Tags

Tags Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text


Citations, Quotations, and Definition Tags

Tags Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term


About Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Check Also

Understanding The Difference Between Class and ID

A good buddy of mine has recently started his own learning process diving into HTML, CSS, ...

Like every other website, this site uses cookies to deliver to analyze our traffic. Cookies may also be utilized by our advertisers and partners. By using this website you agree to the use of said cookies. More Information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings, continuing to navigate past this message, or you click "Accept" below then you are consenting to the use of cookies on the Rapid Purple website.