LAST UPDATED: August 25, 2025

HTML Hello World

Hello Everyone!

In this tutorial, we will learn how to write a basic Hello World program in HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World! Welcome to Tutorials!</h1>
</body>
</html>

Explanation:

Let's break down the HTML code above.

1. `<!DOCTYPE html>`

This declaration defines the document type and version of HTML. It helps browsers render the page correctly.

2. HTML Structure

The HTML page has the following main sections:

<html>: Root element of the document.
<head>: Contains metadata like title and character encoding.
<body>: Contains visible content of the page.

3. Displaying Content

The <h1> tag displays the main heading on the webpage. Text inside <h1> will be shown in large bold font.

4. Running the Code

Save the code as index.html and open it in a web browser to see the output.

Introduction to HTML

1.1 What is HTML?

HTML (HyperText Markup Language) is the standard language for creating webpages. It structures content such as text, images, links, tables, forms, and multimedia on the web.

<!DOCTYPE html>
<html>
<body>

<h1>Hello World!</h1>

<p>This is a simple HTML page.</p>

</body>
</html>

Task: Create a basic HTML page that displays your name and a welcome message.

1.2 Features of HTML

Markup language for structuring web content
Works in all modern browsers
Supports text, images, links, tables, forms, and multimedia
Easy to learn and widely used
Integrates with CSS and JavaScript for styling and interactivity

<p>Feature 1: Markup language</p>
<p>Feature 2: Cross-browser support</p>

1.3 HTML Syntax

HTML uses tags enclosed in angle brackets <> to define elements. Basic structure includes:

<!DOCTYPE html> - defines document type
<html> - root element
<head> - metadata and title
<body> - visible page content

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

1.4 HTML in Browser

HTML can be run directly in any modern browser:

Save your HTML file with .html extension
Open it using Chrome, Firefox, Edge, or Safari
Inspect the page using developer tools

<!DOCTYPE html>
<html>
<body>

<h1>Hello Browser!</h1>
<p>This content is displayed in the browser.</p>

</body>
</html>

1.5 Setting up Environment

To start HTML development, you only need a text editor and a browser:

Text editors: VS Code, Sublime Text, Notepad++
Modern browser for preview (Chrome, Firefox, Edge)
Optional: Live server extension in VS Code for instant preview

<!DOCTYPE html>
<html>
<body>

<h1>My Webpage</h1>
<p>This is my first HTML project.</p>
<img src="myphoto.jpg" alt="My Photo">

</body>
</html>

HTML Basic Structure

2.1 HTML Boilerplate

An HTML boilerplate is a basic template used to start a new HTML document. It includes essential tags to structure your webpage correctly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
</head>
<body>

<h1>Welcome to My Webpage</h1>
<p>This is a basic HTML boilerplate example.</p>

</body>
</html>

Task: Create your own HTML boilerplate and add a heading and a paragraph.

2.2 DOCTYPE Declaration

The <!DOCTYPE html> declaration defines the document type and HTML version. It helps browsers render the page correctly and ensures standards compliance.

<!DOCTYPE html>
<html>
<body>

<h1>Hello World!</h1>

</body>
</html>

2.3 <html>, <head>, <body>

The main structure of an HTML page includes:

<html>: Root element that wraps the entire document.
<head>: Contains metadata, links to stylesheets, and the page title.
<body>: Contains all visible content like headings, paragraphs, images, and links.

<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Hello HTML!</h1>
</body>
</html>

Task: Create an HTML file and add all three main tags with sample content inside the body.

2.4 Title & Metadata

The <title> tag sets the page title displayed on the browser tab. Metadata in the <head> provides information about the page like character encoding, viewport settings, and keywords.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Page</title>
</head>

Task: Add a title and viewport metadata to your HTML page and open it in a browser to check the tab title.

HTML Elements & Attributes

HTML elements are the building blocks of web pages. Elements define the structure and content of a webpage, while attributes provide additional information or modify the behavior of elements.

3.1 HTML Elements

An HTML element typically consists of a start tag, content, and an end tag. Elements can represent headings, paragraphs, images, links, etc.

<h1>Welcome to My Website</h1>
<p>This is a paragraph element.</p>
<img src="image.jpg" alt="Sample Image">

Task: Create a page with a heading, paragraph, and image using basic HTML elements.

3.2 HTML Tags

HTML tags are the keywords enclosed in angle brackets <> that define elements. Most elements have an opening and closing tag, while some are self-closing (like <img>).

<!-- Opening and closing tags -->
<p>This is a paragraph.</p>

<!-- Self-closing tag -->
<br> <hr>

Task: Practice writing different types of HTML tags including headings, paragraphs, and line breaks.

3.3 HTML Attributes

Attributes provide extra information about an element. They are included in the opening tag and usually come as name="value" pairs.

<a href="https://example.com" target="_blank">Visit Example</a>
<img src="photo.jpg" alt="My Photo" width="200">

Task: Add attributes to links and images in your HTML page to make them functional and accessible.

3.4 Nested Elements

HTML elements can be nested inside other elements to create complex structures. Nesting should be properly closed in the correct order.

<div>
    <h2>My Nested Elements</h2>
    <p>This paragraph is inside a div.</p>
</div>

Task: Create a nested structure using <div>, headings, and paragraphs to practice proper nesting.

HTML Text Structure

HTML provides several elements to structure and format text on a webpage. The most common are headings, paragraphs, line breaks, and horizontal rules. Using these correctly improves readability and accessibility.

4.1 Headings (h1–h6)

Headings define the titles and sub-titles of sections. There are six levels: <h1> to <h6>. <h1> is the most important, <h6> the least.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>

Task: Create a page using all heading levels and observe their size differences.

4.2 Paragraphs (p)

Paragraphs are blocks of text separated from other content using the <p> tag. They automatically create spacing above and below the text.

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Task: Write three paragraphs about your favorite hobby using the <p> tag.

4.3 Line Breaks & Horizontal Rules

The <br> tag inserts a line break within a paragraph without starting a new paragraph. The <hr> tag creates a horizontal line, often used to separate sections.

<p>Line one<br>Line two</p>
<hr>

Task: Use line breaks and horizontal rules to format a short poem or quote on your webpage.

4.4 Best Practices

Use headings in hierarchical order (h1 → h2 → h3).
Keep paragraphs short for readability.
Use <br> sparingly; prefer paragraphs.
Use <hr> only for separating content sections logically.
Always write semantic HTML for accessibility and SEO.

Mini Project: Create a simple article page with a main heading, multiple subheadings, paragraphs, line breaks, and horizontal rules following best practices.

HTML Text Formatting

HTML provides several tags to format and style text for emphasis, readability, or semantic meaning. We'll explore bold, italic, underline, mark, superscript, subscript, and preformatted text.

5.1 Bold & Strong

Use <b> to make text bold for stylistic purposes, and <strong> to indicate important text semantically.

<p>This is <b>bold</b> text.</p>
<p>This is <strong>strong</strong> text.</p>

Task: Highlight important points in a paragraph using both <b> and <strong>.

5.2 Italic & Emphasis

Use <i> for italic text and <em> to emphasize text semantically.

<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>

Task: Emphasize keywords in a paragraph using <em>.

5.3 Underline & Mark

Use <u> to underline text and <mark> to highlight text.

<p>This is <u>underlined</u> text.</p>
<p>This is <mark>highlighted</mark> text.</p>

Task: Highlight important sentences in a paragraph using <mark> and underline titles with <u>.

5.4 Superscript & Subscript

Superscript (<sup>) raises text above the baseline, and subscript (<sub>) lowers text below the baseline.

H<sub>2</sub>O  <!-- Water molecule -->
x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>

Task: Write chemical formulas and mathematical equations using <sub> and <sup>.

5.5 Code & Preformatted Text

Use <code> for inline code snippets and <pre> to preserve whitespace and formatting for blocks of text.

<p>Use <code>console.log()</code> in JavaScript.</p>

<pre>
function greet() {
    console.log("Hello World!");
}
</pre>

Mini Project: Create a simple page that demonstrates all these text formatting options in a paragraph, a sentence, and a small code block.

HTML Lists

HTML provides different types of lists to display content in an organized way. We have ordered lists, unordered lists, description lists, and nested lists.

6.1 Ordered List (`<ol>`)

Ordered lists display items in a numbered sequence. Each item is placed inside a <li> tag.

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Task: Create an ordered list of your top 5 favorite movies or books.

6.2 Unordered List (`<ul>`)

Unordered lists display items with bullets instead of numbers.

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

Task: Create an unordered list of your favorite foods or hobbies.

6.3 List Item (`<li>`)

Each item in an ordered or unordered list is wrapped in a <li> tag.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Task: Add three list items describing your daily routine.

6.4 Description List (`<dl>, <dt>, <dd>`)

Description lists are used to describe terms. <dt> defines a term, and <dd> describes it.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Task: Create a description list of 3 programming languages with a short description for each.

6.5 Nested Lists

Lists can be nested inside other lists to create hierarchical structures.

<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Spinach</li>
        </ul>
    </li>
</ul>

Mini Project: Build a nested list of categories and subcategories for a personal collection (like books, movies, or games).

HTML Links & Anchors

Links allow users to navigate between web pages or jump to specific sections within the same page. The <a> tag is used to create hyperlinks in HTML.

7.1 Basic Links (`<a href="URL">`)

A basic link points to another web page or resource using the href attribute.

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

Task: Create a link to your favorite website.

7.2 Opening Links in New Tab (`target="_blank"`)

The target="_blank" attribute opens the link in a new browser tab.

<a href="https://www.example.com" target="_blank">Open Example in New Tab</a>

Task: Make a link open in a new tab.

7.3 Anchor Links (Jump to Section)

Anchor links allow users to jump to a specific section within the same page. Use the id attribute on the target element and reference it in the link's href.

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>
<p>This is the content of Section 1.</p>

Task: Create an anchor link to jump to a heading within your page.

7.4 Link Attributes (`target, download, rel`)

Common attributes for links:

target="_blank": Opens the link in a new tab.
download: Prompts the browser to download the linked file.
rel="noopener noreferrer": Security and performance best practices when opening links in new tabs.

<a href="resume.pdf" download>Download Resume</a>
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

Task: Add a link to download a file and another link that opens in a new tab safely.

7.5 Best Practices

Always use descriptive text for links.
Use rel="noopener noreferrer" when using target="_blank".
Validate URLs to avoid broken links.
Keep anchor links accessible for keyboard navigation.

Mini Project: Table of Contents Navigation

Create a page with multiple sections and a navigation menu at the top using anchor links. Users should be able to click a menu item to jump to the corresponding section.

<nav>
  <a href="#intro">Introduction</a>
  <a href="#features">Features</a>
  <a href="#contact">Contact</a>
</nav>

<h2 id="intro">Introduction</h2>
<p>Welcome to our page.</p>

<h2 id="features">Features</h2>
<p>List of features here.</p>

<h2 id="contact">Contact</h2>
<p>Contact info here.</p>

HTML Images

Images make web pages visually appealing and help convey information. The <img> tag is used to embed images in HTML.

8.1 Image Tag (`<img>`)

The <img> tag embeds an image in a web page. It is an empty tag and does not have a closing tag.

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

Task: Add an image to your HTML page using the <img> tag.

8.2 Image Attributes (`src, alt, width, height`)

Important attributes for images:

src: Path to the image file.
alt: Text shown if image cannot load, also helps accessibility.
width & height: Specify image dimensions (pixels or %).

<img src="logo.png" alt="Company Logo" width="200" height="100">

Task: Add an image with alt text and custom width & height.

8.3 Image Linking

Images can also act as clickable links using the <a> tag.

<a href="https://www.example.com">
    <img src="image.jpg" alt="Clickable Image">
</a>

Task: Make an image clickable and link it to another website.

8.4 Responsive Images

To make images adapt to different screen sizes, use CSS properties like max-width and height: auto.

<img src="image.jpg" alt="Responsive Image" style="max-width:100%; height:auto;">

Task: Make an image responsive so it scales on different devices.

8.5 Figure & Figcaption

The <figure> element groups an image with a caption using <figcaption>.

<figure>
    <img src="landscape.jpg" alt="Beautiful Landscape">
    <figcaption>A breathtaking view of mountains</figcaption>
</figure>

Task: Add an image with a caption using <figure> and <figcaption>.

Mini Project: Image Gallery

Create a simple image gallery with multiple images, each having alt text and captions. Make the images responsive so they display nicely on different screen sizes.

<figure>
    <img src="img1.jpg" alt="Sunset" style="max-width:100%; height:auto;">
    <figcaption>Sunset over the hills</figcaption>
</figure>

<figure>
    <img src="img2.jpg" alt="Beach" style="max-width:100%; height:auto;">
    <figcaption>Relaxing beach view</figcaption>
</figure>

HTML Tables

Tables are used to display data in rows and columns on a web page. HTML provides tags like <table>, <tr>, <td>, and <th> to structure tables.

9.1 table, tr, td, th

Basic structure of a table:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>Delhi</td>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
        <td>Mumbai</td>
    </tr>
</table>

Task: Create a table with at least 3 rows and 3 columns.

9.2 Table Borders & Styling

Tables can be styled using CSS to add borders, padding, and colors.

<table border="1" style="border-collapse:collapse; width:50%;">
    <tr style="background-color:#f2f2f2;">
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>Delhi</td>
    </tr>
</table>

Task: Style your table with different background colors and borders.

9.3 Rowspan & Colspan

rowspan merges cells vertically, and colspan merges cells horizontally.

<table border="1">
    <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">Marks</th>
    </tr>
    <tr>
        <th>Math</th>
        <th>Science</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>90</td>
        <td>85</td>
    </tr>
</table>

Task: Use rowspan and colspan to merge cells in your table.

9.4 Thead, Tbody, Tfoot

Use <thead> for the header, <tbody> for body rows, and <tfoot> for footer.

<table border="1">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Pen</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Notebook</td>
            <td>50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>60</td>
        </tr>
    </tfoot>
</table>

Task: Structure your table with thead, tbody, and tfoot.

9.5 Responsive Tables

To make tables responsive, wrap them in a container with overflow-x:auto; so they scroll horizontally on small screens.

<div style="overflow-x:auto;">
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>Delhi</td>
        </tr>
        <tr>
            <td>Alice</td>
            <td>30</td>
            <td>Mumbai</td>
        </tr>
    </table>
</div>

Task: Make your table responsive so it fits smaller screens.

Mini Project: Student Marks Table

Create a table to display student names, subjects, and marks. Include a header, footer, and use rowspan or colspan where needed. Style the table with borders and make it responsive.

<div style="overflow-x:auto;">
    <table border="1" style="border-collapse:collapse; width:100%;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Math</th>
                <th>Science</th>
                <th>English</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>85</td>
                <td>90</td>
                <td>78</td>
            </tr>
            <tr>
                <td>Alice</td>
                <td>92</td>
                <td>88</td>
                <td>95</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Average</td>
                <td>88.5</td>
                <td>89</td>
                <td>86.5</td>
            </tr>
        </tfoot>
    </table>
</div>

HTML Forms

Forms are used to collect user input on web pages. HTML provides the <form> tag and various input types like text, email, password, radio, checkbox, textarea, and select dropdowns to create interactive forms.

10.1 <form> Tag

The <form> tag wraps input fields and buttons. Forms can submit data to a server using the action and method attributes.

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <button type="submit">Submit</button>
</form>

Task: Create a basic form with name, email, and submit button.

10.2 Input Types (text, email, password, etc.)

<form>
    <label>Username:</label>
    <input type="text" name="username"><br>

    <label>Email:</label>
    <input type="email" name="email"><br>

    <label>Password:</label>
    <input type="password" name="password"><br>

    <label>Age:</label>
    <input type="number" name="age"><br>

    <button type="submit">Register</button>
</form>

Task: Create a form using at least 4 different input types.

10.3 Textarea & Select Dropdown

<form>
    <label>Message:</label><br>
    <textarea name="message" rows="4" cols="30"></textarea><br>

    <label>Country:</label>
    <select name="country">
        <option value="india">India</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select><br>

    <button type="submit">Send</button>
</form>

Task: Add a textarea and a dropdown for user input.

10.4 Radio Buttons & Checkboxes

<form>
    <label>Gender:</label><br>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female<br>

    <label>Hobbies:</label><br>
    <input type="checkbox" name="hobby" value="reading"> Reading
    <input type="checkbox" name="hobby" value="traveling"> Traveling
    <input type="checkbox" name="hobby" value="gaming"> Gaming<br>

    <button type="submit">Submit</button>
</form>

Task: Create a form with radio buttons for gender and checkboxes for hobbies.

10.5 Form Attributes (action, method, etc.)

Common form attributes:

action: URL to send form data
method: HTTP method (GET or POST)
enctype: Encoding type for file uploads
target: Open response in a new tab/window

<form action="/submit" method="post" target="_blank">
    <input type="text" name="username">
    <button type="submit">Send</button>
</form>

Task: Use action, method, and target attributes in a form.

10.6 Form Validation

HTML5 provides built-in validation attributes like required, minlength, maxlength, pattern, and type for form inputs.

<form>
    <label>Username:</label>
    <input type="text" name="username" required minlength="3"><br>

    <label>Email:</label>
    <input type="email" name="email" required><br>

    <label>Password:</label>
    <input type="password" name="password" required pattern=".{6,}"><br>

    <button type="submit">Register</button>
</form>

Task: Add validation to your form fields using HTML5 attributes.

Mini Project: Registration Form

Build a registration form that includes:

Text inputs: Name, Email, Password
Radio buttons: Gender
Checkboxes: Hobbies
Textarea: About You
Select dropdown: Country
Validation: required fields, min/max length, email type

<form action="/submit" method="post">
    <label>Name:</label>
    <input type="text" name="name" required><br>

    <label>Email:</label>
    <input type="email" name="email" required><br>

    <label>Password:</label>
    <input type="password" name="password" required minlength="6"><br>

    <label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female<br>

    <label>Hobbies:</label>
    <input type="checkbox" name="hobby" value="reading"> Reading
    <input type="checkbox" name="hobby" value="traveling"> Traveling
    <input type="checkbox" name="hobby" value="gaming"> Gaming<br>

    <label>About You:</label><br>
    <textarea name="about" rows="4" cols="30"></textarea><br>

    <label>Country:</label>
    <select name="country">
        <option value="india">India</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select><br>

    <button type="submit">Register</button>
</form>

HTML Media

HTML provides tags to embed multimedia content like images, audio, video, and other media. You can also control playback and make media responsive for different devices.

11.1 <img> Tag

The <img> tag is used to embed images in a webpage.

<img src="image.jpg" alt="Description" width="300" height="200">

Task: Add an image with proper src, alt, width, and height attributes.

11.2 <audio> Tag

The <audio> tag embeds audio content. Use controls to show playback controls.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Task: Embed an audio file with controls.

11.3 <video> Tag

The <video> tag embeds video content. You can use controls, autoplay, loop, and muted attributes.

<video width="400" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Task: Add a video with width, controls, and autoplay options.

11.4 <iframe> Tag

The <iframe> tag is used to embed another webpage, map, or content into your page.

<iframe src="https://www.example.com" width="600" height="400" title="Example Page"></iframe>

Task: Embed a webpage or map using iframe with width and height.

11.5 Media Attributes & Controls

Media elements like <audio> and <video> support attributes such as:

controls – display play/pause/volume
autoplay – start automatically
loop – play repeatedly
muted – start muted
poster – image shown before video plays

<video width="400" controls autoplay loop muted poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
</video>

Task: Embed a video with controls, autoplay, loop, muted, and poster image.

11.6 Responsive Media

Use CSS to make media elements responsive so they adapt to different screen sizes.

<style>
img, video, iframe {
    max-width: 100%;
    height: auto;
}
</style>

<img src="image.jpg" alt="Responsive Image">
<video controls>
    <source src="video.mp4" type="video/mp4">
</video>
<iframe src="https://www.example.com"></iframe>

Task: Make an image, video, and iframe responsive using CSS.

Mini Project: Multimedia Gallery

Create a multimedia gallery containing:

At least 2 images with alt text
1 audio file with controls
1 video with controls and poster image
1 embedded webpage or map using iframe
All media should be responsive

<div class="gallery">
    <img src="image1.jpg" alt="Nature Image">
    <img src="image2.jpg" alt="City Image">

    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>

    <video width="400" controls poster="poster.jpg">
        <source src="video.mp4" type="video/mp4">
    </video>

    <iframe src="https://www.example.com" width="600" height="400"></iframe>
</div>

<style>
img, video, iframe {
    max-width: 100%;
    height: auto;
}
.gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
</style>

HTML Semantic Elements

Semantic elements clearly describe their meaning to both the browser and the developer. They improve accessibility, SEO, and code readability.

<header>

The <header> element represents introductory content or a set of navigational links for a page or section.

<header>
    <h1>Website Title</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

Task: Create a header with a website title and navigation links.

<footer>

The <footer> element represents the footer of a section or page. It usually contains contact info, copyright, or links.

<footer>
    <p>© 2025 My Website</p>
    <a href="#privacy">Privacy Policy</a>
</footer>

Task: Add a footer with copyright and privacy policy link.

<article>

The <article> element represents self-contained content that can be independently distributed or reused.

<article>
    <h2>Blog Post Title</h2>
    <p>This is the content of the blog post.</p>
</article>

Task: Create an article with a heading and paragraph content.

<section>

The <section> element represents a thematic grouping of content, typically with a heading.

<section>
    <h2>About Us</h2>
    <p>We are a company providing web development services.</p>
</section>

Task: Create a section with a heading and descriptive text.

<aside>

The <aside> element represents content that is tangentially related to the content around it, like sidebars, ads, or quotes.

<aside>
    <h3>Related Posts</h3>
    <ul>
        <li>Post 1</li>
        <li>Post 2</li>
    </ul>
</aside>

Task: Add an aside with a list of related posts.

<nav>

The <nav> element defines a block of navigation links.

<nav>
    <a href="#home">Home</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
</nav>

Task: Create a nav menu with at least 3 links.

Importance of Semantic HTML

Improves accessibility for screen readers.
Helps search engines understand page structure (SEO).
Makes code easier to read and maintain.
Facilitates styling and scripting by providing meaningful structure.

Task: Rewrite an existing webpage using semantic elements to improve structure and accessibility.

Miscellaneous HTML Tags

HTML provides several tags for special purposes, such as comments, metadata, formatting, and interactive elements.

HTML Comments

Comments are used to leave notes in the code and are not displayed in the browser.

<!-- This is a comment -->

Task: Add a comment describing the purpose of a section in your HTML page.

HTML Entities ( , <, >, etc.)

HTML entities are used to display reserved characters or special symbols.

<p>This is <strong>bold</strong> text & special characters like < > &nbsp;</p>

Task: Display a paragraph with HTML entities for <, >, &, and non-breaking spaces.

marquee

The <marquee> tag creates scrolling text. (Note: Deprecated, use CSS animations instead.)

<marquee>Scrolling text</marquee>

Task: Create a simple scrolling message using the marquee tag.

blockquote

The <blockquote> element is used for long quotations.

<blockquote>
    The journey of a thousand miles begins with a single step.
</blockquote>

Task: Add a blockquote with a famous quote in your page.

time

The <time> element represents a specific date or time.

<time datetime="2025-09-09">September 9, 2025</time>

Task: Display the current date using the time element.

address

The <address> element represents contact information.

<address>
    Contact us at: info@example.com<br>
    123 Web Street, City, Country
</address>

Task: Add an address block with your contact information.

details & summary

The <details> element creates a collapsible section, and <summary> defines its heading.

<details>
    <summary>Click to see more</summary>
    <p>This is hidden content inside the details element.</p>
</details>

Task: Create a collapsible FAQ section using details and summary tags.

abbr, cite, dfn

These tags provide semantic meaning:

<abbr> – Abbreviation or acronym (<abbr title="HyperText Markup Language">HTML</abbr>).
<cite> – Reference to a work (<cite>The Great Gatsby</cite>).
<dfn> – Defining a term (<dfn>JavaScript</dfn>).

Task: Use abbr, cite, and dfn appropriately in a paragraph.

meter & progress

These tags represent measurement or completion status:

<meter value="0.6" min="0" max="1">60%</meter>
<progress value="70" max="100">70%</progress>

Task: Display a progress bar and a meter showing completion or measurement.

HTML Tasks & Projects

This section contains practical HTML exercises and mini-projects to reinforce learning and build hands-on experience.

Create a Simple Webpage

Task: Build a basic webpage with a header, paragraph, and a link.

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a simple HTML page.</p>
    <a href="https://www.example.com">Visit Example</a>
</body>
</html>

Build a Table Layout

Task: Create a table to display student names and their marks.

<table border="1">
    <tr><th>Name</th><th>Marks</th></tr>
    <tr><td>Alice</td><td>85</td></tr>
    <tr><td>Bob</td><td>78</td></tr>
</table>

Create a Contact Form

Task: Build a simple form with name, email, message, and submit button.

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea><br>
    <input type="submit" value="Send">
</form>

Use Semantic Tags

Task: Build a webpage using semantic HTML elements like header, footer, section, article, and nav.

<header><h1>Website Header</h1></header>
<nav><a href="#">Home</a> | <a href="#">About</a></nav>
<section>
    <article><h2>Article Title</h2><p>Article content.</p></article>
</section>
<footer>© 2025 My Website</footer>

Embed Images, Audio & Video

Task: Include images, audio, and video elements in a webpage.

<img src="image.jpg" alt="Sample Image" width="200">
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support audio.
</audio>
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support video.
</video>

Build a Project with Details & Summary

Task: Create a FAQ section using details and summary tags.

<details>
    <summary>What is HTML?</summary>
    <p>HTML stands for HyperText Markup Language.</p>
</details>
<details>
    <summary>What is CSS?</summary>
    <p>CSS stands for Cascading Style Sheets.</p>
</details>

Use Abbreviations & Blockquotes

Task: Display abbreviations and blockquotes for better semantic markup.

<p>HTML stands for <abbr title="HyperText Markup Language">HTML</abbr>.</p>
<blockquote>The best way to learn HTML is by practicing!</blockquote>

Mini HTML Portfolio Project

Task: Build a small portfolio page including header, nav, sections for projects, contact info, images, and footer.

<header><h1>My Portfolio</h1></header>
<nav><a href="#projects">Projects</a> | <a href="#contact">Contact</a></nav>
<section id="projects">
    <h2>Projects</h2>
    <article><h3>Project 1</h3><p>Description of project 1.</p></article>
    <article><h3>Project 2</h3><p>Description of project 2.</p></article>
</section>
<section id="contact">
    <h2>Contact</h2>
    <address>Email: info@example.com</address>
</section>
<footer>© 2025 My Portfolio</footer>