Skip to main content

HTML Tutorial 7: Creating HTML List

Sticky Note with Ordered and Unordered List

Hello Guys! This is my tutorial number 7 on HTML. If you would like to read the previous 6 tutorials then please use the search box above, type HTML and get the HTML tutorials list. 

Today I will discuss about a simple topic of HTML. Really this is as simple as I say! :) Okay let's start.

Practice Rules

Practice rules are as usual. Use notepad and a web browser. Save the file with .htm or .html extension. 

HTML List: Ordered and Unordered

There are mainly two types of lists can be created by HTML code. The first one is ordered list and the other is unordered list. 

Ordered List:

In an ordered list, the list items are marked by numbers. This exactly looks like a numbered list created by Microsoft Word or other text editing programs. 

An ordered list starts with <ol> tag and ends with </ol> tag. Each item of the list starts with <li> tag and ends with </li> tag. Look at the code below:




    Remember, o indicates unordered (o) and l indicates list. Thus it is written as <ol>. 

    After enter this code, you will get the following output in your browser: 
    1. Apple
    2. Google
    3. Microsoft

    Unordered List:

    In an unordered list, the list items are marked with bullets. Normally small black circles (·

    Code for unordered list is very similar. Instead of typing <ol>, you need to use <ul>. u for unordered and l for list. Follow the code below:

    Your browser will display:
    • Apple
    • Google
    • Microsoft

    Description List:

    There is another list in HTML which is known as description list. A description list contains a brief description of the list item. 

    But I think you can describe the list item simply typing some texts. This is not very important to create a different type of list to describe list items. That's why I'm not showing the code of description list. 

    Tip: You can use line breaks, text, links or images inside a list item. 

    Tags used in HTML List: 

    By this time you're familiar with the tags used in creating HTML list. Let's check them at once:

    • <ol> - Defines an ordered list
    • <ul> - Defines an unordered list
    • <li> - Defines a list item
    • <dl> - Defines a description list
    • <dt> - Defines a term/ name in description list
    • <dd> - Defines a description of a term/ name in description list. 

    Stay with Marks PC Solution to get more interesting IT topics!


    Popular posts from this blog

    GTA San Andreas Cheat Code (PDF)

    After Vice City, San Andreas is the most popular game released by Grand Theft Auto (GTA). Usually GTA releases role playing game. San Andreas is such a game where you can act like a person. You can do everything. You have to take part in missions and complete them.  To make your missions easier, there are lots of cheat codes. If you can properly apply these codes, the tough parts of the game will be easier. Cheat codes are somewhat like keyboard shortcuts of computer programs.  I've shared 63 cheat codes below. There were more cheat codes in my collection, but I've omitted the less important cheats. Effects or result of the cheats are on the left side, and the codes are on the right side.  You can copy the following codes in your PC. And for your convenience, I've also uploaded a PDF file of these codes. You will find the download link at the bottom.  Effect Cheat Code Adrenaline Mode MUNASEF All Cars Explode ALLCARSGOB

    Rules for Bengali Typing in PDF (Bijoy Layout)

    Bijoy is the most popular layout for Bangla typing. The layout was developed by Mostafa Jabbar. He is the pioneer of Bangla typing in computer. More than 90% people use his Bijoy layout for Bangla typing. Today, I'm gonna share a PDF file with you that contains the Bijoy Keyboard layout with English fonts! If your keyboard doesn't have bengali fonts then you can print this PDF file to know where the bengali fonts are located in your keyboard. Additionally this file contains all the necessary rules and tips which are essential for Bangla Typing.  Now there are many other software available for Bangla Typing Layout. Such as Avro Easy, Unicode, Unibijoy etc. And there rules are also somewhat different from Bijoy. And some of their layouts follow the same rules like Bijoy. Hopefully this PDF file will support most of the rules when a layout is similar to Bijoy Layout.  Click to enlarge the image Download the PDF file from the button below. Follow

    Download Puzzle Flash Game - Save Them

    Hey Flash Game Lovers! Today you're getting an amazing puzzle game - Save Them! It's a flash game and the download size is only 382 KB. In this game, you have to move 3 missionaries and 3 cannibals from one side to another through a boat. In any side, if the number of cannibals is more than the number of missionaries, then cannibals will eat the missionaries!  Download Save Them Download the game from the above link. It's a zipped file. Download size is only 382 KB! After downloading the game, you have to unzip it first. Then double click on the SaveThem to start the game.  How to Play? After starting the game, you will get the instruction. You have to make sure that in no side, the number of cannibals is not more than the number of missionaries. This is your only challenge. You have to take them from left side to the right side of the lake through a boat.  Press on a character to jump to the boat. Thus you can take any two of them a