HTML Lists: HTML Web Development Tutorial Series Part 8

html lists

HTML Lists

In this lesson, we’ll learn how to create a few types of html lists. The two most common lists are ordered (numbered) and unordered (bullet) lists. Html lists can be used in quite a few ways to create some really unique elements. It is very common for a website’s main navigation menu to be created with a list element. Let’s start off this lesson with a simple ordered list. We are going to use a few attributes in this lesson as well, including style, type, and list-style-type. See the images below.

index.html Example 1: Ordered List

ordered list html

Displayed Page Example 1: Ordered List

ordered list display

The ordered list is opened with the <ol> tag. Nested inside of the ordered list are list items (<li>List Item</li>). Each list item that you create will add another numbered item to our list. We have four as you can see in the Displayed Page image. The list is finished with the closing ol tag (</ol>). Notice the type=”1″ attribute inside of the opening ol tag. This defines the marker type for the list items. By default, an ordered list is numbered, 1, 2, 3, and so on, so our list would have displayed with the same type of numbering even if we didn’t add this type attribute. See the list below for other values that could be used for the type attribute.

Other Values For The Type Attribute: Marker Type

type=”A”
– List items will be numbered with UPPERCASE LETTERS
type=”a”
– List items will be numbered with lowercase letters
type=”I”
– List items will be numbered with UPPERCASE ROMAN NUMERALS
type=”i”
– List items will be numbered with lowercase roman numerals

Try out the different values for the type attribute to see how they affect our list. The unordered html list is almost a mirror image of the ordered list. See the next set of images for an example.

index.html Example 2: Unordered List

unordered lists html

Displayed Page Example 2: Unordered List

unordered lists display

There are two main differences between ordered and unordered lists. First, is that we use <ul> tags instead of <ol> tags, and second is how we add marker type style. An unordered list takes the style attribute in the opening tag and uses the CSS property list-style-type followed by the marker type value we want to use. This type of CSS code we are using is known as INLINE STYLING because we are adding it right inside of our html tags. There are three ways to add CSS to your html. To learn more about this, click HERE. You should also take notice of the indenting of the list items. It is considered good coding practice to add two spaces before each list item. Many coders will add a tab here for their indentation and that can cause problems down the road. Looking back at our new index.html code, we have used the value disc for the list-style-type. Just like in the ordered list example, this is default, and we could have left out the CSS code. An unordered list will be bulleted by default (small round black dots). Each list item we create will add another bulleted list item to our list. Refer to Displayed Page 2. Besides disc, there are a few more values that could be used for list marker style, see the list below.

circle
– List items will be marked with a circle. Similar to a bullet, but not colored in
square
– List items will be marked with a square
none
– List items will not be marked. This is used often in a navigation menu, to remove the bullets from the buttons

The next list that we are going to create is a description list. This type of list is used to display a list of terms with a description for each. See the example below.

index.html Example 3: Description List

description list html

Displayed Page Example 3: Description List

description list display

A description list contains three main sets of tags. They are the <dl> (description list) tags, the <dt> (description term) tags, and the <dd> (description definition) tags. The tags are pretty self-explanatory, but in case there is any confusion, we open the description list with the dl tag; the dt tags are for the terms you want to define, and the dd tags are for the definitions. Finally, we close the definition list.

The last list that we are going to learn about in this lesson is the nested list. A nested list is simply a list inside of a list. Lists can contain any other html elements inside of them including, another list, images, links, and so on. See the final set of images below, for an example of a nested list.

index.html Example 4: Nested List

nested list html

Displayed Page Example 4: Nested List

nested lists display

Our nested list example shows a list nested inside of a list. You can think of it as a sub-list. The example shows what could be an ingredient or shopping list. There are three main items contained in our “main list“, which are Bread, Meat, and Eggs. Our “sub-list” (nested list) is like an extension of the Meat item. The nested list items are Ground Beef and Boneless Chicken. This example is meant to be very simplified. You can create very intricate nested lists that contain all sorts of html elements. For example, a table of contents for an e-book could have main chapters (main list) and sub-chapters (nested lists). You’re only limited to how creative you can be when it comes to nested lists.

That is it for html lists for this lesson. When you learn CSS, there are many more things that can be done included turning an unordered list into a horizontal navigation menu, and much much more. NOTE: I have included html comments in the source code for this lesson to help you separate the lists. Html comments are ignored by the browser and will not display when you run the web page. They are there solely for the coder’s eyes only. An html comment looks like this: <!– Put your comment here –>. There will be a short lesson on html comments in the near future. Thanks for reading, I’ll see you next time.

index.html Source Code


<!doctype html>
<html lang="en-US">
<head>
<title>HTML Lists</title>
</head>
<body>

<!-- ORDERED LIST BELOW -->
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Javascript</li>
</ol>

<!-- UNORDERED LIST BELOW -->
<ul style="list-style-type: disc">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Javascript</li>
</ul>

<!-- DESCRIPTION LIST BELOW -->
<dl>
<dt>HTML (Hypertext Markup Language)</dt>
<dd>- a standardized system for tagging text files to describe font, color, graphic,
and hyperlink effects on web pages.</dd>
<dt>CSS (Cascading Style Sheets)</dt>
<dd>- a style sheet language used to style and design a document written in a markup
language like HTML.</dd>
<dt>PHP (Hypertext Preprocessor)</dt>
<dd>- a popular open-source general purpose web development scriping language. PHP can
be directly embedded in HTML.
</dd>
<dt>Javascript</dt>
<dd>- an object-oriented programming language. Commonly used to create interactive
effects on web pages.</dd>
</dl>

<!-- NESTED LIST BELOW -->
<ul>
<li>Bread</li>
<li>Meat
<ul>
<li>Ground Beef</li>
<li>Boneless Chicken</li>
</ul>
</li>
<li>Eggs</li>
</ul>

</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: