Skip to main content

Learn HTML for beginner : LIst

Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.
The u
l tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.
Change your code to the following:

<!DOCTYPE html>

<html>

<head>
    <title>My first web page</title>
</head>

<body>
    <h1>My first web page</h1>

    <h2>What this is</h2>
    <p>A simple page put together using HTML</p>

    <h2>Why this is</h2>
    <ul>
        <li>To learn HTML</li>
        <li>To show off</li>
        <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
    </ul>

</body>

</html>
If you look at this in your browser, you will see a bulleted list. Simply change the ul tags to ol and you will see that the list will become numbered.
Lists can also be included in lists to form a structured hierarchy of items.
Replace the above list code with the following:
<ul>
    <li>To learn HTML</li>
    <li>
        To show off
        <ol>
            <li>To my boss</li>
            <li>To my friends</li>
            <li>To my cat</li>
            <li>To the little talking duck in my brain</li>
        </ol>
    </li>
    <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>
Et voilà. A list within a list. And you could put another list within that. And another within that. And so on and so forth.

Popular posts from this blog

learn advanced html Tables: Columns, Headers, and Footers

The Columns Strike Back Table rows tend to make table columns look rather stupid. They do all the work, as the table is built row by row, leaving the columns feeling quite rejected. Luckily for those eager columns though, the colgroup  and  col  tags have come to their rescue. These tags allow you to define the table columns and style them as desired, which is particularly useful if you want certain columns aligned or colored differently, as, without this, you would need to target individual cells.

learn advanced html : Accessible Forms

Labels Each form field should have its own explicit label . The  label  tag sorts this out, with a  for attribute that associates it to a  form  element: < form > < label for = "yourName" > Your Name </ label > < input name = "yourName" id = "yourName" > <!-- etc. -->