Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Basic

0/1

HTML Elements

0/1

HTML Attributes

0/1

HTML Headings

0/1

HTML Paragraphs

0/1

HTML Styles

0/1

HTML Formatting

0/1

HTML Quotation

0/1

HTML Comments

0/1

HTML Colors

0/1

HTML CSS

0/1

HTML Links

0/3

HTML Images

0/3

HTML Favicon

0/1

HTML Page Title

0/1

HTML Tables

0/8

HTML Lists

0/4

HTML Block and Inline

0/1

HTML Div

0/1

HTML classes

0/1

HTML id

0/1

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/1

HTML Layout

0/1

HTML Responsive

0/1

HTML Computer Code

0/1

HTML Semantic

0/1

HTML Style Guide

0/1

HTML Entities

0/1

HTML Symbols

0/1

HTML Emojis

0/1

HTML Charsets

0/1

HTML URL Encode

0/1

HTML vs. XHTML

0/1

HTML Forms

0/6

HTML Graphics

0/2

HTML Media

0/5

HTML APIs

0/5

Text lesson

Unordered Lists

Unordered HTML List

The <ul> tag initiates an unordered list, while each item within the list is designated with the <li> tag.

By default, the list items are represented with small black circles as bullets.

Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Unordered HTML List – Choose List Item Marker

The CSS list-style-type property is employed to specify the appearance of the marker for list items.

It can take on any of the subsequent values:

Value	Description
disc	Configures the list of item marker to a bullet, which is the default setting.
circle	Specifies the marker for list items to be a circle.
square	Designates the marker for list items to be a square
none	The list items will lack markers.

Example – Disc

<ul style=”list-style-type:disc;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example – Circle

<ul style=”list-style-type:circle;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example – Square

<ul style=”list-style-type:square;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example – None

<ul style=”list-style-type:none;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Nested HTML Lists

Lists can be structured hierarchically, with one list contained within another (a list inside another list).

Example

<ul>
  <li>Coffee</li>
  <li>Tea
  <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Remember: Within a list item (<li>), you can include another list, as well as other HTML elements such as images, links, and more.

Horizontal List with CSS

HTML lists offer versatility in styling through CSS.

A common approach involves styling a list horizontally, often utilized to craft navigation menus.

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href=”#home”>Home</a></li>
  <li><a href=”#news”>News</a></li>
  <li><a href=”#contact”>Contact</a></li>
  <li><a href=”#about”>About</a></li>
</ul>

</body>
</html>

Chapter Summary

Utilize the HTML <ul> element to establish an unordered list.
Employ the CSS list-style-type property to specify the marker for list items.
Utilize the HTML <li> element to designate individual list items.
Lists can be organized hierarchically.
List items have the flexibility to encompass additional HTML elements.
Implement the CSS property float:left to horizontally display a list.

Click to Learn