HTML Lesson 2

HTML - Structured Tags

Structured Tags

• H1 - H6 Tags

• P tags

• Br Tags

• Hr Tags

• Div

• Ul and Li Tags

• Ol and Li Tags

Heading Tag

<h1> </h1>

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading and the biggest. <h6> defines the least important heading which is the smallest.

​

​Heading Tag example:

Multiple Choice

Which heading tag displays the largest text?

• <h6>

• <h5>

• <h1>

• <h3>

• <h2>

Labeling

Place the heading tags in its proper location.

Drag labels to their correct position on the image

<h2>

</h5>

<h5>

</h3>

<h3>

<h1>

</h2>

</h1>

Paragraphs Tag

<p> </p>

A paragraph always starts on a new line, and browsers automatically add some space (margin) before and after a paragraph.

Line Break Tag

The <br> tag inserts a single line break.

The <br> tag is useful for writing addresses or other form of text.

The <br> tag is an empty tag which means that it has no end tag.

<br />

Multiple Choice

Does the line break tag "<br />" have a closing tag?

• Yes

• No

​Differences Between <br /> and the <p> </p> Tags

Multiple Select

Select the two tags that breaks the line.

• <p>

• <hr />

• <br />

• <dv>

Horizontal Rule Tag

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

<hr />

​Example of an Ordered and Unordered List

Unordered List Tags

<ul> </ul>

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default.

Dropdown

Create an Unordered list tag

<​

Select answer

>

<​

Select answer

>list 1 <​

Select answer

>

<​li> List 2 <​

Select answer

>

<​

Select answer

>

Ordered List Tags

<ol> </ol>

An ordered list starts with the <ol> tag. Each listed item starts with the <li> tag.

The list items will be marked with numbers by default.

Dropdown

Create an ordered list tag

<​

Select answer

>

<​

Select answer

>list 1 <​

Select answer

>

<​li> List 2 <​

Select answer

>

<​

Select answer

>

Open Ended

Utilize this image and write HTML code matching this Image.

Remember:

<h1> </h1> - for heading.

<ul> </ul> - unordered list

<ol> </ol> - ordered list

<li> </li> - lists

Classwork

​Create an unordered and ordered list.

• Open Visual Studio Code

• Name your file Classwork-2.html

• Start with the basics <!DOCTYPE html>

• Create a random list using the <ol>, <ul> & <li> tags

• Classwork will be graded today