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 lessons. This is the first lesson of those three.
You can skip to the Text formatting part 2 lesson or the Text formatting part 3 lesson right away though it is recommended to read the text formatting lessons in order.
This lesson focuses on:
- The <font> tag
- Bold, italic, and underlined text
- Headings
- Big and small text
- Centering text
- Abbreviations and Acronyms
- Addresses
- 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.
Example:
Output:
NOTE: The <font> tag is deprecated in HTML 4.01 and above
Bold, italic, and underlined text
- <b> <i> <u>
The <b> tag makes text bold, the <i> tag makes text italic, and the <u> tag underlines text.
Example:
Output:
here is some italic text
here is some underlined text
here is some bold, italic, and underlined text
Headings
Headings can be displayed using the <h1> through <h6> tags.
NOTE: The lower the number in a heading tag, the bigger the heading.
Heading tags
- <h1> </h1>
- <h2> </h2>
- <h3> </h3>
- <h4> </h4>
- <h5> </h5>
- <h6> </h6>
Example:
Output:
this text is small
this text is bigger
this text is the biggest
NOTE: Headings should NOT be used to simply display text in a certain size. Headings should be used to present the logical order of a document. The way the pages on this website are built is an example of this -- we have the title of the lesson in an <h1> level heading, and the title for each part of the lesson in an <h2> level heading.
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.
Example:
Output:
Centering text
You can center text (as well as other elements) using the <center> tag.
Example:
Output:
NOTE: The <center> tag is deprecated in HTML 4.01 and above.
Abbreviations and acronyms
Abbreviations
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.
Example:
Output:
Move your mouse over 'Intro.' to find out what it is an abbreviation of. A small yellow box (called a tooltip) with the abbreviation should appear right next to the word.
Acronyms
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.
Example:
Output:
Move your mouse over 'BASIC' to find out what it is an acronym of. A small yellow box (called a tooltip) should appear with the acronym right next to the word.
Addresses
Addresses are placed on a webpage with the <address> tag.
Example:
Output:
Computer output tags
Computer output tags are used to display text as computer programming code.
Computer output tags:
- <code>
- <kbd>
- <tt>
- <samp>
- <var>
Example:
Output:
This tag displays computer programming code
This tag displays input from the keyboard
This tag displays teletype text
This tag displays sample text
This tag displays variables
