HTML Lists

HTML Lists


In this tutorial, you will learn lists in HTML.


An Unordered List

  • Item
  • Item
  • Item

An Ordered List

  1. First item
  2. Second item
  3. Third item
  4. Fourth item


HTML lists are used to present a list of information in a well-formed and semantic way. There are three different types of list in HTML and each one has a specific purpose and meaning.
The 3 types of list are:

  • Unordered list — Used to create a list of related items, in no particular order.
  • Ordered list — Used to create a list of related items, in a specific order.
  • Description list  — Used to create a list of terms and their descriptions.

İn HTML unordered and ordered lists are the main lists you will be using almost all the time. That’s why developers who create video tutorials don’t usually mention the description list. The video tutorials don’t cover everything. But they are way more practical than written tutorials.

Note: You can see the difference between them in your browser when you run your HTML and look at the results.

İn the following sections you will learn them one by one:


Unordered HTML List

The list is specified using the <ul> tag and each list item is nested inside using the <li> tag.
Like this:

<h2> Some Healthy and Natural drinks </h2>
<ul>
   <li>Water</li>
   <li>Apple Juice</li>
   <li>Orange Juice </li>
   <li> Natural lemonade </li>
</ul>

The <ul> element represents an unordered list. This is because the items are listed in no particular order. This results in identical bullet points being prefixed to each item in the list.
By default, the unordered list items will be marked with bullets (small black circles).


Note: By default, the unordered list items will be marked with bullets (small black circles).
But you can change it using CSS.

Inside a list item, you can put text, images, links, line breaks, etc. You can also place an entire list inside a list item to create the nested list.
You will learn more about them in upcoming tutorials.


Ordered HTML List

The unordered list is specified using the <ol> tag and each list item is nested inside using the <li> tag. 
Like this:

<h2>Learn  Basic Math in order </h2>
<ol>
   <li>Counting</li>
   <li>Numbers</li>
   <li>Addition</li>
   <li>Place Value</li>
   <li>Subtraction</li>
   <li>Multiplication </li>
   <li> Division</li>
</ol>

The <ol> element represents an ordered list
If we wanted to list the items in a particular order, we would use an ordered list. To do this we would simply swap the <ul> tag for a <ol> tag

The list item tags (i.e. the <li>) would remain the same (although we would need to ensure that they are listed in the correct order).

An HTML list also helps the browser understand that it is a list too. That way it can present the list in a particular way (eg, with bullet points or numbers, etc). However, you can change this using Cascading Style Sheets (CSS). In fact, you can change the styles of any HTML element using CSS. We will discuss CSS later in the tutorial.


HTML Description Lists

A description list is a list of items with a description or definition of each item.
The description list is created using <dl> element (tags). The <dt>  tag defines the term (name), and the <dd> tag describes each term.
Like this:


    <h2>HTML Definition List</h2>
	<dl>
        <dt>Bread</dt>
        <dd>A baked food made of flour.</dd>
        <dt>Coffee</dt>
        <dd>A drink made from roasted coffee beans.</dd>
    </dl>
   

Shortly:
1) Use  <dl>  tag to create or define the description list.
2) Use  <dt>  tag to give a name to your term (aka list item ).
3) Use  <dd>  tag to describe your term tag (or describe the list item ) 



Firdavsi

Related Posts

HTML Template

Comments Off on HTML Template

HTML Comments

Comments Off on HTML Comments

HTML Paragraphs

Comments Off on HTML Paragraphs

HTML Links

Comments Off on HTML Links

HTML Text Formatting

Comments Off on HTML Text Formatting

HTML Elements

Comments Off on HTML Elements

HTML styles

Comments Off on HTML styles

HTML Basic

Comments Off on HTML Basic

HTML Attributes

Comments Off on HTML Attributes

HTML Images

Comments Off on HTML Images

HTML Getting started

Comments Off on HTML Getting started

İntroduction to HTML5

Comments Off on İntroduction to HTML5

Create Account



Log In Your Account