Text Formatting Tags
A page that contains endless blocks of identical text is a deterrent for most 'surfers', so we modifying the text in order to jazz up the look of the web page. However, too much variety in the text formatting can also look displeasing.
- Header -
<h?></h?> - There are 6 levels of headings available, from
h1for the largest and most important heading, down toh6for the smallest heading. - Bold -
<b></b> - Use this tag to bold certain parts of the document. Any text in between the tags will be bolded the same as in a word processor.
- Italic -
<i></i> - Also working the same way as a word processor, italics displays the text at a slight angle.
- Underline -
<u></u> - Again, the same as underline in a word processor. Note that ordinary links are already underlined and don't need the extra tag.
- Centre -
<center></center> - A useful tag, as it says, it makes everything in between the tags centred (in the middle of the page).
- Strike-out -
<strike></strike> - Puts a line right through the centre of the text, essentially crossing it out. Not a very common tag, but it does have its uses. Note: Some older browsers may require the tag
<s></s>. - Font Colour -
<font color="#??????"></font> - Change the colour of a few words or a section of text. The 6 question marks represent the hex color code, see this list of colours and codes for some samples. (*)
- Font Size -
<font size="?"></font> - Replace the ? with a number from 1 to 7 to change the size of the font. One being the smallest and seven the largest. (*)
- Font Size Change -
<font size="+/-?"></font> - For an immediate change of font size with respect to the font size preceding it, this tag increase or decreases the size of the font by the number you specify. Eg:
<font size="-1">Some Text</font>(*) - Change Font Face -
<font face="?"></font> - To show text in a particular font, just use the font name such "Helvetica" or "Arial" or "Courier". Be aware that using some fancy font from your computer means that the person viewing that page must also have that font installed on their computer too, otherwise it will look totally different to them. (*)
- Typewriter Text -
<tt></tt> - The text appears to have been typed by a typewriter. This text is written using the <tt></tt> tags.
- Source Code -
<code></code> - Similar to
ttthe text is displayed in a fixed-width font, and is commonly used to show source code. I have used it on this site, along with stylesheets, to show all tags. - Preformatted Text -
<pre></pre> - Any text between the
pretags, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor (normally browsers ignore multiple spaces) - Block Quote -
<blockquote></blockquote> - Defines a long quotation, and the quote is displayed with an extra wide margin on the left hand side of the block quote.
- Emphasis -
<em></em> - Used to emphasize text, which usually appears in italics, but can vary according to your browser.
- Strong Emphasis -
<strong></strong> - Used to emphasize text more, which usually appears in bold, but can vary according to your browser.
See the text formatting example, and select 'view source' in your browser to see the html code.
Important Note:
Tags marked with (*) should still work, but have superseeded by stylesheets (css), which is now the recommended way to change the font, colour, spacing, border or alignment of html elements.