Headings

If you have documents with subtitles, then there are HTML tags specifically designed just for them.
They are h1, h2, h3, h4, h5 and h6, (h1 is the biggest, h6 is the smallest). Heading tags will automatically place a blank following the element, clearly defining itself as a heading.

Try this:

  1. 1) In Code view, before the first <p> tag, press enter and type: <h1> Your Name's Web Site</h1>
    2) Press enter and type: <h2>Who Am I?</h2>
    3) Save your changes and refresh your browser.


Lists

As in Microsoft Word, sometimes it is necessary to create lists of items. With HTML it isn’t as simple as clicking bullets or numbers, but it does help to think about the structure of tools. With a bulleted list it does not matter the order in which the item occur, but with a numbered list the items are placed in some sort of order.

The following shows the difference between an unordered (bulleted) list and an ordered (numbered) list.

Unordered List (bulleted)

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul> NOTE: the outside tag changes depending on whether you would like a bulleted list or a numbered list.

Each item is surround by <li></li> tags which stands for list items.

Try This:

  1. In between your <h1> and your <h2> elements, insert the following code.
  2. Create a list for our navigation. You can do this by either typing into code view or in the design view and using the unordered (bullet) property at the bottom of your screen.
    • All About Me
    • My Timetable
    • My Contact Information
    • My Hobbies
    • HTML and CSS
  3. Save your changes and refresh your browser.

Ordered List (numbered)

Later we will be using a numbered list to illustrate the difference.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Lists can be used to create effective and consistent navigation for your site. Currently, your list will have bullets beside the list items, but as we progress through this tutorial, we will change the appearance with our CSS file.

NEXT LESSON