Text Alignment and Lists

Some HTML tags allow you to specify a variety of options, or attributes, along with the basic tag itself. For example, when you begin a paragraph with the <p> tag you can specify whether the text in that paragraph should be aligned to the left margin, right margin, or center of the page.

Text Alignment

To align a paragraph to the right margin, you can put align=“right” inside <p> tag at the beginning of the paragraph.

To center a paragraph, use <p align=“center”>.

The tag to align a paragraph to the left is <p align=“left”>. (default)

The word align is called an attribute of the <p> tag.◦ Attribute are special code words used inside an HTML

tag to control exactly what the tag does. You can also use the align attribute with <h1>,

<h2>and other HTML tag containing text.

Text Alignment

When you want to set the alignment of more than one paragraph or heading at a time, you can use the align attribute with the <div>, or division, tag.

By itself, <div> and its corresponding closing </div> tag actually don’t do anything at all.◦ <div align=“center”> ◦ <div align=“right”>◦ <div align=“left”>

Text Alignment

There are three basic types of HTML lists.◦ The bulleted list is called an unordered list. It opens

with the <ul> tag and closes with </ul>. It looks like an ordered list, except that bullets appear at each <li> tag instead of numbers.

◦ The numbered list is called an ordered list. It begins with <ol> tag and ends with a closing </ol> tag. Numbers and line breaks appear automatically at each <li> tag, and the entire list is indented.

◦ The list of terms and their meanings is called a definition list. It starts with the <dl> and ends with </dl>. The <dt> tag goes in front of each term to be defined, with a <dd> tag in front of each definition. Line breaks and indentations appear automatically.

The Three Types of HTML List

Ordered lists◦ are indented lists that have numbers or letters in

front of each item. Unordered lists

◦ are indented lists with a special bullet symbol in front of each item.

Definition lists◦ are indented lists without any number or symbol

in front of each item.

HTML Lists

Although definition lists are officially to be used for defining terms, many Web page authors use them anywhere they’d like to see some indentation. In practice, you can indent any text simply by putting <dl><dd> at the beginning of it and </dd></dl> at the end.

Ordered and unordered lists can also be nested inside one another, down to as many levels as you want.

List Within Lists

By default, a web browser will use a solid disc for the first-level bullet, a hollow circle for the second-level bullet, and a solid square for all deeper levels. However, you can explicitly choose which type of bullet to use for any level by using:◦ <ul type=“disc”>◦ <ul type=“circle”>◦ <ul type=“square”>◦ Can also be used inside the <li> tag

List Within Lists

The type attribute also works with ordered lists, but instead of choosing a type of bullet you choose the type of numbers or letters to place in front of each item.◦ type=“I” – roman numerals◦ type=“A” – capital letters◦ type=“a”- lowercase letters◦ type=“1”- numbers◦ type=“I” – lowercase roman numerals◦ Can also be used inside the <li> tag

List Within Lists

Here’s one more seldom-used but handy-when-you-need-it trick: You can start an ordered list with any number (or letter) with the start attribute. <ol start=“3”>

Individual points can be renumbered with the value attribute: ◦ <li value=“12”>

Note that you must always use numbers with the start and value attribute. To make a list that starts with the letter C:◦ <ol type=“A” start=“3”>

List Within Lists

Tag Attribute Function

<div>…</div> A region of text to be formatted.

align=“…” Align text to center, left, or right. Can also be used with <p>, <h1>, <h2> and so on

<ol>…</ol> An ordered (numbered) list.

type=“…” The type of numerals use to label the list. Possible values are A, a, I, I, 1.

start=“…” The value with which to start this list.

<ul>…</ul> An unordered (bulleted) list.

type=“…” The bullet dingbat used to mark list items. Possible values are disc, circle and square.

<li>…</li> A list item for use with <ol> or <ul>

type=“…” The type of bullet or number use to label the item. Possible values are disc, circle, sqaure, A, a, I, I, 1.

HTML Tags and Attributes Covered

Tag Attribute Function

Value=“…” The numeric value this list item should have (affects this item and all below it in <ol> lists.

<dl>…</dl> A definition list.

<dt>…</dt> A definition term, as part of definition list.

<dd>…</dd> The corresponding definition to a definition term as part of a definition list.

HTML Tags and Attributes Covered