Objective:
- Understand the concept of HTML tags and elements.
- Learn the difference between opening and closing tags.
- Familiarize with commonly used HTML tags for structuring content (e.g., headings, paragraphs, lists).
- Recognize self-closing tags like
<img>,<br>, etc.
Introduction:
HTML is a markup language used to structure content on the web. HTML tags are used to create and format content. Tags are written within angle brackets (< >) and can be paired, with an opening tag and a closing tag. Some tags are self-closing.
1. HTML Tags:
HTML tags are essential for creating any web page. These tags indicate how content should be formatted. A tag consists of:
- Opening Tag: Marks the beginning of an element (e.g.,
<h1>). - Closing Tag: Marks the end of an element (e.g.,
</h1>). - Self-Closing Tags: Do not need a closing tag (e.g.,
<img />).
Example:
<h1>Welcome to HTML Learning!</h1> <p>This is a paragraph of text.</p>
<h1>: The opening tag for a top-level heading.</h1>: The closing tag for the heading.<p>: The opening tag for a paragraph.</p>: The closing tag for the paragraph.
2. Common HTML Tags:
Here are a few commonly used HTML tags:
- Headings:
<h1>,<h2>,<h3>, etc. - Paragraph:
<p> - Links:
<a href="URL"> - Images:
<img src="image.jpg" alt="Image description" /> - Lists:
<ul>for unordered lists,<ol>for ordered lists, and<li>for list items.
Example of a List:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
3. Self-Closing Tags:
Some tags don’t require a closing counterpart and are self-contained. Common self-closing tags include:
<img />: Embeds an image.<br />: Inserts a line break.<hr />: Creates a horizontal line.
Example:
<img src="image.jpg" alt="A sample image" /> <br /> <p>Some text below the image.</p>
4. Nesting HTML Elements:
HTML tags can be nested, meaning you can place tags inside other tags. Proper nesting ensures that your content is correctly structured.
Example:
<div>
<h2>This is a heading inside a div.</h2>
<p>Here is a paragraph inside the div.</p>
</div>
Activity:
- Write a simple HTML page that contains:
- A heading
<h1>and subheading<h2>. - A paragraph
<p>and a list<ul>. - An image using
<img />.
- A heading
- Use the
<br />tag to break the line between elements. - Practice nesting by placing a list inside a div or a paragraph inside a section.
Example Activity Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tags Example</title>
</head>
<body>
<h1>My HTML Page</h1>
<h2>Subheading Example</h2>
<p>This is a simple paragraph.</p>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<img src="image.jpg" alt="Sample image" />
<br />
<p>Text after the image.</p>
</body>
</html>
Summary:
- HTML tags are the building blocks of web pages.
- Tags can be opening and closing pairs or self-closing.
- Understanding common HTML tags like
<h1>,<p>,<ul>, and<img>is crucial for structuring web content. - Nesting HTML tags allows for better organization and layout of content.
Choice-Based Questions:
- Which of the following is the correct syntax for an image tag?
- a)
<img src="image.jpg"> - b)
<img href="image.jpg" /> - c)
<img src="image.jpg" alt="image description" /> - d)
<img alt="image description" src="image.jpg" />
- c)
<img src="image.jpg" alt="image description" />
- a)
- What is the purpose of the
<br />tag in HTML?- a) Creates a paragraph break.
- b) Adds a line break within text.
- c) Creates a border around text.
- d) Creates a link.
- b) Adds a line break within text.
- What is the function of the
<ul>tag?- a) To create a paragraph.
- b) To create an ordered list.
- c) To create an unordered list.
- d) To link a webpage.
- c) To create an unordered list.
Interactive Q&A (Hide/Show Option):
- What is an HTML tag?
- [Click to Show Answer]
- An HTML tag is a keyword surrounded by angle brackets (
< >) that tells the browser how to display or interpret the content enclosed by the tag. Tags typically come in pairs: an opening tag and a closing tag.
- An HTML tag is a keyword surrounded by angle brackets (
- [Click to Show Answer]
- How do you create a heading in HTML?
- [Click to Show Answer]
- To create a heading, use the
<h1>to<h6>tags, with<h1>being the largest and<h6>the smallest. Example:<h1>This is a heading</h1>.
- To create a heading, use the
- [Click to Show Answer]
Final Notes:
- Hands-On Practice: Make sure to test the different tags and elements you’ve learned by creating your HTML files.
