in

Learn HTML For Beginner (Part 5: List Element)

In this chapter, we will discuss how to make a list. In HTML, there are 3 types of lists, namely, ordered list, unordered list, and description list.

Ordered List

Ordered lists are sequential lists. This list uses numbers or letters to determine the order. Ordered lists are suitable for lists that must be arranged in chronological order such as instructions or activity lists.

To create an ordered list, we use the <ol> tag, while to create the contents of the list, use the <li> tag.

Following is an example of using an ordered list:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning Ordered List</title>
</head>
<body>
	<p> How to make an omelette: </p>
	<ol>
	<li> Prepare the leeks and celery 
	leaves, then rinse and cut into small pieces. </li>
	<li> Shake the eggs in a container, 
	add the spices onion, celery and salt to taste. </li>
	<li> Fry the eggs in the pan, pour 
	the mixture in the middle of the pan 
	and fry until cooked. </li>
	<li> Turn the dough so that the top side 
	also cooks. </li>
	<li> After both sides are cooked, remove 
	and drain. </li>
	<li> omelet ready to be served. </li>
	</ol>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part5\1.png
List Element

By default, ordered lists are displayed in the order of numbers 1, 2, 3, etc. But we can change it to Roman letters or numbers using the type attribute.

Type Attribute

The type attribute in the <ol> tag serves to determine the type of character used as a list marker. There are 5 types of types available in HTML:

  • type = “a”, using lowercase letters as list markers.
  • type = “A”, using uppercase letters as list markers.
  • type = “i”, using a small roman number as a list marker.
  • type = “I”, using large roman numerals as list markers.
  • type = “1”, using decimal numbers as list markers, this is the default choice if the type attribute is not written.

Following is an example of using the type attribute in an ordered list:

index.html

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning Ordered List</title>
</head>
<body>
	<p> How to make an omelette: </p>
	<ol type="A">
	<li> Prepare the leeks and celery 
	leaves, then rinse and cut into small pieces. </li>
	<li> Shake the eggs in a container, 
	add the spices onion, celery and salt to taste. </li>
	<li> Fry the eggs in the pan, pour 
	the mixture in the middle of the pan 
	and fry until cooked. </li>
	<li> Turn the dough so that the top side 
	also cooks. </li>
	<li> After both sides are cooked, remove 
	and drain. </li>
	<li> omelet ready to be served. </li>
	</ol>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part5\2.png
List Element

In HTML 4.01 the type attribute is depracated, because it is display. But in HTML5 this attribute is declared valid again.

To get the same effect as CSS, we can use the list-style-type property, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning Ordered List</title>
</head>
<body>
	<p> How to make an omelette: </p>
	<ol style="list-style-type:decimal-leading-zero">
	<li> Prepare the leeks and celery 
	leaves, then rinse and cut into small pieces. </li>
	<li> Shake the eggs in a container, 
	add the spices onion, celery and salt to taste. </li>
	<li> Fry the eggs in the pan, pour 
	the mixture in the middle of the pan 
	and fry until cooked. </li>
	<li> Turn the dough so that the top side 
	also cooks. </li>
	<li> After both sides are cooked, remove 
	and drain. </li>
	<li> omelet ready to be served. </li>
	</ol>
</body>
</html>

With CSS, the types of characters produced are more diverse, even available for non-latin characters such as Arabic or Japanese.

Start Attribute

The start attribute is used if we want the list to start instead of number 1. The value of this attribute is the desired sequence number. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning Ordered List</title>
</head>
<body>
	<p> How to make an omelette: </p>
	<ol type="I" start="4">
	<li> Prepare the leeks and celery 
	leaves, then rinse and cut into small pieces. </li>
	<li> Shake the eggs in a container, 
	add the spices onion, celery and salt to taste. </li>
	<li> Fry the eggs in the pan, pour 
	the mixture in the middle of the pan 
	and fry until cooked. </li>
	<li> Turn the dough so that the top side 
	also cooks. </li>
	<li> After both sides are cooked, remove 
	and drain. </li>
	<li> omelet ready to be served. </li>
	</ol>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part5\3.png
List Element

Make a Nested List

Sometimes we also need to make a list that also has a list in it, or known as a nested list. To create a nested list, the method is by inputting the <ol> tag as part of the <li> tag of the first list. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Nested Ordered Lists</title>
</head>
<body>
<ol>
   <li> First choice </li>
   <li> The second option <!-- closing tag </li> is not placed here -->
     <ol type = "a">
       <li> first sub second choice </li>
       <li> second sub second choice </li>
       <li> second choice third sub </li>
     </ol>
   </li> <!-- this is the closing tag </li> -->
   <li> Third choice </li>
</ol>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part5\4.png
List Element

To create a nested list, we must be careful where to place the closing tag </li>.

Unordered List

As the name implies, unordered lists are lists that do not require sequencing. Usually, this list is used if the position of the list has no effect.

In HTML, to create an unordered list we use the <ul> tag. How to use it is very similar to an ordered list.

Here is an example of using an unordered list:

index.html

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> Learning Unordered List </title>
</head>
<body>
   <p> Types of web browser applications: </p>
  <ul>
    <li>Google Chrome</li>
    <li>Mozilla Firefox</li>
    <li>Microsoft Internet Explorer</li>
    <li>Opera</li>
    <li>Apple Safari</li>
  <ul>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part5\5.png
List Element

Just like the <ol> tag, the <ul> tag also has a type attribute to set the display list.

Type Attribute

By default the default browser, an unordered list is usually displayed by using a black circle as a list marker. By using the type attribute, we can replace this character with several other available characters. The values of the type attribute for the unordered list are as follows:

  • type = “disc”, using black circles as list markers, this is the default choice if the type attribute is not written.
  • type = “circle”, using a black circle (with the contents of a white circle) as a list marker.
  • type = “square”, using the black box as a list marker.

Following is an example of using the type attribute for an unordered list:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> Learning Unordered List </title>
</head>
<body>
   <p> Types of web browser applications: </p>
  <ul type="square">
    <li>Google Chrome</li>
    <li>Mozilla Firefox</li>
    <li>Microsoft Internet Explorer</li>
    <li>Opera</li>
    <li>Apple Safari</li>
  <ul>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part5\6.png
List Element

Unlike the type attribute for an ordered list, using the type attribute for an unordered list is no longer recommended (deprecated), even in HTML5.

To get the same effect, we can use the CSS property: list-style-type, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> Learning Unordered List </title>
</head>
<body>
   <p> Types of web browser applications: </p>
  <ul style="list-style-type:circle">
    <li>Google Chrome</li>
    <li>Mozilla Firefox</li>
    <li>Microsoft Internet Explorer</li>
    <li>Opera</li>
    <li>Apple Safari</li>
  <ul>
</body>
</html>

In addition to using characters provided by HTML, we can also replace these characters with images, or even not use characters at all. This method is often used to create structures such as navigation menus.

Just like an ordered list, we can also create a nested list structure with an unordered list.

Create a navigation menu

As a complement to the discussion on the list, I will show you how to use an unordered list to create a navigation menu that generally exists on a site. Navigation menus are menus that generally consist of home, articles, blogs, contact us, about us, etc.

Here is an example of creating a navigation menu structure that is often used:

index.html

<! DOCTYPE html>
<html>
<head>
   <meta charset = "UTF-8">
   <title> Creating a Navigation Menu </title>
</head>
<body>
   <ul>
     <li><a href="home.html">Home </a></li>
     <li><a href="sign_up.html">Registration</a></li>
     <li><a href="blog.html">Blog</a></li>
     <li><a href="about_us.html">About Us</a></li>
   </ul>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part5\7.png
List Element

Notice that I inserted the link as a menu from the list above.

If you ask why it doesn’t look like the general menu on the internet, this is because we haven’t changed the display effect of the list. With a little CSS code, the list can be ‘transformed’ into a ‘stunning’ navigation menu, like the following example:

index.html

<! DOCTYPE html>
<html>
<head>
   <meta charset = "UTF-8">
   <title> Creating a Navigation Menu </title>
	<style>
	  ul {
		list-style: none;
		margin: 0;
		padding: 0;
	  }
	  ul li {
		float: left;
	  }
	  ul a {
		text-decoration: none;
		color: black;
		padding: 10px 20px;
		height: 20px;
		display: block;
		background-color: #C2C2C2;
	  }
	  ul a:hover {
		color: white;
		background-color: #838181;
	  }
	  </style>
</head>
<body>
   <ul>
     <li><a href="home.html">Home </a></li>
     <li><a href="sign_up.html">Registration</a></li>
     <li><a href="blog.html">Blog</a></li>
     <li><a href="about_us.html">About Us</a></li>
   </ul>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part5\8.png
List Element

You can notice that the HTML code for the two menu views is exactly the same. We just change the style from CSS. With a solid HTML structure, menus like this can be easily created and modified as desired (without changing the HTML code).

Description List

The third type of list available in HTML is the description list. This type of list is used for list structures such as ‘dictionaries’, i.e. lists that have titles and their descriptions. This type of list is not used very often.

To create a description list, the entire list must be within the <dl> and </dl> tag pairs.

For each title description or section, we use the <dt> tag. As for the explanation part, we use the <dd> tag.

To make it easier to remember, the <dl> tab stands for ‘description list’, the <dt> tag stands for ‘data term’, and the <dd> tag stands for ‘data description’.

Here is an example of using the description list:

index.html

<! DOCTYPE html>
<html>
<head>
   <meta charset = "UTF-8">
   <title> Learning Description List </title>
</head>
<body>
	<p>Terms in networking:</p>
	<dl>
	<dt>CDMA</dt>
		<dd>Code Division Multiple Access, a cellular technology 
		digital using spread-spectrum techniques.</dd>
	<dt>EDGE</dt>
		<dd>Enhanced Data rates for GSM Evolution is technology 
		evolution of GSM and IS-136.</dd>
	<dt>GPRS</dt>
		<dd>The General Packet Radio Service, is a technology 
		which enables faster data sending and receiving compared 
		by using Circuit Switch Data or CSD technology</dd>
	<dt>GSM</dt>
		<dd>Global System for Mobile Communication, is a technology 
		cellular communication that is digital.</dd>
	</dl>
</body>
</html>
List Element

As you can see, the web browser formats the display from the description list where the annotation section will indent some spaces on the left side.

After understanding how to create a list in HTML, in the next chapter we will go into how to display images in HTML. Next: Image Related Element.

HTML Tutorial List

  1. Learn HTML For Beginner (Part 1 : Introduction HTML)
  2. Learn HTML For Beginner (Part 2 : Basic Structure of HTML)
  3. Learn HTML For Beginner (Part 3 : Head Element)
  4. Learn HTML For Beginner (Part 4 : Text Formatting Element)
  5. Learn HTML For Beginner (Part 5 : List Element)
  6. Learn HTML For Beginner (Part 6 : Image Related Element)
  7. Learn HTML For Beginner (Part 7 : Audio dan Video Element)
  8. Learn HTML For Beginner (Part 8 : Table Element)
  9. Learn HTML For Beginner (Part 9 : Form Element
  10. Learn HTML For Beginner (Part 10 : HTML5 Form Element)
  11. Learn HTML For Beginner (Part 11 : Embed, Object dan Iframe Element)
  12. Learn HTML For Beginner (Part 12 : HTML5 Canvas Element)
  13. Learn HTML For Beginner (Part 13 : Scalable Vector Graphics (SVG))
  14. Learn HTML For Beginner (Part 14 : HTML5 Semantic Tag (Layout))

What do you think?

Comments

Leave a Reply

4 Pings & Trackbacks

  1. Pingback:

  2. Pingback:

  3. Pingback:

  4. Pingback:

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments

Learn HTML For Beginner (Part 4: Text Formatting Element)

Learn HTML For Beginner (Part 6: Image Related Element)