HTML Unordered List Lab

Introduction

The ul tag in HTML is used to create an unordered list where the items are typically rendered as a bulleted list. This lab will guide you on how to create an unordered list using HTML and provides examples of ul tag syntax and usage.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") subgraph Lab Skills html/basic_elems -.-> lab-70875{{"`HTML Unordered List`"}} html/head_elems -.-> lab-70875{{"`HTML Unordered List`"}} html/lists_desc -.-> lab-70875{{"`HTML Unordered List`"}} end

Setup the HTML Document Structure

Create an index.html file in a new project folder and open the file in a code editor.

Create the basic structure of an HTML document by adding html, head, and body tags. Inside the head tag, add title tag and set the document title to "HTML Unordered List Lab".

<!doctype html>
<html>
  <head>
    <title>HTML Unordered List Lab</title>
  </head>
  <body>
    <!-- Add content here -->
  </body>
</html>

Create an Unordered List Using `ul` tag

Inside the body tag, create an unordered list using the ul tag. To add list items, use the li tag inside the ul tag.

<ul>
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Add Attributes to the `ul` Tag

The ul tag does not have any specific attributes, but it supports global and event attributes. Here's an example of adding the class attribute to the ul tag.

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Apply CSS Style to the `ul` Tag

To style the ul tag, you can use CSS. In the following example, we are setting list-style-type to 'square' and adding margins.

<style>
  ul {
    list-style-type: square;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
  }
</style>

<ul class="my-list">
  <li>This is the first item in the list</li>
  <li>This is the second item in the list</li>
  <li>This is the third item in the list</li>
</ul>

Nesting Unordered Lists

You can nest an unordered list inside another unordered list by placing another <ul> tag inside an <li> tag. Here is an example of a nested unordered list.

<ul>
  <li>This is the first item in the parent list</li>
  <li>
    This is the second item in the parent list
    <ul>
      <li>This is a nested item</li>
      <li>This is another nested item</li>
    </ul>
  </li>
  <li>This is the third item in the parent list</li>
</ul>

Summary

In this lab, you have learned how to create an unordered list using the ul tag in HTML. You also learned how to add attributes and CSS styles to the ul tag. Remember that the ul tag is used to create a bullet list of items. The ul tag requires the start and end tag, and the list items should be added using the li tag inside the ul tag. You can nest an unordered list inside another unordered list by placing another ul tag inside an li tag.

HTML Unordered List

Introduction

Skills Graph

Setup the HTML Document Structure

Create an Unordered List Using ul tag

Add Attributes to the ul Tag

Apply CSS Style to the ul Tag

Nesting Unordered Lists

Summary

Other HTML Tutorials you may like

Create an Unordered List Using `ul` tag

Add Attributes to the `ul` Tag

Apply CSS Style to the `ul` Tag