1. Basic HTML Structure

Description:
This is the foundation of every HTML web page. It defines the document type, contains metadata in the <head> section, and displays visible content in the <body> section.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    Content goes here
</body>
</html>

2. Headings

Description:
Headings organise content into sections and create a hierarchy. <h1> is the most important heading, while <h6> is the least important.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>

3. Paragraphs and Text Formatting

Description:
Paragraph tags create blocks of text. Formatting tags such as bold, italic, and underline help emphasise important information.

<p>This is a paragraph.</p>
<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<strong>Important text</strong>

4. Links

Description:
Links allow users to navigate to other pages, websites, or resources by clicking on text or images.

<a href="https://example.com">Visit Example</a>

5. Images

Description:
The image tag displays pictures on a webpage. The src attribute specifies the image location, while alt provides alternative text if the image cannot be displayed.

<img src="image.jpg" alt="Description">

6. Ordered Lists

Description:
Ordered lists display items in a numbered sequence, useful for instructions or rankings.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

7. Unordered Lists

Description:
Unordered lists display items with bullet points and are useful when the order of items does not matter.

<ul>
    <li>Item A</li>
    <li>Item B</li>
</ul>

8. Tables

Description:
Tables organise data into rows and columns, making information easy to read and compare.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

9. Forms

Description:
Forms collect information from users, such as names, emails, passwords, or survey responses.

<form>
    <label>Name:</label>
    <input type="text">
    <button>Submit</button>
</form>

10. Semantic Elements

Description:
Semantic elements clearly describe the purpose of content, improving accessibility, search engine optimisation, and code readability.

<header>Website Header</header>
<nav>Navigation Menu</nav>
<main>Main Content</main>
<footer>Footer Information</footer>

11. Audio

Description:
The audio element embeds sound files such as music, podcasts, or sound effects into a webpage.

<audio controls>
    <source src="song.mp3">
</audio>

12. Video

Description:
The video element allows users to watch videos directly within a webpage using built-in playback controls.

<video controls width="300">
    <source src="video.mp4">
</video>

13. Common HTML Attributes

Description:
Attributes provide additional information about HTML elements and control their behaviour or appearance.

Attribute	Purpose
id	Unique identifier for an element
class	Groups elements for styling or scripting
href	Specifies a link destination
src	Specifies the source file
alt	Alternative text for images
title	Tool tip text displayed on hover

14. HTML5 Features

Description:
HTML5 introduced new elements that improve structure, interactivity, and multimedia support.

<canvas></canvas>
<section></section>
<article></article>
<aside></aside>
<details></details>
<summary></summary>

15. Best Practices

Description:
Following best practices helps create cleaner, more maintainable, accessible, and professional webpages.

Use semantic tags.
Include alt text for images.
Keep code properly indented.
Validate HTML regularly.
Use lowercase tag names.

16. Mini Projects

Description:
Mini projects help reinforce HTML concepts by applying them in real-world scenarios.

Personal Portfolio Website
Restaurant Menu Page
Login Form
Product Landing Page
Blog Layout
Photo Gallery


