Programming

Markup

Style & Layout

Browser scripting

Server scripting

Making money online

HTML text formatting (part 2)

This is part 2 of our three lessons on text formatting.

Read the Text formatting part 1 lesson.
Read the Text formatting part 3 lesson.

This lesson focuses on:

• Definition lists
• Deleted and inserted text
• Quotations
• Superscripts and subscripts
• Creating spaces
• Lists
• Lists within lists

Definition lists

A definition list is a list of words together with their definitions organized in a certain manner. Definition lists are created using a few tags.

Example:

Output:

NOTE: You should bold the terms in a definition list (as in the example above) to set them apart from the definitions. Doing this will present clearly what the terms are and what the definitions are and will avoid confusion.

Deleted and inserted text

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

Example:

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:

Output:

Superscripts and subscripts

Superscripts

Superscripts are created with the <sup> tag. The <sup> tag stands for Superscript. It is used to set text to a superscript.

Example:

Output:

Subcripts are created with the <sub> tag. The <sub> tag stands for Subscript. It is the opposite of <sup> and is used to set text to a subscript.

Example:

Output:

Creating spaces

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

Example:

Output:

while.....

produces this output:

You can read more about character entities in the HTML text formatting (part 3) lesson or the full lesson on HTML entities.

Lists

Lists are an excellent way to present information in an organized fashion. There are three types of lists which include numbered (ordered) lists, bulleted (unordered) lists, and definition lists (discussed at the beginning of this lesson). 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:

Output:

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

Example of a bulleted list using square and circle bullets:

Output:

NOTE: The disc bullets appear by default, but you can still specify disc bullets by assigning the type attribute the value "disc" in the <ul> tag.

Example:

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:

Output:

Example of a numbered list using roman numerals:

Output:

a numbered list using roman numerals is created by assigning the type attribute in the <ol> tag the value "I"

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:

Output:

Example of a list within a list using numbers:

Output:

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

Output:

Practice

Reference

Rate this site