Lesson Outcomes
After completing this lesson, learners will be able to:
- Define HTML tags.
- Identify different types of HTML tags.
- Explain how tags are used to structure content.
- Recognise common HTML tags used in web development.
- Apply HTML tags correctly in code.
Overview
HTML tags are the building blocks used to create web pages. They define how content is structured and displayed in a browser.
Tags are written using angle brackets and are used to:
- Create elements
- Structure content
- Define meaning of content
Understanding HTML tags is essential for writing correct and effective HTML code.
1. What are HTML Tags?
HTML tags are special keywords used to define elements in an HTML document.
They are written inside angle brackets:
<tagname>
Most HTML tags come in pairs:
- Opening tag →
<p> - Closing tag →
</p>
Tags tell the browser how to display content.
2. Types of HTML Tags
There are different types of HTML tags based on how they are used.
2.1 Container Tags
Container tags have both opening and closing tags.
They contain content inside them.
Examples include:
<p>Paragraph</p><h1>Heading</h1><div>Content</div>
2.2 Empty (Self-Closing) Tags
Empty tags do not have closing tags.
They do not contain content.
Examples include:
<img><br><hr>
These tags perform specific functions without enclosing content.
3. Common HTML Tags
HTML provides many tags for different purposes.
3.1 Text Tags
Used to display text content.
Examples:
<h1>to<h6>→ headings<p>→ paragraph<strong>→ bold text<em>→ italic text
3.2 Link Tags
Used to create hyperlinks.
Example:
<a href="https://example.com">Visit</a>3.3 Image Tags
Used to display images.
Example:
<img src="image.jpg" alt="Image">3.4 List Tags
Used to organise content into lists.
Examples:
<ul>→ unordered list<ol>→ ordered list<li>→ list item
3.5 Table Tags
Used to create tables.
Examples:
<table>→ table<tr>→ table row<td>→ table cell<th>→ table header
3.6 Form Tags
Used to collect user input.
Examples:
<form><input><textarea><button>
4. Importance of HTML Tags
HTML tags are important because they:
- Define the structure of a web page
- Help browsers understand content
- Improve readability of code
- Support accessibility
- Enable proper display of information
5. Best Practices for Using Tags
To use HTML tags effectively:
- Always close tags properly
- Use correct tag names
- Maintain proper nesting
- Use semantic tags where possible
Good practices help create clean and error-free code.
Key Notes
- HTML tags are used to define elements.
- Tags are written inside angle brackets.
- Most tags have opening and closing pairs.
- Some tags are self-closing.
- Tags are used to structure content such as text, images, lists, and tables.
- Proper use of tags ensures correct display and functionality.
- Following best practices improves code quality.