Programming

Markup

Style & Layout

Browser scripting

Server scripting

Making money online

HTML text formatting

Text formatting tags in HTML are used to format text in many ways such as creating lists, paragraphs, and line breaks.

This lesson focuses on:

• Abbreviations and acronyms
• Addresses
• Computer output tags
• Definition lists
• Deleted and inserted text
• Quotations
• Superscripts and subscripts
• Creating spaces
• Lists
• Lists within lists
• Paragraphs
• Horizontal lines
• Line breaks
• Presenting text exactly as it is typed
• Changing text direction

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.

Example:

<abbr title="Introduction">Intro.</abbr>

Output:

Move your mouse over 'Intro.' to find out what it is an abbreviation of.

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:

<acronym title="Beginners All Purpose Symbolic Instruction 
Code">BASIC</acronym>

Output:

Move your mouse over 'BASIC' to find out what it is an acronym of.

Addresses

Addresses are placed on a webpage with the <address> tag.

Example:

<address>
<br>
Mickey Mouse
<br>
P.O. BOX 12345	
<br>
Disneyland, USA
</address>

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:

<code>This tag displays computer programming code</code>
<br />
<kbd>This tag displays input from the keyboard</kbd>
<br />
<tt>This tag displays teletype text</tt>
<br />
<samp>This tag displays sample text</samp>
<br />
<var>This tag displays variables</var>

Output:

Definition lists

Definition lists are created using a few tags:

• <dl>
  
  The <dl> tag begins a definition list.

• <dt>
  
  The <dt> tag begins a definition term.

• <dd>
  
  The <dd> tag defines the description of a term in a definition list.

Example:

<dl>
<dt>Cactus</dt>
<dd>A spikey plant</dd>
<dt>Hard drive</dt>
<dd>An electronic storage medium</dd>
</dl>

Output:

Deleted and inserted text

Deleted and inserted text is displayed with the <del> and <ins> tags.

There are <del>5,000</del> <ins>5,280</ins> feet in a mile.

Output:

Quotations

With HTML, you can display long and short quotations. Long quotations are displayed with the <blockquote> tag. Short quotations are displayed with the <q> tag.

Example:

<blockquote>
HTML stands for Hyper Text Markup Language. When you are 
viewing a webpage, you do not have to look at it in a linear 
fashion. Instead, you can look at any part of the page 
anytime you want. Hyper being the opposite of linear is the 
way HTML operates, allowing you to view any part of a webpage 
at any time. HTML is a markup language - a language that has 
code which indicates layout and styling. Some other markup 
languages include XML and SGML.
</blockquote>

<q>HTML is a markup language.</q>

Output:

Superscripts and subscripts

• <sup>

The <sup> tag stands for Superscript. It is used to set text to a super script.

Example:

10<sup>2</sup> = 100

Output:

• <sub>

The <sub> tag stands for Subscript. It is the opposite of <sup> and is used to set text to a sub script.

Example:

H<sub>2</sub>O

Output:

Creating spaces

Browsers ignore anything more than one consecutive space. The solution to this is the &nbsp; command. Every time you insert this command into your code, it will create one space.

Example:

<i>some text</i>

Output:

while.....

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>some text</i>

produces this output:

Lists

Lists are an excellent way to present information in an organized fashion. There are two types of lists which include numbered (ordered) lists and bulleted (unordered) lists. Lists begin with the <ul> tag for a bulleted list and the <ol> tag for a numbered list. If you use a list with the <ul> tag, you must end it with a </ul> tag. If you are using a list with the <ol> tag, you must end it with an </ol> tag. The <li> tag is used to insert items into lists.

Bulleted lists

The bulleted list is a list which includes a bullet next to each item in a list.

Example of a bulleted list:

<ul>
<li>
List item 1
</li>
<li>
List item 2
</li>
<li>
List item 3
</li>
</ul>

Output:

If you do not like the default bullets in an unordered list, you can use squares instead by assigning the type attribute the value "square" in the <ul> tag.

Example of a bulleted list using square bullets:

<ul type="square">
<li>
List item 1
</li>
<li>
List item 2
</li>
<li>
List item 3
</li>
</ul>

Output:

Numbered lists

The numbered list is a list which uses numbers instead of bullets next to each item in a list.

Example of a numbered list using regular numbers:

<ol>
<li>
List item 1
</li>
<li>
List item 2
</li>
<li>
List item 3
</li>
</ol>

Output:

Example of a numbered list using roman numerals:

<ol type="I">
<li>
List item 1
</li>
<li>
List item 2
</li>
<li>
List item 3
</li>
</ol>

Output:

Lists within lists

It is possible to implement lists within lists. Doing so presents information in a hierarchial fashion, and each level in the list can have a new type of bullet or number, or not.

Example of a list within a list using bullets:

<ul>
<li>
Big animals
<!-- first inner list begins here -->
<ul>
<li>Giraffe</li>
<li>Elephant</li>
<li>Bear</li>
</ul>
<!-- first inner list ends here -->
</li>
<li>
Small animals
<!-- second inner list begins here -->
<ul>
<li>Rabbit</li>
<li>Cat</li>
<li>Hamster;/li>
</ul>
<-- second inner list ends here -->
</li>
</ul>

Output:

Example of a list within a list using numbers.

<ol>
<li>
Big animals
<!-- first inner list begins here -->
<ol>
<li>Giraffe</li>
<li>Elephant</li>
<li>Bear</li>
</ol>
<!-- first inner list ends here -->
</li>
<li>
Small animals
<!-- second inner list begins here -->
<ol>
<li>Rabbit</li>
<li>Cat</li>
<li>Hamster;/li>
</ol>
<!-- second inner list ends here -->
</li>
</ol>

Output:

Example of a list within a list using bullets and numbers:

<ul>
<li>
Big animals
<!-- first inner list begins here -->
<ol type="I">
<li>Giraffe</li>
<li>Elephant</li>
<li>Bear</li>
</ol>
<!-- second inner list begins here -->
</li>
<li>
Small animals
<!-- second inner list begins here -->
<ol type="I">
<li>Rabbit</li>
<li>Cat</li>
<li>Hamster;/li>
</ol>
<!-- second inner list ends here -->
</li>
</ul>

Output:

Paragraphs

The tag used to create a paragraph is <p>. Using the <p> tag will place a line above and below the paragraph's text automatically.

Example:

<p>
So you want to get into computer programming? Perhaps you 
intend on editing some web pages, creating a document editing
application, creating a multi-functional interactive game, or 
one of the many other things that can be done with computer 
programming. Whatever your reason(s) for getting into computer 
programming, the road ahead is an interesting one. Computer 
programming is a challenging and rewarding discipline.
</p>

Output:

A paragraph can be aligned using the align attribute.

Justifying a paragraph:

<p align="justify">
So you want to get into computer programming? Perhaps you 
intend on editing some web pages, creating a document editing 
application, creating a multi-functional interactive game, or 
one of the many other things that can be done with computer 
programming. Whatever your reason(s) for getting into computer 
programming, the road ahead is an interesting one. Computer 
programming is a challenging and rewarding discipline.
</p>

Output:

Centering a paragraph:

<p align="center">
So you want to get into computer programming? Perhaps you 
intend on editing some web pages, creating a document editing 
application, creating a multi-functional interactive game, or 
one of the many other things that can be done with computer 
programming. Whatever your reason(s) for getting into computer 
programming, the road ahead is an interesting one. Computer 
programming is a challenging and rewarding discipline.
</p>

Output:

Aligning a paragraph to the right:

<p align="right">
So you want to get into computer programming? Perhaps you 
intend on editing some web pages, creating a document editing 
application, creating a multi-functional interactive game, or 
one of the many other things that can be done with computer 
programming. Whatever your reason(s) for getting into computer 
programming, the road ahead is an interesting one. Computer 
programming is a challenging and rewarding discipline.
</p>

Output:

Horizontal lines

Horizontal lines are created with the <hr> tag. The <hr> tag has no end tag.

Example:

<hr width="95%" />

Output:

NOTE: Attributes of the <hr /> tag are deprecated in HTML 4.01.

Line breaks

To perform a line break in HTML, the tag to use is <br>. This tag will break a line of text or other data and continue it on the next line.

Example:

Split text<br /> in half.

Output:

Presenting text exactly as it is typed

Without using the appropriate tags, HTML will automatically remove various spaces and line breaks for you even if you did want them to be on a page. There is a tag that allows for preformatted text wihch allows you to present text exactly the way you want it without HTML removing spaces and line breaks. This tag is the <pre> tag.

Example:

<pre>

       The text in this paragraph is preformatted. You can 

have various             spaces and           line


breaks without HTML automatically               removing



                               them.

</pre>

Output:

       The text in this paragraph is preformatted. You can 

have various             spaces and           line


breaks without HTML automatically               removing



                               them.

Changing text direction

Text direction is changed with the <bdo> tag. The dir attribute in this tag specifies the direction the text will go. It can be set to rtl (right to left) or ltr (left to right).

Example:

<bdo dir="ltr">HTML is a markup language. So is XML.</bdo>

Output:

Examples

Abbreviations and acronyms
This example demonstrates working with abbreviations and acronyms.

Addresses
This example demonstrates displaying addresses on webpages.

Line breaks
This example demonstrates skipping lines in a webpage.

Computer output tags
This example demonstrates usage of various computer-output tags. These tags are used to display text as computer programming code.

See more HTML text formatting examples

Exercises

Create a webpage that outputs the squares of the numbers 1 - 20. Print each number on a separate line, next to it the number 2 superscripted, an equal sign and the result. (Example: 10² = 100) [See solution]

Create a webpage that prints to the screen 10 names, each separated by two lines. The list should be alphabetized, and to do this place a subscripted number next to each name based on where it will go in the alphabetized list. (Example: Alan₁) Print first, the unalphabetized list with a subscript number next to each name, then the alphabetized list. Both lists should have a <h1> level heading.[See solution]

Create a webpage that prints to the screen two paragraphs that are both indented using the &nbsp; command.[See solution]

Create a webpage that prints to the screen two lists of your choosing. One list should be an ordered list. The other list should be an unordered list. [Click here to see solution]

See more HTML text formatting exercises

Practice

Reference

Rate this site