Comments and Lists

 Your Web pages are getting a little bit long now. You have images and links and now you want to sort it all out in an organized manner. To help you with this, you can add comments to your code.

Comments are notes made to yourself in your code that won't appear on the web page. They have a start tag and an end tag. Like this:

<!-- This is a comment. -->

Notice that the comment tags look very different from other element tags. Why? Couldn't HTML make a comment tag using the same format we are used to? Something like <com> </com>. I suppose HTML could have done that, but for a very important reason. Because.

Lets talk about lists.

There are three types of lists, the unordered list, the ordered list and the description list.

Some reasons to use an unordered list, in no particular order.

  • To present items in an organized way.
  • To separate related items on different lines.
  • To show off your mad listing skills.
But sometimes you want to use an ordered list.
  1. To list items in order of importance.
  2. To keep count of line items.
  3. To again show off your mad listing skills.
The description list allows you to describe items in your list.
Item One
The first and sometimes most important item
Item Two
Follows Item One but does not consider itself inferior
Item Three
Really allows you to show off your mad listing skills
Here is how you make an unordered list.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My List</title>
</head>

<body>
My List
<ul>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ul>

</body>
</html>

And the ordered list.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My List</title>
</head>

<body>
My List
<ol>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ol>

</body>
</html>

 The description list.

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>My List</title>

</head>


<body>

My List

<dl>

  <dt>Item One</dt>

  <dd>descriptive stuff</dd>

  <dt>Item Two</dt>

  <dd>descriptive stuff</dd>

  <dt>Item Three</dt>

  <dd>descriptive stuff</dd>

</dl>

</body>

</html>

That concludes this tutorial. Next we should talk about tables.


Next Topic: Tables

 

Comments

Popular Posts