HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML text formatting (part 2)

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

Read the Text formatting part 1 or Text formatting part 3 tutorials.

This tutorial focuses on:

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.

Definition list tags
Example:
<dl> <dt><b>Cactus<b></dt> <dd>A spikey plant</dd> <dt><b>HTML</b></dt> <dd>A markup language for the web</dd> </dl>
Output:
Cactus
A spikey plant
HTML
A markup language for the web

NOTE: Bold the terms in a definition list to set them apart from the definitions.

Deleted and inserted text

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

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

Quotations

Long quotations are displayed with the <blockquote> tag. Short quotations are displayed with the <q> tag.

With the <q> tag, the browser will automatically display quote marks around the text. With the <blockquote> tag you have to put them yourself.

Example:
<blockquote> "Just as treasures are uncovered from the earth, so virtue appears from good deeds, and wisdom appears from a pure and peaceful mind. To walk safely through the maze of human life, one needs the light of wisdom and the guidance of virtue" </blockquote> <q>The only reward of virtue is virtue; the only way to have a friend is to be one</q>
Output:
"Just as treasures are uncovered from the earth, so virtue appears from good deeds, and wisdom appears from a pure and peaceful mind. To walk safely through the maze of human life, one needs the light of wisdom and the guidance of virtue"
The only reward of virtue is virtue; the only way to have a friend is to be one

Superscripts and subscripts

Superscripts

Superscripts are created with the <sup> tag.

Example:
10<sup>2</sup> = 100
Output:
102 = 100

Subcripts are created with the <sub> tag.

Example:
H<sub>2</sub>O
Output:
H20

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:
some text
Produces this output:
some text

while.....

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;some text
Produces this output:
     some text

Read more about character entities in the HTML text formatting (part 3) tutorial or the full tutorial on HTML entities.

Lists

Lists are an excellent way to present information in an organized fashion. There are three types of lists - numbered (ordered) lists, bulleted (unordered) lists, and definition lists (discussed at the beginning of this tutorial).

Bulleted lists

The bulleted list is a list which includes a bullet next to each item in a list. Bulleted lists are created with the <ul> tag. Each item in the list is displayed with the <li> tag.

Example:
<b>Fruits</b> <ul> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul>
Output:
Fruits
  • Apples
  • Oranges
  • Bananas

Discs are the default bullet type in an unordered list, but you can set different bullet types with the type attribute of the <ul> tag.

Bulleted lists with square or circle bullets:
<b>Fruits</b> <ul type="square"> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul> <b>Vegetables</b> <ul type="circle"> <li>Lettuce</li> <li>Cucumbers</li> <li>Tomatoes</li> </ul>
Output:
Fruits
  • Apples
  • Oranges
  • Bananas
Vegetables
  • Lettuce
  • Cucumbers
  • Tomatoes

Numbered lists

The numbered list is a list which uses numbers instead of bullets next to each item in a list. Numbered lists are created with the <ol> tag. Each item in the list is displayed with the <li> tag.

Regular numbered list:
<b>Computer languages</b> <ol> <li>HTML</li> <li>Javascript</li> <li>PHP</li> </ol>
Output:
Computer languages
  1. HTML
  2. Javascript
  3. PHP

You can set different bullet types with the type attribute of the <ol> tag.

Different bullet types in a numbered list:
<b>Computer languages:</b> <ol type="I"> <li>HTML</li> <li>Javascript</li> <li>PHP</li> </ol> <b>Computer languages:</b> <ol type="a"> <li>HTML</li> <li>Javascript</li> <li>PHP</li> </ol>
Output:
Computer languages:
  1. HTML
  2. Javascript
  3. PHP
Computer languages:
  1. HTML
  2. Javascript
  3. PHP

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.

List within a list using bullets and numbers:
<ul> <li>Big animals <ol type="I"><li>Giraffe</li><li>Elephant</li><li>Bear</li></ol> </li> <li>Small animals <ol type="I"><li>Rabbit</li><li>Cat</li><li>Hamster</li></ol> </li> </ul>
Output:
  • Big animals
    1. Giraffe
    2. Elephant
    3. Bear
  • Small animals
    1. Rabbit
    2. Cat
    3. Hamster
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information