HTML horizontal rule and lists (HTML tutorial)

Use the <hr /> tag to display lines across the screen. Note: the horizontal rule tag has no ending tag like the line break tag.

HTML Code::

<hr />

Use

<hr /><hr />

Them

<hr />

Sparingly

<hr />

Display::

---

Use

---

---

Them

---

Sparingly

---

Aside from our exaggerated example, the horizontal rule tag can come in handy when publishing work. A table of contents or perhaps a bibliography.

HTML Code:

<hr />

<p>1. "The Hobbit", JRR Tolkein.<br />

2. "The Fellowship of the Ring" JRR Tolkein.</p>

Biliography:

---

1. "The Hobbit", JRR Tolkein.
2. "The Fellowship of the Ring" JRR Tolkein.

As you can see, all this tag does is draw a line across your content, and used properly, its results can be outstanding.

html lists

There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists. Use the type and start attributes to fine tune your lists accordingly.

• <ul> - unordered list; bullets
• <ol> - ordered list; numbers
• <dl> - definition list; dictionary

html ordered lists

Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the list below demonstrates.

HTML Code:

<h4 align="center">Goals</h4>

<ol>

<li>Find a Job</li>

<li>Get Money</li>

<li>Move Out</li>

</ol>

Numbered list:

Goals

1. Find a Job
2. Get Money
3. Move Out

Start your ordered list on any number besides 1 using the start attribute.

HTML Code:

<h4 align="center">Goals</h4>

<ol start="4" >

<li>Buy Food</li>

<li>Enroll in College</li>

<li>Get a Degree</li>

</ol>

Numbered List Start:

Goals

4. Buy Food
5. Enroll in College
6. Get a Degree

Nothing fancy here, start simply defines which number to begin numbering with.

html ordered lists continued

There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numberals or letters, both capital and lower-case. Use the type attribute to change the numbering.

HTML Code:

<ol type="a">

<ol type="A">

<ol type="i">

<ol type="I">

Ordered List Types:

Lower-Case Letters	Upper-Case Letters	Lower-Case Numerals	Upper-Case Numerals
Find a Job Get Money Move Out	Find a Job Get Money Move Out	Find a Job Get Money Move Out	Find a Job Get Money Move Out

html unordered lists

Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.

HTML Code:

<h4 align="center">Shopping List</h4>

<ul>

<li>Milk</li>

<li>Toilet Paper</li>

<li>Cereal</li>

<li>Bread</li>

</ul>

Unordered Lists:

Shopping List

• Milk
• Toilet Paper
• Cereal
• Bread

Here's a look at the other flavors of unordered lists may look like.

HTML Code:

<ul type="square">

<ul type="disc">

<ul type="circle">

Unordered List Types:

type="square"	type="disc"	type="circle"
Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread

html definition term lists

Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term word just above the definition itself for a unique look. It's wise to bold the terms to displace them further.

• <dl> - defines the start of the list
• <dt> - definition term
• <dd> - defining definition

HTML Code:

<dl>

<dt><b>Fromage</b></dt>

<dd>French word for cheese.</dd>

<dt><b>Voiture</b></dt>

<dd>French word for car.</dd>

</dt>

HTML Code:

Fromage
     French word for cheese.
Voiture
     French word for car.

tips

• Use the start and type attributes to customize your lists.
• It is possible to make lists of lists, which is helpful for creating some items, such as outlines.