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.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 100% completion rate. It has received a 100% positive review rate from learners.

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.