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:

<ol>
<li>Apple</li>

<li>Google</li>

<li>Microsoft</li>
</ol>

    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:


    <ul><li>Apple</li><li>Google</li><li>Microsoft</li></ul>
    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!


    Comments

    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 ALL...

    Office 2016 Activator (KMSPico 10.1.5)

    It's been couple of months after the release of final version of Microsoft Office 2016. And maybe you're tired of finding for a working activator for this version. Today I'm gonna share Office 2016 activator with you - no more waiting!! About the Activator   Name: KMSPico 10.1.5 File Size: 3 MB (Approx) File Type: Zipped Folder 100% Neat & Clean - No virus! Activating Capacity . . . KMSPico 10.1.5 is successfully leading the KMS world for last few months. If everything is okay, success rate is 100%. This tool has been tested and verified by Marks PC Solution. With this tool, you can activate -  Office 2016, 2013 & 2010 Windows 10, 8.1 & 8 Hopefully this version will work for both 32 bit & 64 bit versions of Windows. Installing Office 2016 Collect/ Download Office 2016 Professional Plus from Microsoft or somewhere else. Install it as trial version without any key. Use the follow...

    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...