Class 9 | HTML 5 Basics | Website Design Notes

HTML5 Features, Semantic Elements, Multimedia and Forms

Introduction to HTML5

HTML stands for HyperText Markup Language.

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

HTML combines two ideas:

  • Hypertext – links one webpage or resource to another.
  • Markup Language – uses tags to define the structure and meaning of webpage content.

HTML5 is a major version of HTML that introduced many features for building modern websites and web applications.

HTML5 added improved support for:

  • Semantic Elements
  • Audio
  • Video
  • Graphics
  • Forms
  • Local Storage
  • Web Applications
  • Drag and Drop

Difference Between Earlier HTML and HTML5

Earlier HTMLHTML5
Older HTML versions often used longer DOCTYPE declarations.Uses the simple <!DOCTYPE html> declaration.
Had fewer semantic structural elements.Introduced elements such as <header>, <footer>, <section>, and <article>.
Multimedia often depended heavily on external plug-ins.Provides native <audio> and <video> elements.
Did not provide the HTML5 Canvas API.Provides <canvas> for script-based graphics.
Had fewer specialized form input types.Includes input types such as email, date, number, range, color, and URL.
Limited built-in support for web application features.Supports features such as local storage, geolocation, and drag-and-drop APIs.

Basic HTML5 Document

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>HTML5 Page</title>

</head>

<body>

    <h1>Hello HTML5</h1>

</body>

</html>

New Features in HTML5

HTML5 introduced many useful technologies and elements.

Important features include:

  1. New Semantic Elements
  2. Improved Forms
  3. Local Storage
  4. WebSocket
  5. Server-Sent Events
  6. Canvas
  7. Audio and Video
  8. Geolocation
  9. Microdata
  10. Drag and Drop

1. New Semantic Elements

HTML5 introduced meaningful structural elements such as:

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

These elements help describe the purpose of different parts of a webpage.


2. Improved HTML5 Forms

HTML5 introduced new form features and input types.

Examples include:

<input type="email">
<input type="date">
<input type="number">
<input type="range">
<input type="color">
<input type="url">

It also introduced useful form attributes such as:

  • required
  • placeholder
  • min
  • max
  • step
  • pattern

3. Local Storage

HTML5 web technologies provide Web Storage, which allows websites to store information in the user’s browser.

Two common types are:

  • localStorage
  • sessionStorage

Local storage can preserve information without relying on older third-party browser plug-ins.


4. WebSocket

WebSocket provides two-way communication between a browser and a server.

It is useful for applications requiring fast real-time communication.

Examples include:

  • Chat Applications
  • Live Notifications
  • Online Games
  • Real-Time Dashboards

5. Server-Sent Events

Server-Sent Events (SSE) allow a server to continuously send updates to a web browser.

They may be useful for:

  • Live News
  • Notifications
  • Score Updates
  • Monitoring Systems

6. Canvas

HTML5 provides the <canvas> element.

It creates an area where graphics can be drawn using JavaScript.

Canvas can be used for:

  • Lines
  • Shapes
  • Text
  • Animations
  • Games
  • Charts

7. Audio and Video

HTML5 allows multimedia to be embedded directly using:

<audio>

and:

<video>

This reduces the need for older multimedia plug-ins.


8. Geolocation

The Geolocation API can allow users to choose to share their location with a website or web application.

It can be used in applications such as:

  • Maps
  • Nearby Services
  • Location-Based Applications

Permission from the user is normally required.


9. Microdata

Microdata provides a way to add structured information to HTML content.

It can help software and search engines better understand webpage information.


10. Drag and Drop

HTML5 provides APIs that allow users to drag elements from one place and drop them into another location on a webpage.


HTML5 Semantic Elements

Semantic elements are HTML elements whose names clearly describe the purpose or meaning of their content.

Examples include:

  • <main>
  • <section>
  • <article>
  • <header>
  • <footer>
  • <figure>
  • <figcaption>
  • <aside>
  • <mark>
  • <summary>
  • <details>
  • <nav>

Semantic HTML improves:

  • Code Readability
  • Page Structure
  • Accessibility
  • Maintainability

1. <main> Element

The <main> element represents the main content of a webpage.

Example:

<main>

    <h1>Web Browsers</h1>

    <p>
        A web browser is software used to access
        and display web pages.
    </p>

</main>

A document should generally contain one main content area.


2. <section> Element

The <section> element represents a thematic section of a document.

Example:

<section>

    <h2>Introduction</h2>

    <p>
        This section contains introductory information.
    </p>

</section>

Sections can be used for:

  • Introduction
  • Services
  • Products
  • Contact Information
  • Chapters

3. <article> Element

The <article> element represents independent or self-contained content.

Examples include:

  • Blog Posts
  • News Articles
  • Forum Posts
  • Product Articles

Example:

<article>

    <h2>Google Chrome</h2>

    <p>
        Google Chrome is a web browser developed by Google.
    </p>

</article>

4. <header> Element

The <header> element represents introductory or header content.

Example:

<header>

    <h1>My Website</h1>

    <p>Welcome to my webpage.</p>

</header>

A header may contain:

  • Logo
  • Heading
  • Navigation
  • Introduction

5. <footer> Element

The <footer> element represents footer information.

Example:

<footer>

    <p>Posted by XYZ</p>

    <p>Contact: info@example.com</p>

</footer>

A footer may contain:

  • Copyright
  • Contact Information
  • Author Information
  • Useful Links

6. <figure> Element

The <figure> element represents self-contained content such as:

  • Images
  • Diagrams
  • Illustrations
  • Charts

Example:

<figure>

    <img
        src="flower.jpg"
        alt="A flower">

</figure>

7. <figcaption> Element

The <figcaption> element provides a caption for content inside <figure>.

Example:

<figure>

    <img
        src="mountain.jpg"
        alt="Mountain landscape"
        width="300">

    <figcaption>
        Beautiful Mountain Landscape
    </figcaption>

</figure>

8. <aside> Element

The <aside> element represents content indirectly related to the main content.

It may be used for:

  • Sidebars
  • Related Links
  • Extra Information
  • Advertisements

Example:

<aside>

    <h3>Related Information</h3>

    <p>
        Read more articles about web browsers.
    </p>

</aside>

9. <mark> Element

The <mark> element highlights text.

Example:

<p>
    HTML5 introduced many
    <mark>new semantic elements</mark>.
</p>

10. <summary> Element

The <summary> element provides a visible heading for a <details> element.

Example:

<details>

    <summary>Read More</summary>

    <p>
        Additional information is shown here.
    </p>

</details>

11. <details> Element

The <details> element creates content that users can open or close.

Example:

<details>

    <summary>About Nepal</summary>

    <p>
        Nepal is a country in South Asia.
    </p>

</details>

12. <nav> Element

The <nav> element represents navigation links.

Example:

<nav>

    <a href="index.html">Home</a>

    <a href="html.html">HTML</a>

    <a href="javascript.html">JavaScript</a>

</nav>

Common HTML5 Semantic Elements

ElementPurpose
<main>Main webpage content
<section>Thematic section
<article>Independent content
<header>Header or introductory content
<footer>Footer information
<figure>Self-contained media/content
<figcaption>Caption for a figure
<aside>Related or sidebar content
<mark>Highlighted text
<details>Expandable details
<summary>Heading for <details>
<nav>Navigation links

HTML5 Multimedia Elements

Multimedia may include:

  • Sound
  • Music
  • Video
  • Movies
  • Animation

HTML5 provides two major multimedia elements:

  1. <audio>
  2. <video>

HTML5 <video> Element

The <video> element displays video on a webpage.

Example:

<!DOCTYPE html>

<html>

<head>

    <title>Video Example</title>

</head>

<body>

    <video
        width="500"
        height="300"
        controls>

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

        Your browser does not support the video element.

    </video>

</body>

</html>

Important Video Attributes

Common attributes include:

  • controls
  • autoplay
  • muted
  • loop
  • width
  • height
  • poster

Autoplay Video

Modern browsers often restrict autoplay with sound.

A common autoplay example is:

<video
    width="500"
    autoplay
    muted
    controls>

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

</video>

HTML5 <audio> Element

The <audio> element is used to play audio on a webpage.

Example:

<!DOCTYPE html>

<html>

<head>

    <title>Audio Example</title>

</head>

<body>

    <audio controls>

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

        Your browser does not support the audio element.

    </audio>

</body>

</html>

Important Audio Attributes

Common attributes include:

  • controls
  • autoplay
  • muted
  • loop

HTML5 Canvas

The <canvas> element provides a drawing area for graphics generated through JavaScript.

Basic Syntax

<canvas
    id="myCanvas"
    width="200"
    height="100">
</canvas>

The canvas itself does not automatically draw graphics.

JavaScript is normally used to draw inside it.


Canvas Example

<canvas
    id="myCanvas"
    width="300"
    height="150">
</canvas>

<script>

    const canvas =
        document.getElementById("myCanvas");

    const ctx =
        canvas.getContext("2d");

    ctx.fillRect(50, 30, 150, 70);

</script>

Uses of Canvas

Canvas can be used for:

  • Drawing Shapes
  • Charts
  • Games
  • Animation
  • Image Manipulation
  • Dynamic Graphics

HTML5 SVG

SVG stands for:

Scalable Vector Graphics

SVG is an XML-based format used for describing two-dimensional vector graphics.

SVG graphics can be scaled without significant loss of quality.


Advantages of SVG

  • Scalable
  • Suitable for Logos
  • Suitable for Icons
  • Supports Shapes
  • Supports Text
  • Can be styled using CSS
  • Can interact with JavaScript

SVG Circle Example

<svg
    width="200"
    height="120">

    <circle
        cx="60"
        cy="60"
        r="40"
        stroke="yellow"
        stroke-width="4"
        fill="red">
    </circle>

</svg>

SVG Rectangle Example

<svg
    width="200"
    height="100">

    <rect
        width="150"
        height="50"
        x="20"
        y="20"
        stroke="yellow"
        stroke-width="4"
        fill="red">
    </rect>

</svg>

SVG Polygon Example

<svg
    width="220"
    height="220">

    <polygon
        points="100,10 40,198 190,78 10,78 168,198"
        style="
            fill:red;
            stroke:black;
            stroke-width:3;
            fill-rule:nonzero;">
    </polygon>

</svg>

Difference Between Canvas and SVG

CanvasSVG
Uses a drawing surface.Uses vector elements.
Usually controlled using JavaScript.Defined using XML-like markup.
Good for dynamic graphics and games.Good for icons, logos, and diagrams.
Individual drawn objects are not DOM elements.SVG shapes are DOM elements.
Resolution depends on canvas dimensions.Scales well as vector graphics.

HTML5 Drag and Drop

Drag and Drop is an HTML5 feature that allows users to select an element, drag it, and drop it in another location.

Examples include:

  • Moving Images
  • Rearranging Items
  • File Interfaces
  • Interactive Applications

Drag and Drop Events

Important events include:

ondragstart

Triggered when dragging begins.

ondrag

Triggered repeatedly while an element is being dragged.

ondragenter

Triggered when a dragged element enters a drop area.

ondragleave

Triggered when the dragged element leaves a drop area.

ondragover

Triggered while the dragged element is over a drop target.

ondrop

Triggered when the element is dropped.

ondragend

Triggered when dragging ends.


HTML5 Drag and Drop Example

<!DOCTYPE html>

<html>

<head>

    <title>Drag and Drop</title>

    <style>

        #dropArea {
            width: 350px;
            height: 120px;
            border: 2px solid black;
            padding: 10px;
        }

    </style>

    <script>

        function allowDrop(event) {
            event.preventDefault();
        }

        function drag(event) {

            event.dataTransfer.setData(
                "text",
                event.target.id
            );

        }

        function drop(event) {

            event.preventDefault();

            const data =
                event.dataTransfer.getData("text");

            event.currentTarget.appendChild(
                document.getElementById(data)
            );

        }

    </script>

</head>

<body>

    <div
        id="dropArea"
        ondrop="drop(event)"
        ondragover="allowDrop(event)">
    </div>

    <br>

    <img
        id="dragImage"
        src="image.jpg"
        alt="Draggable Image"
        draggable="true"
        ondragstart="drag(event)"
        width="150">

</body>

</html>

HTML5 Forms

An HTML form is an area on a webpage that allows users to enter and submit information.

A form is created using:

<form>

Common form elements include:

  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>

<input> Element

The <input> element can create many different types of controls.

Examples include:

  • Text
  • Email
  • Password
  • Number
  • Date
  • Radio Button
  • Checkbox
  • File Upload
  • Range
  • Color

Text Box

A text box is used to enter a single line of text.

<input
    type="text"
    size="20"
    maxlength="30">

Radio Button

A radio button is normally used when the user should choose one option from a group.

<input
    type="radio"
    id="married"
    name="status"
    value="married">

<label for="married">
    Married
</label>

<input
    type="radio"
    id="unmarried"
    name="status"
    value="unmarried">

<label for="unmarried">
    Unmarried
</label>

Checkbox

A checkbox allows one or more independent selections.

<input
    type="checkbox"
    id="movie"
    name="interest"
    value="movie">

<label for="movie">
    Movie
</label>

<input
    type="checkbox"
    id="music"
    name="interest"
    value="music">

<label for="music">
    Music
</label>

Password Box

A password input hides the characters entered by the user.

<input
    type="password"
    name="password"
    size="10"
    maxlength="20">

<select> Element

The <select> element creates a drop-down list.

The <option> element defines each choice.

<label for="country">
    Country:
</label>

<select
    id="country"
    name="country">

    <option value="nepal">
        Nepal
    </option>

    <option value="bhutan">
        Bhutan
    </option>

    <option value="india">
        India
    </option>

</select>

<textarea> Element

The <textarea> element allows multiple lines of text.

<label for="comments">
    Comments:
</label>

<textarea
    id="comments"
    name="comments"
    rows="3"
    cols="20">
</textarea>

<button> Element

The <button> element creates a clickable button.

<button type="button">
    Click
</button>

A form submission button can be created using:

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

New HTML5 Input Types

HTML5 introduced several useful input types.

Input TypePurpose
textNormal text
emailEmail address
passwordPassword
dateDate
urlWebsite URL
numberNumeric value
rangeSlider
colorColor picker
fileFile upload
checkboxMultiple selection
radioSingle selection from a group

HTML5 Form Example

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>HTML5 Form Example</title>

    <style>

        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        form {
            max-width: 600px;
            margin: auto;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input,
        select,
        textarea,
        button {
            padding: 8px;
            box-sizing: border-box;
        }

        input,
        select,
        textarea {
            width: 100%;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }

    </style>

</head>

<body>

    <h1>HTML5 Form Example</h1>

    <form
        action="/submit"
        method="post">

        <div class="form-group">

            <label for="name">
                Name:
            </label>

            <input
                type="text"
                id="name"
                name="name"
                required>

        </div>

        <div class="form-group">

            <label for="email">
                Email:
            </label>

            <input
                type="email"
                id="email"
                name="email"
                required>

        </div>

        <div class="form-group">

            <label for="password">
                Password:
            </label>

            <input
                type="password"
                id="password"
                name="password"
                required
                minlength="8">

        </div>

        <div class="form-group">

            <label for="dob">
                Date of Birth:
            </label>

            <input
                type="date"
                id="dob"
                name="dob">

        </div>

        <div class="form-group">

            <label for="website">
                Website:
            </label>

            <input
                type="url"
                id="website"
                name="website">

        </div>

        <div class="form-group">

            <label for="number">
                Favorite Number:
            </label>

            <input
                type="number"
                id="number"
                name="number"
                min="1"
                max="100"
                step="1">

        </div>

        <div class="form-group">

            <label for="range">
                Experience Level:
            </label>

            <input
                type="range"
                id="range"
                name="range"
                min="0"
                max="10"
                step="1">

        </div>

        <div class="form-group">

            <label for="color">
                Favorite Color:
            </label>

            <input
                type="color"
                id="color"
                name="color">

        </div>

        <div class="form-group">

            <label for="file">
                Upload File:
            </label>

            <input
                type="file"
                id="file"
                name="file">

        </div>

        <div class="form-group">

            <label for="bio">
                Biography:
            </label>

            <textarea
                id="bio"
                name="bio"
                rows="4"
                cols="50">
            </textarea>

        </div>

        <div class="form-group">

            <label for="gender">
                Gender:
            </label>

            <select
                id="gender"
                name="gender">

                <option value="">
                    Select...
                </option>

                <option value="male">
                    Male
                </option>

                <option value="female">
                    Female
                </option>

                <option value="other">
                    Other
                </option>

            </select>

        </div>

        <div class="form-group">

            <label>

                <input
                    type="checkbox"
                    name="newsletter"
                    value="yes">

                Subscribe to Newsletter

            </label>

        </div>

        <fieldset>

            <legend>
                Preferred Contact Method
            </legend>

            <label>

                <input
                    type="radio"
                    name="contact_method"
                    value="email"
                    checked>

                Email

            </label>

            <label>

                <input
                    type="radio"
                    name="contact_method"
                    value="phone">

                Phone

            </label>

        </fieldset>

        <br>

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

    </form>

</body>

</html>

Quick Revision

HTML5

HTML5 introduced modern features for:

  • Structure
  • Multimedia
  • Graphics
  • Forms
  • Web Applications

Major HTML5 Features

  • Semantic Elements
  • Improved Forms
  • Local Storage
  • WebSocket
  • Server-Sent Events
  • Canvas
  • Audio and Video
  • Geolocation
  • Microdata
  • Drag and Drop

Semantic Elements

<header>
<footer>
<main>
<section>
<article>
<nav>
<aside>
<figure>
<figcaption>
<details>
<summary>

Multimedia

<audio controls></audio>
<video controls></video>

Canvas

<canvas
    id="myCanvas"
    width="200"
    height="100">
</canvas>

SVG

SVG stands for:

Scalable Vector Graphics

It is useful for:

  • Shapes
  • Icons
  • Logos
  • Diagrams

Drag and Drop

Important events include:

  • ondragstart
  • ondrag
  • ondragenter
  • ondragleave
  • ondragover
  • ondrop
  • ondragend

HTML5 Forms

Important elements include:

  • <form>
  • <input>
  • <textarea>
  • <select>
  • <option>
  • <button>

Important Exam Points

  • HTML stands for HyperText Markup Language.
  • HTML5 is a major version of HTML.
  • HTML5 introduced semantic elements.
  • Semantic elements describe the meaning of webpage sections.
  • <main> represents the main content.
  • <section> represents a thematic section.
  • <article> represents independent content.
  • <header> defines introductory or header content.
  • <footer> defines footer content.
  • <figure> represents self-contained visual content.
  • <figcaption> provides a caption for a figure.
  • <aside> contains related or sidebar content.
  • <mark> highlights text.
  • <details> creates expandable content.
  • <summary> provides the heading for a <details> element.
  • <nav> defines navigation links.
  • HTML5 supports audio without older browser plug-ins.
  • HTML5 supports video using the <video> element.
  • <canvas> is used with JavaScript to draw graphics.
  • SVG stands for Scalable Vector Graphics.
  • SVG can create circles, rectangles, and polygons.
  • Drag and drop allows elements to be moved interactively.
  • HTML5 introduced improved form input types.
  • type="email" is used for email addresses.
  • type="date" creates a date input.
  • type="number" accepts numeric values.
  • type="range" creates a slider.
  • type="color" provides a color picker.
  • type="file" allows file selection.
  • <textarea> accepts multi-line text.
  • <select> creates a drop-down list.
  • <button> creates a clickable button.

Discussion

Share a helpful question, idea, or explanation with other students.

Leave a Comment

Write a clear question, answer, or helpful explanation.
Your email will not be published.

Download Our Offline App

Study class-wise notes even when internet is not available. Get the app from Play Store.

Nepal eNotes offline app preview
Get it on Google Play