HTML Tutorial Part 7

Home

Plan Your Website

Web Design

Free SBI Web Tools

Create A Free Site

Web Design Tips

Intro To HTML

HTML Tutorial

Register Domain

Choose A Host

Web 101

Earn Money Online

Grow Web Traffic

Web Content

Website Templates

Web Page Software

Intro To CSS

Website Adviser Blog

Site Build It!

Privacy Policy

About Me

Contact Us

[?] Subscribe To This Site's Latest Posts

HTML Tutorial - Part 7 HTML Lists

You can use this HTML tutorial to learn the basics of this widely used mark-up language. This part of the web design tutorial shows you how to create lists on your web pages.

Lists are commonly used throughout most websites -- they're easy to create.

Once you know how to structure the different lists it'll be like second nature to you in a very short time!

Learn how to use these HTML tags to increase your ability to create your web pages with this guide.

HTML Tutorial At A Glance…
---------------------------------------------------------------

Part 1: The Basics

Part 2: The Basics

Part 3: The Basics

Part 4: Begin Coding In HTML

Part 5: How To Code An XHTML Web Page

Part 6: Headings and Meta Tags

Part 7: How To Create An HTML List

HTML Lists

Part 8: How To Construct HTML Links

Part 9: Building HTML Tables

How To Create An HTML List
Creating lists for your web pages is not difficult. The three most familiar lists that you will structure are the unordered list, the ordered list, and definition lists.
An unordered list, also known as a bulleted list, is one where the order of the items doesn't matter -- such as a grocery list. Usually each item has a bullet point like this one... •
- Unordered List
  The entire unordered list is bounded by <ul>and </ul> tags --
  (ul means unordered list).
  Each item within your list, usually a phrase or word, is bounded by <li>and </li> tags --
  (li defines a list item).
  Typically each item appears in an indented form with a bullet point in front of it. These tags are signal to the browser to display an unordered list. The order of this type of list is not important
  Here's how we make a list of a several grocery items...
  
  <!DOCTYPE html
  PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en" lang="en">
  <head>
  <title>Web Page With An Unordered List</title>
  </head>
  <body>
  This is an example of how to create an HTML unordered list ...
  <ul type="disc">
    <li>fruits</li>
    <li>soy milk</li>
    <li>water</li>
    <li>nuts</li>
    <li>vegetables</li>
    <li>rice</li>
    <li>fish</li>
  </ul>
  </body>
  </html>
  
  Here's how the web browser displays this HTML unordered list...
- Ordered List
  The entire unordered list is bounded by <ol>and </ol> tags --
  (ol indicates an ordered list).
  Each item within this list is bounded by <li>and </li> tags --
  (li is a listed item within an ordered list).
  The order of the list is important with this list type. If no attribute is indicated then the browser default will start the list of with...
  ... the Arabic number 1.
  Otherwise we can start the list with a other character values such as an upper or lower case letter or a Roman numeral -- ex. a. or A. or I.
  This HTML tutorial section lists same grocery items...
  
  <!DOCTYPE html
  PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en" lang="en">
  <head>
  <title>Web Page With An Ordered List</title>
  </head>
  <body>
  This is an example of how to create an HTML ordered list ...
  <ol type="1">
    <li>fruits</li>
    <li>soy milk</li>
    <li>water</li>
    <li>nuts</li>
    <li>vegetables</li>
    <li>rice</li>
    <li>fish</li>
  </ol>
  </body>
  </html>
  
  Here's how the web browser displays our HTML ordered list...
- Definition List
  The definition list is bounded by <dl>and </dl> tags --
  (dl indicates a definition list).
  Instead of using <li>, (item list), as we did in the other list types we will use the <dd>and </dd> tags --
  (dt this means definition terms).
  Underneath each definition term we will list one or more definitions as defined by the <dd>and </dd>tags --
  (dd simply means a definition within a definition term).
  This HTML tutorial section shows you a list of grouped items...
  
  <!DOCTYPE html
  PUBLIC " - //W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en" lang="en">
  <head>
  <title>Web Page With A Definition List</title>
  </head>
  <body>
  This is an example of how to create an HTML definition list ...
  <dl>
    <dt>Drinks</dt>
      <dd>soy milk</dd>
      <dd>water</dd>
    <dt>Fruits</dt>
      <dd>apples</dd>
      <dd>pears</dd>
      <dd>grapes</dd>
    <dt>Vegetables</dt>
      <dd>corn</dd>
    <dt>Fish</dt>
      <dd>shrimp</dd>
  </dl>
  </body>
  </html>
  
  This is how the web browser displays the HTML definition list...

You’ve also learned how create a few simple lists in this HTML tutorial section. Experiment on your own -- you'll be surprised how easy it is to create lists for your web pages.

HTML Tutorial At A Glance…
---------------------------------------------------------------

Part 1: The Basics

Part 2: The Basics

Part 3: The Basics

Part 4: Begin Coding In HTML

Part 5: How To Code An XHTML Web Page

Part 6: Headings and Meta Tags

Part 7: How To Create An HTML List

HTML Lists

Part 8: How To Construct HTML Links

Part 9: Building HTML Tables

Return from HTML Tutorial Part 7.