.png "HTML(Hyper Text Markup Language) Full Course For Beginners Lesson No 2.0")
Lesson No:02-Learning HTML Tags
Understanding Tags
In this lesson, we'll take a closer look at HTML tags and their functionalities. Understanding these tags in depth is crucial for building well-structured and visually appealing webpages.
What are HTML Tags?
HTML tags are like instructions that tell web browsers how to display content. They are enclosed in angle brackets `< >` and typically come in pairs: an opening tag and a closing tag. The content to be affected by the tag is placed between these two tags.
Commonly Used HTML Tags:
Let's explore some commonly used HTML tags and their functionalities in detail:
1. Heading Tags (`<h1>` to `<h6>`):
- These tags are used to define headings and subheadings on a webpage.
- `<h1>` is the highest level, representing the main heading, while `<h6>` is the lowest level, representing the least important heading.
2. Paragraph Tag (`<p>`):
- This tag defines a paragraph of text.
- Paragraphs are block-level elements, meaning they start on a new line and typically have some space above and below them.
3. Anchor Tag (`<a>`):
- The anchor tag is used to create hyperlinks, allowing users to navigate to other webpages or resources.
- It requires an `href` attribute, which specifies the URL of the destination.
4. Image Tag (`<img>`):
- This tag embeds images into webpages.
- It requires a `src` attribute, which specifies the path to the image file, and an `alt` attribute, which provides alternative text for screen readers and if the image fails to load.
5. List Tags (`<ul>`, `<ol>`, `<li>`):
- `<ul>` creates an unordered list, typically displayed with bullet points.
- `<ol>` creates an ordered list, typically displayed with numbers or letters.
- `<li>` defines individual list items within `<ul>` or `<ol>`.
6. Division Tag (`<div>`):
- The division tag is a generic container for grouping and styling content.
- It's often used in combination with CSS (Cascading Style Sheets) for layout and formatting purposes.
Example: Using HTML Tags
Let's apply what we've learned in a practical example:
```html
<!DOCTYPE html>
<html>
<head>
<title>Exploring HTML Tags</title>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph of text.</p>
<a href="https://www.example.com">Visit Example Website</a>
<img src="image.jpg" alt="Description of image">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<div style="background-color: lightgray; padding: 10px;">
<p>This is a div container.</p>
</div>
</body>
</html>
```
Explanation
HTML tags serve as the building blocks of webpages, allowing developers to structure and format content effectively. By understanding the purpose and usage of each tag, you gain the ability to create dynamic and engaging web experiences for users.
Exercise
Practice using different HTML tags to create various elements on a webpage. Experiment with different attributes and observe how they affect the appearance and behavior of the content. Additionally, explore the use of CSS to style HTML elements further.
.png)
