HTML Post #2: Lists & Links

Lists

There are two basic types of lists in HTML: ordered and unordered. Unordered lists are bullet lists. Ordered lists are numbered. Each item in the list is housed in between opening and closing “li” tags.

Ordered Lists

A simple numbered list is surrounded by opening and closing “ol” tags. Here is a quick example:

<ol>
<li>Step 1.</li>
<li>Step 2.</li>
</ol>

This looks like:

  1. Step 1.
  2. Step 2.

You can use a different marker, just as lowercase letters, uppercase letters, and roman numerals.  This is done by styling the list. Here’s how to do roman numerals:

<ol style="list-style-type: upper-roman">
<li>Step I.</li>
<li>Step II.</li>
</ol>
  1. Step I.
  2. Step II.

Here are the different ordered list style types:

upper-letter Uppercase Letters
lower-letter Lowercase Letters
upper-roman Uppercase Roman Numerals
lower-roman Lowercase Roman Numerals
upper-greek Uppercase Greek Letters
lower-greek Lowercase Greek Letters
decimal Regular Numbers
decimal-leading-zero Leading Zero

Unordered Lists

These are almost identical to ordered lists. Instead of “ol”, you use “ul”. The default list style type is a bullet. Here are the unordered types:

  • none
  • circle
  • disc
  • square

Here’s that unordered list in HTML:

<ul>
<li>none</li>
<li>circle</li>
<li>disc</li>
<li>square</li>
</ul>

Links

A link is super easy to do.  It’s an “a” tag.  The tag has an “href” attribute that contains the url, just like the “style” attribute contained the styling information. Here’s a quick example:

<a href="http://example.com/">Example.com</a>

Which would like like:

Example.com

You can also tell the browser to open the link in a new window/tab by using the “target” attribute:

<a href="http://example.com/" target="_blank">Example.com in a new window/tab</a>

Example.com in a new window/tab

You can even style the “a” tag to set the color and  remove the underline:

<a href="http://example.com/some_web_page.html" style="color: black; text-decoration: none">Example.com</a>

Example.com

Yes, you can set the color of any text with that style attribute. Also note that multiple styles are separated by a semicolon, and it does not matter the order of the styling when put in the “style” attribute, so long as there’s nothing conflicting.

Well, that’s pretty much it for lists & links. The next post is all about images, so check back!

Tags: , ,

Comments are closed.