HTML

Introduction

HTML stands for HyperText Markup Language.

It is the standard language used to create and structure web pages.

Every website you visit — whether simple or complex — is built using HTML as its foundation.

HTML is not a programming language.

It is a markup language, which means it uses tags to describe and structure content.

What is HTML5?

HTML5 is the latest major version of HTML.

It was created to improve:

Website structure
Multimedia support
Performance
Cross-device compatibility (mobile-friendly web)
Cleaner and more meaningful code

HTML5 officially became a recommendation in 2014 and is now the standard for modern web development.

Why HTML5 Was Introduced

Before HTML5:

Developers needed plugins like Flash to play videos.
Code was filled with too many <div> tags.
Web pages were not mobile-friendly.
There was no proper support for graphics or local storage.

HTML5 solved these problems by introducing:

Native <video> and <audio> support
New semantic elements
Better forms
Canvas for graphics
Local storage
Mobile responsiveness

1️⃣ Simple Document Type Declaration

Old HTML versions had long, complicated declarations.

HTML5 uses:

<!DOCTYPE html>

That’s it. Clean and simple.

2️⃣ New Semantic Elements

HTML5 introduced meaningful tags such as:

<header>
<nav>
<section>
<article>
<aside>
<footer>

These improve:

Code readability
SEO (Search Engine Optimization)
Accessibility

Instead of using:

<div class="header">

We now use:

<header>

Much cleaner and professional.

3️⃣ Built-in Multimedia Support

No plugins required.

<video controls>
  <source src="movie.mp4" type="video/mp4">
</video>

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

4️⃣ Better Forms

HTML5 introduced new input types:

email
date
number
range
url
color

Example:

<input type="email" placeholder="Enter your email">

This automatically validates email format.

5️⃣ Canvas for Graphics

HTML5 allows drawing graphics directly in the browser:

<canvas id="myCanvas"></canvas>

(Used for games, animations, charts.)

Basic Structure of an HTML5 Page

Every HTML5 page follows this structure:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First HTML5 Page</title>
</head>
<body>

    <h1>Welcome to HTML5</h1>
    <p>This is my first HTML5 webpage.</p>

</body>
</html>

Explanation of the Structure

TagMeaning<!DOCTYPE html>Declares HTML5 document<html>Root element<head>Contains meta information<meta charset="UTF-8">Sets character encoding<title>Page title in browser tab<body>Visible content of webpage

Why HTML5 is Important Today

Works on all modern browsers
Mobile-first friendly
Required for modern frameworks (React, Angular, etc.)
SEO optimized
Faster and cleaner code

If you want to build professional websites in 2026 and beyond, HTML5 is mandatory.

Example Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 Practice Page</title>
</head>
<body>

    <header>
        <h1>My HTML5 Website</h1>
    </header>

    <nav>
        <a href="#">Home</a> |
        <a href="#">About</a> |
        <a href="#">Contact</a>
    </nav>

    <section>
        <h2>Welcome</h2>
        <p>This page is built using HTML5 structure elements.</p>

        <form>
            <label>Email:</label>
            <input type="email" placeholder="Enter your email">
            <button type="submit">Submit</button>
        </form>
    </section>

    <footer>
        <p>&copy; 2026 My Website</p>
    </footer>

</body>
</html>

HTML

Introduction

Example Code:

HTML

All Courses