HTML text formatting (part 1)
Text in an HTML document can be formatted in many ways such as changing the texts size, color, and font type, as well as advanced formatting such as creating lists, paragraphs, and line breaks.
As text formatting in HTML is a huge topic with alot of possibilities, we have written three text formatting tutorials.
This tutorial focuses on:
- The <font> tag
- Bold, italic, and underlined text
- Big and small text
- Centering text
- Abbreviations and Acronyms
- Computer output tags
The <font> tag
The <font> tag is used to set text size, font type, and color. It takes three attributes - size, face, color.
NOTE: This tag is deprecated.
Bold, italic, and underlined text
The <b> tag makes text bold, the <i> tag makes text italic, and the <u> tag underlines text.
Headings can be displayed using the <h1> through <h6> tags. The lower the number in a heading tag, the bigger the heading.
Heading tags: <h1> (biggest heading), <h2>, <h3>, <h4>, <h5>, <h6> (smallest heading)
NOTE: The browser will automatically place a line break before and after each heading.
Text in a small heading
Even bigger heading
And another heading
The biggest heading
NOTE: Headings should be used to present the logical order of a document and used in order - <h1> as a main heading, then <h2>, then <h3>, and so on. Our pages are an example of this - we have the title of the page in an <h1> heading, and the title for each part of the page (subtitles) in an <h2> heading. Do not use headings to simply display text in a certain size.
Big and small text
You can display big text using the <big> tag and small text using the <small> tag.
The <big> tag will display text as only a little bigger than its regular size, and the <small> tag will display text as only a little smaller than its regular size.
You can center text (as well as other elements) using the <center> tag.
NOTE: This tag is deprecated.
Abbreviations and acronyms
Abbreviations are specified with the <abbr> tag. This tag is used to display the value of data which is abbreviated. The <abbr> tag contains a title attribute that sets what the data is an abbreviation of.
Move your mouse over 'Intro.' to find out what it is an abbreviation of. A small box (called a tooltip) with the abbreviation should appear right next to the word.
Acronyms are specified with the <acronym> tag. This tag works similarly to the <abbr> tag but is used to display the value of data which is displayed as an acronym. The <acronym> tag contains a title attribute that sets what the data is an acronym of.
Move your mouse over 'BASIC' to find out what it is an acronym of. A small box (called a tooltip) should appear with the acronym right next to the word.
Addresses are placed on a webpage with the <address> tag.
NOTE: The <address> tag automatically sets text to be italic.
Computer output tags
Computer output tags are used to display text as computer programming code.
Computer output tags: <code>, <kbd>, <tt>, <samp>, <var>
This tag displays computer programming codeThis tag displays input from the keyboard This tag displays teletype text This tag displays sample text This tag displays variables