HTML-Lists
HTML_Lists
LEARNING OBJECTIVE
• To know what is List in HTML & List Tags .
• To differentiate the types of lists.
• To use and analyze the List Tags in webpage.
HTML_Lists
Starter:
Can you name any tag that you’ve used before?"
How confident do you feel about writing HTML code so far?
HTML_Lists
HTML Lists:
HTML lists allow web developers to group a set of related
items in lists.
Types of List in HTML:
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
The list items will be marked with numbers by default:
HTML_Lists
<html>
<title>Learning HTML</title>
MUST TASK
<body>
<h1>HTML Lesson 02</h1>
<P style="font-size:30px">Hey Cuties! Add your text here!</br> you can use the font size:
style="font-size:30px" </p>
<p style="font-size:30px"> we have learnt so far:</p>
<ul style="font-size:30px"> Think-Aloud Strategy:
<li>HTML Introduction</li>
<li>Heading and Paragraph</li> As you write code, verbalize your thought
<li>Attributes of Heading and Paragraph</li> process:
<li>Lists</li>
</ul>
"First, I’m using <ul> because I want a bullet-
point list. I need to remember to close the list
</body> with </ul> after adding all items. Each item is
</html>
wrapped in <li> tags..."
HTML_Lists
Activity:
Group 1 Group 2 Group 3
In the below code list down your In the below code list down your In the below code list down your
most favorite places to visit in most favorite places to visit in most favorite places to visit in
UAE using Unordered List. UAE using Ordered List. UAE using Unordered List with
<html> <html> type=”Square”.
<title>Learning HTML</title> <title>Learning HTML</title> <html>
<body> <body> <title>Learning HTML</title>
<body>
<h1>HTML Lesson 02</h1> <h1>HTML Lesson 02</h1>
<P style="font-size:30px">Hey <P style="font-size:30px">Hey <h1>HTML Lesson 02</h1>
Cuties! Add your text here!</br> you Cuties! Add your text here!</br> you <P style="font-size:30px">Hey
can use the font size: style="font- can use the font size: style="font- Cuties! Add your text here!</br> you
size:30px" </p> size:30px" </p> can use the font size: style="font-
<p style="font-size:30px"> we have <p style="font-size:30px"> we have size:30px" </p>
learnt so far:</p> learnt so far:</p> <p style="font-size:30px"> we have
learnt so far:</p>
</body> </body>
</html> </html> </body>
Extended Task </html>
Research, how to change the type of ordered and ordered list.
Change the type of the of your respective group.
HTML_Lists
Plenary:
HTML_Lists
PLENARY:
1) Tag for unordered List is__________.
2) There are _____________ types of List in HTML.
3) List can be added in any part of the webpage. (T/F)
HTML_Lists
SUCCESS CRITERIA
• I can create ordered and unordered lists using HTML tags
(<ol>, <ul>, <li>).
• I know how to reflect on my learning and identify areas of
strength and improvement in writing HTML code.
• I use metacognitive strategies like thinking aloud and self-
reflection to monitor and improve my coding process.
