The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

HTML Text Formatting Tags

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

HTML Documents ...

Would you like to know the different ways you can format text in an HTML document?  This HTML tutorial lists many of the more useful HTML text formatting tags together with practical demonstrations and scripting examples for each tag. A very useful reference for those who are starting to learn HTML.

Excluded Tags ...

This list of text format tag examples is notable for the many tags that have deliberately been left out. This is intended to allow those who are new to HTML scripting to learn as many of the useful tags in a short space of time without becoming confused by the variety of less useful tags.

The HTML scripting language was originally designed as a text formatting language (e.g. for academic papers) and a formatting tag was created for every possible use the authors of the language could think of. Examples that we have excluded include 'abbreviation' <abbrev>, 'variable' <var> and 'inserted text' <ins>, and there are many others.

Modern browsers usually render the text enclosed in these tags at italic and they often all look the same anyway. If you wish to learn about the text format tags that we have excluded then you might try our HTML Tags/Attributes page or any complete list of HTML tags.

Included Tags

The text format tags listed on this page are those that we have found useful when creating a modern web page. They divide into three categories, inline tags, paragraph tags and line break tags.

 

Big Tag (inline)

The BIG Tag is valid HTML '4.01 Transitional' and valid HTML '4.01 Strict. However, it does not meet WCAG 2.0 Accessibility guidelines and because of this we suggest that you use CSS to make text Big.
<span style="font-size:larger;"> ..... </span>

example ...

A line of text with this section made big while the rest is unformatted.

HTML Code ...

 
 

Bold Tag (inline)

The BOLD Tag is valid HTML '4.01 Transitional' and valid HTML '4.01 Strict. However, it does not meet WCAG 2.0 Accessibility guidelines and because of this we suggest that you use CSS to make text Bold.
<span style="font-weight:bold;"> ..... </span>

example ...

A line of text with this section made bold while the rest is unformatted.

HTML Code ...

 
 

Center Tag (block)

The CENTER Tag is now depreciated but will validate to HTML '4.01 Transitional'. It will not validate to HTML '4.01 Strict' and does not meet WCAG 2.0 Accessibility guidelines. Because of this we suggest that you use CSS for centering.
<div style="text-align:center;"> ..... </div>

example ...

Text before contained in a DIV Tag
this section centered
Text following contained in a DIV Tag.

HTML Code ...

 
 

Citation Tag (inline)

The HTML Cite Tag validates to both HTML '4.01 Transitional' and HTML '4.01 Strict'. It also meets WCAG 2.0 Accessibility guidelines.

example ...

A line of text with this section made cite while the rest is unformatted.

HTML Code ...

 

notes ...

Usually rendered as italic in modern browsers. Be cautious if using this tag because it has different behaviours in Microsoft and Netscape browsers. In Microsoft browsers it is a true 'inline' tag and the text is rendered in the default color whereas in Netscape browsers a line-feed is issued after the closing tag and the text is rendered in blue.

 

Code Tag (inline)

The HTML Code Tag validates to both HTML '4.01 Transitional' and HTML '4.01 Strict'. It also meets WCAG 2.0 Accessibility guidelines.

example ...

A line of text with this section made code while the rest is unformatted.

HTML Code ...

 

notes ...

Usually rendered the same as the 'teletype' <tt> tag in a fixed-width font.

 

Emphasis Tag (inline)

The HTML Em Tag validates to both HTML '4.01 Transitional' and HTML '4.01 Strict'. It also meets WCAG 2.0 Accessibility guidelines.

example ...

A line of text with this section made emphasis while the rest is unformatted.

HTML Code ...

 

notes ...

Rendered in different ways by different browsers. For example, emphasise can be italic or upper case italic. For stronger emphasis see the 'strong emphasis' <strong> tag.

 

Heading Tag (paragraph)

IMPORTANT TAG:  All six HTML Heading Tags are core HTML structure Tags and should be used to provide outline structure to web pages. There is no CSS equivalent although it is usual to apply your own styles to format the appearance of your page headings. All HTML Heading Tags validate to both HTML '4.01 Transitional' and HTML '4.01 Strict'. They also meets WCAG 2.0 Accessibility guidelines.

example ...

Heading Size 1

HTML Code ...

 

example ...

Heading Size 2

HTML Code ...

 

example ...

Heading Size 3

HTML Code ...

 

example ...

Heading Size 4

HTML Code ...

 

example ...

Heading Size 5

HTML Code ...

 

example ...

Heading Size 6

HTML Code ...

 
 

Italic Tag (inline)

The HTML Italic Tag validates to both HTML '4.01 Transitional' and HTML '4.01 Strict'. It also meets WCAG 2.0 Accessibility guidelines.

example ...

A line of text with this section made italic while the rest is unformatted.

HTML Code ...

 

Small Tag (inline)

example ...

A line of text with this section made small while the rest is unformatted.

HTML Code ...

 

Subscript Tag (inline)

example ...

A line of text with this section made subscript while the rest is unformatted.

HTML Code ...

 
 

Strike Tag (inline)

example ...

A line of text with this section made strikethrough while the rest is unformatted.

HTML Code ...

 

The STRIKE Tag is now depreciated but will validate to HTML '4.01 Transitional'. It will not validate to HTML '4.01 Strict' and will not meet Accessibility guidelines. Instead, you should use CSS for centering.
<span style="text-decoration:line-through"> ..... </span>

I cannot help but feel that W3C has made a mistake in depreciating the HTML STRIKE Tag. If you are using CSS to strike text and the style sheet seperates from the web page or styles have been turned off by the user then at best, the text can appear confused and at worst, the text can take on a different meaning. Web authors should be aware of this potential problem when striking text.

 

Strong Emphasis Tag (inline)

The STRONG Tag is valid HTML '4.01 Transitional' and valid HTML '4.01 Strict. However, it does not meet WCAG 2.0 Accessibility guidelines and because of this we suggest that you use CSS to make text Strong.
<span style="font-weight:bolder;"> ..... </span>

example ...

A line of text with this section made strong emphasis while the rest is unformatted.

HTML Code ...

 

Superscript Tag (inline)

example ...

A line of text with this section made superscript while the rest is unformatted.

HTML Code ...

 

Teletype Tag (inline)

example ...

A line of text with this section made teletype while the rest is unformatted.

HTML Code ...

 

notes ...

Usually rendered the same as the 'code' <code> tag in a fixed-width font.

Underline Tag (inline)

text-decoration:underline

example ...

A line of text with this section underlined while the rest is unformatted.

HTML Code ...

 

notes ...

We would suggest that you to carefully consider the general use of underlining on a web page and there are two reasons for this. The first reason is that underlining is really a leftover from the typewriter and is not highly favoured in modern typography. There are many other ways to highlight text on a web page and these include bold, italic, bold/italic, colour, blocktext, etc. The second reason is that Web browsers use underlining to mark/highlight hypertext links and users are used to this convention. You could cause confusion with too much underlining of text.

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - HTML Text Formatting Tags Learn how to format text using HTML Markup Tags as containers for your text. Create headings, paragraphs and divisions. Make text bold, underline, italic, emphasized, big, small, citation, code, etc.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
HTML Text Formatting Links
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England