Master HTML from basics to advanced concepts with clear explanations, syntax, examples, important tags, HTML5, forms, tables, multimedia, semantic elements, attributes, and exam-focused revision points.

HTML

1. Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure web pages.

HTML tells a web browser what different parts of a webpage represent, such as:

Headings
Paragraphs
Images
Hyperlinks
Lists
Tables
Forms
Audio
Video
Different sections of a webpage

For example, HTML can tell a browser:

“This text is a heading,”
“This is a paragraph,”
“This is an image,” or
“This text is a link.”

Is HTML a programming language?

No. HTML is not a programming language.

HTML is a markup language because it uses predefined tags to mark and organize webpage content. Unlike programming languages such as C++, Java, or Python, HTML does not normally perform programming logic, complex calculations, loops, or functions.

2. Full Form of HTML

HTML consists of four words:

Letter	Meaning
H	Hyper
T	Text
M	Markup
L	Language

HyperText

HyperText means text that can contain links to other webpages, documents, or resources.

For example, when you click a link on a webpage and it takes you to another webpage, that is hypertext.

Markup

Markup means using special tags to identify and structure different types of content.

Language

HTML follows a defined syntax and set of rules for creating webpages.

3. Uses of HTML

HTML is mainly used to:

Create webpages.
Structure webpage content.
Create headings and paragraphs.
Insert images.
Create hyperlinks.
Create ordered and unordered lists.
Create tables.
Create forms.
Add audio and video.
Organize different webpage sections.
Provide the basic structure of websites.
Work together with CSS and JavaScript to create modern websites.

4. Basic Structure of an HTML Document

A basic HTML5 document has the following structure:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is my first webpage.</p>

</body>

</html>

Explanation of each part

<!DOCTYPE html>

This declaration tells the browser that the document uses modern HTML (HTML5).

It is not an HTML tag in the same sense as <p> or <body>; it is a document-type declaration.

<html>

This is the root element of an HTML document. All major HTML content is contained inside it.

<head>

The <head> contains information about the webpage that is generally not displayed as the main visible page content.

It can contain:

Page title
Metadata
Character encoding
Viewport information
CSS references
Other document information

<title>

Defines the title displayed in the browser tab.

Example:

<title>My School</title>

<body>

Contains the visible content of the webpage.

<h1>

Creates the main/largest heading.

<p>

Creates a paragraph.

5. HTML Tags

HTML uses tags to define different elements.

Example:

<p>Hello World</p>

Here:

<p> = opening tag
Hello World = content
</p> = closing tag

The complete structure:

Opening tag + Content + Closing tag

is called an HTML element.

General syntax

<tag>Content</tag>

Example:

<h1>HTML Notes</h1>

The complete <h1>HTML Notes</h1> is an HTML element.

6. Opening and Closing Tags

Most HTML elements have both an opening and closing tag.

Example:

<h1>My School</h1>

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

The closing tag normally contains a forward slash /.

Void Elements

Some HTML elements do not require a closing tag. These are commonly called void elements.

Examples:

<br>

<hr>

<img>

<input>

<meta>

<link>

These elements do not contain normal content between opening and closing tags.

7. HTML Elements

An HTML element generally consists of:

Opening Tag + Content + Closing Tag

Example:

<h1>HTML Notes</h1>

Here the complete structure is one HTML element.

Difference between tag and element

Tag:

<p>

Element:

<p>Hello</p>

So, a tag is part of an element, whereas an element normally consists of the complete markup structure.

8. HTML Attributes

Attributes provide additional information about an HTML element.

Attributes are written inside the opening tag.

General form:

Example: Link

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

Here:

<a> = anchor tag
href = attribute
"https://example.com" = attribute value

Example: Image

Here:

src specifies the image source/location.
alt provides alternative text describing the image.

9. Headings in HTML

HTML provides six levels of headings:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Important point

<h1> = highest/main heading
<h6> = lowest/smallest heading

Example:

<h1>My Website</h1>

<h2>About Me</h2>

<h3>My Education</h3>

Headings help organize the content into a logical hierarchy.

10. Paragraph

The <p> tag is used to create a paragraph.

Example:

<p>HTML is used to create webpages.</p>

The browser displays the text as a paragraph.

11. Line Break

The <br> tag is used to move content to a new line.

Example:

Hello<br>

World

Output:

Hello

World

<br> is a void element, so it does not require </br>.

12. Horizontal Line

The <hr> tag creates a horizontal thematic break.

Example:

<hr>

It can be used to visually separate different sections of a webpage.

13. Text Formatting Tags

HTML provides several tags for formatting or giving semantic meaning to text.

Tag	Purpose
<strong>	Important/bold text
<em>	Emphasized/italic text
<u>	Underlined text
<mark>	Highlighted text
<small>	Smaller text
<del>	Deleted text
<ins>	Inserted text
<sub>	Subscript
<sup>	Superscript

Examples

Strong text

<strong>Important text</strong>

Emphasized text

<em>Emphasized text</em>

Underlined text

<u>Underlined text</u>

Highlighted text

<mark>Highlighted text</mark>

Deleted text

<del>Deleted text</del>

Inserted text

<ins>Inserted text</ins>

Subscript

H<sub>2</sub>O

Output conceptually:

H₂O

Superscript

x<sup>2</sup>

Output conceptually:

x²

14. HTML Links

The <a> tag, called the anchor element, is used to create hyperlinks.

Example:

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

The href attribute specifies the destination of the link.

Opening a link in a new tab

Visit Website

</a>

The target="_blank" attribute value is commonly used to request opening the destination in a new browsing context, typically a new tab.

15. Images

The <img> element is used to display images.

Example:

Important image attributes

Attribute	Purpose
src	Specifies image source/location
alt	Alternative text
width	Specifies width
height	Specifies height

Example:

<img src="school.jpg"

alt="School building"

width="500">

The alt text is particularly important because it provides a textual alternative when the image cannot be displayed and can assist users of assistive technologies.

16. Lists in HTML

HTML provides three common types of lists:

Unordered list
Ordered list
Description list

A. Unordered List

An unordered list normally displays items using bullets.

Tags:

<ul> = unordered list
<li> = list item

Example:

<ul>

<li>Apple</li>

<li>Mango</li>

<li>Banana</li>

</ul>

B. Ordered List

An ordered list normally displays items using numbers.

Tags:

<ol> = ordered list
<li> = list item

Example:

<ol>

<li>Study</li>

<li>Go to school</li>

</ol>

C. Description List

Used for terms and their descriptions.

Tags:

<dl> = description list
<dt> = description term
<dd> = description/details

Example:

<dl>

<dd>HyperText Markup Language</dd>

</dl>

17. HTML Tables

HTML tables are used to display information in rows and columns.

Important tags:

Tag	Meaning
<table>	Creates a table
<tr>	Table row
<th>	Table heading/cell
<td>	Table data cell

Example:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Structure

<table>

└── <tr> → row

├── <th> → heading

└── <th> → heading

└── <tr> → row

├── <td> → data

└── <td> → data

</table>

18. HTML Forms

Forms are used to collect information from users.

Common form controls include:

Text box
Password field
Radio button
Checkbox
Submit button
Dropdown list
Text area

Example:

<form>

<label>Password:</label>

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

</form>

Forms are commonly used for:

Login
Registration
Contact forms
Search
Feedback
Data collection

19. Input Types

The <input> element supports different input types.

Examples:

Common input types

Type	Purpose
text	Normal text
password	Password entry
email	Email address
number	Numeric input
date	Date selection
radio	Select one option from a group
checkbox	Select one or more options
file	Select/upload a file
submit	Submit form

20. Buttons

The <button> element creates a button.

Example:

<button>Click Me</button>

A submit button can be created as:

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

Buttons are commonly used for actions such as submitting forms or triggering interactions.

21. HTML Comments

Comments are notes written inside HTML code that are not displayed as normal webpage content.

Syntax:

Comments are useful for:

Explaining code
Organizing large HTML documents
Leaving notes for developers
Temporarily documenting sections of code

22. <div> Element

<div> is a general-purpose block container.

It is commonly used to group related content and organize webpage sections.

Example:

<div>

<h2>About Us</h2>

<p>Welcome to our website.</p>

</div>

The <div> element is especially useful when a suitable semantic element is not available or when grouping content for styling/layout.

23. <span> Element

<span> is a general-purpose inline container.

It is useful for targeting a small part of text or other inline content, particularly when CSS needs to be applied to that portion.

Example:

<p>This is <span>important</span> text.</p>

Unlike <div>, <span> is normally an inline element.

24. Semantic HTML

Semantic HTML means using HTML elements whose names clearly describe the purpose of their content.

Common semantic elements include:

<nav>

<main>

<aside>

Meaning of semantic tags

Tag	Purpose
<header>	Header/introduction area
<nav>	Navigation links
<main>	Main webpage content
<section>	A section of related content
<article>	Independent/self-contained content
<aside>	Related/sidebar content
<footer>	Footer information

Example

<h1>My Website</h1>

</header>

<nav>

<a href="#">About</a>

</nav>

<main>

<h2>About Us</h2>

<p>Information about our website.</p>

</section>

</main>

</footer>

Semantic HTML makes webpage structure easier for developers, browsers, and assistive technologies to understand.

25. Multimedia in HTML

HTML can be used to embed multimedia such as audio and video.

Audio

The <audio> element can provide audio playback controls.

</audio>

Video

The <video> element can display video.

</video>

The <source> element specifies the media file and its MIME type.

26. HTML5

HTML5 is the modern major version of HTML.

It introduced or standardized many important capabilities, including:

Semantic elements
Audio
Video
Canvas
Improved form features
Better multimedia support
More meaningful document structure

Important HTML5 semantic elements include:

<nav>

<main>

<aside>

27. HTML Entities

HTML entities are special character representations used when certain characters need to be written in HTML in an unambiguous way.

Examples:

Entity	Character
<	<
>	>
&	&
	Non-breaking space
"	"

Example:

The browser displays:

5 < 10

28. Character Encoding

A common character encoding declaration is:

UTF-8

UTF-8 allows webpages to correctly represent a very large range of characters, including:

English letters
Nepali characters
Other languages
Symbols
Special characters

Therefore, UTF-8 is widely used for modern webpages.

29. Meta Tags

Meta tags provide information about the webpage.

Examples:

content="My personal website">

content="width=device-width, initial-scale=1.0">

Viewport

The viewport declaration is especially important for responsive webpages on mobile devices.

It helps the page adapt its layout to the device's display width.

30. HTML and CSS

HTML and CSS have different responsibilities.

HTML

HTML creates the structure and content of a webpage.

CSS

CSS controls the appearance and presentation of the webpage.

CSS can control:

Color
Font
Font size
Spacing
Layout
Borders
Backgrounds

Example:

<h1 style="color: blue;">Welcome</h1>

For larger websites, CSS is generally maintained separately from HTML rather than putting all styles directly into HTML.

31. HTML, CSS and JavaScript

A very important concept for exams:

HTML → Structure
CSS → Style
JavaScript → Behavior

HTML

Defines what content and elements exist.

CSS

Controls how those elements look.

JavaScript

Adds behavior and interactivity.

For example:

HTML → Creates a button

CSS → Designs the button

JavaScript → Makes the button perform an action

Thus, the three technologies commonly work together to build modern webpages.

32. Block-Level and Inline Elements

HTML elements can generally be considered block-level or inline based on their normal browser rendering behavior.

Block-Level Elements

They normally:

Start on a new line.
Take up the available width.

Examples:

<div>

<p>

<h1>

Inline Elements

They normally occupy only the space required by their content.

Examples:

<span>

<a>

<em>

Easy way to remember

Block = New line

Inline = Same line

33. HTML File Extension

HTML files usually use the extension:

.html

Examples:

index.html

home.html

about.html

contact.html

Most common homepage filename

index.html

The name index.html is conventionally used as a website's default/home page in many web-server setups.

34. How to Create an HTML Page

Step 1: Open an editor

You can use:

Notepad
VS Code
Other code/text editors

Step 2: Write HTML code

Example:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello World</h1>

<p>This is my webpage.</p>

</body>

</html>

Step 3: Save the file

Save it as:

index.html

Step 4: Open it in a browser

Open the HTML file using a web browser.

The browser interprets the HTML code and renders the webpage.

35. Important HTML Tags — Quick Reference

Tag	Purpose
<html>	Root of HTML document
<head>	Contains document information
<title>	Browser-tab title
<body>	Visible webpage content
<h1>–<h6>	Headings
<p>	Paragraph
<br>	Line break
<hr>	Thematic/horizontal break
<a>	Hyperlink
<img>	Image
<ul>	Unordered list
<ol>	Ordered list
<li>	List item
<table>	Table
<tr>	Table row
<th>	Table heading cell
<td>	Table data cell
<form>	Form
<input>	Input control
<button>	Button
<div>	Block container
<span>	Inline container
<header>	Header
<nav>	Navigation
<main>	Main content
<section>	Section
<article>	Independent content
<aside>	Related/sidebar content
<footer>	Footer
<audio>	Audio
<video>	Video

36. Advantages of HTML

Major advantages include:

Easy to learn — HTML syntax is relatively simple.
Free and open standard — HTML can be used without purchasing a proprietary language license.
Wide browser support — HTML is supported by modern web browsers.
Works with CSS — CSS can be used to control presentation.
Works with JavaScript — JavaScript can add behavior and interactivity.
Supports multimedia — Modern HTML supports audio and video.
Creates structured webpages.
Supports hyperlinks between webpages and resources.
Supports forms and tables.
Supports semantic structure.
Provides the basic foundation of websites.

37. Limitations of HTML

HTML alone has some limitations:

It cannot create complex dynamic applications by itself.
It does not provide advanced visual styling on its own.
It does not perform programming logic like a general-purpose programming language.
JavaScript is generally needed for complex interactive behavior.
CSS is generally needed for professional webpage design.

38. HTML vs Programming Languages

HTML is fundamentally different from programming languages such as:

C
C++
Java
Python

HTML primarily describes the structure and meaning of webpage content.

It does not normally contain programming constructs such as:

Loops
Functions
Complex calculations
General-purpose algorithms
Conditional programming logic

Therefore:

HTML = Markup language

Python/C/Java = Programming languages

39. Complete HTML Example

The following example combines many important HTML concepts:

<!DOCTYPE html>

<head>

content="width=device-width, initial-scale=1.0">

<title>My School</title>

</head>

<body>

<h1>Welcome to My School</h1>

</header>

<nav>

<a href="#about">About</a>

<a href="#contact">Contact</a>

</nav>

<main>

<p>Welcome to our school website.</p>

</section>

<h2>About Us</h2>

<p>Our school provides quality education.</p>

<ul>

<li>Qualified teachers</li>

<li>Good facilities</li>

<li>Friendly environment</li>

</ul>

</section>

<h2>Contact Us</h2>

<form>

<label>Email:</label>

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

</form>

</section>

</main>

<p>My School Website</p>

</footer>

</body>

</html>

This example demonstrates:

<!DOCTYPE html>
<html>
<head>
<meta>
<title>
<body>
<header>
<nav>
<main>
<section>
<h1>
<h2>
<p>
<a>
<ul>
<li>
<form>
<label>
<input>
<button>
<footer>

40. Important Points for Examination

One-line answers

HTML stands for:
HyperText Markup Language.

HTML is a:
Markup language.

HTML is not a:
Programming language.

Root element:
<html>

Visible webpage content:
<body>

Browser tab title:
<title>

Largest/main heading:
<h1>

Smallest heading:
<h6>

Paragraph:
<p>

Line break:
<br>

Horizontal/thematic break:
<hr>

Hyperlink:
<a>

Image:
<img>

Unordered list:
<ul>

Ordered list:
<ol>

List item:
<li>

Table:
<table>

Table row:
<tr>

Table heading cell:
<th>

Table data cell:
<td>

Form:
<form>

Input control:
<input>

Button:
<button>

Block container:
<div>

Inline container:
<span>

Navigation section:
<nav>

Main content:
<main>

Footer:
<footer>

HTML file extension:
.html

Common homepage filename:
index.html

Character encoding:
UTF-8

HTML structure:
HTML

Webpage styling:
CSS

Webpage behavior/interactivity:
JavaScript

41. Most Important Differences to Remember

Topic	Remember
HTML	Structure
CSS	Style/appearance
JavaScript	Behavior/interactivity
Tag	Markup syntax such as <p>
Element	Complete structure such as <p>Hello</p>
Attribute	Additional information inside an opening tag
<div>	General block container
<span>	General inline container
<ul>	Bulleted/unordered list
<ol>	Numbered/ordered list
<th>	Table heading cell
<td>	Table data cell
<br>	New line
<hr>	Thematic separation
<a>	Link
<img>	Image
<form>	User-data collection
<head>	Document information
<body>	Visible page content

42. Final Revision Summary

The most important concepts from this chapter are:

HTML = HyperText Markup Language.
HTML is a markup language, not a programming language.
HTML is used to create and structure webpages.
HTML uses tags and elements.
Most elements have opening and closing tags.
Some elements are void elements, such as <br>, <hr>, <img>, and <input>.
Attributes provide additional information about elements.
<html> is the root element.
<head> contains document information.
<body> contains visible webpage content.
<h1>–<h6> are heading elements.
<p> creates paragraphs.
<a> creates hyperlinks.
<img> displays images.
<ul> creates unordered lists.
<ol> creates ordered lists.
<table> creates tables.
<form> creates forms.
<div> is a general block container.
<span> is a general inline container.
Semantic HTML uses meaningful elements such as <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>.
HTML supports audio and video.
HTML5 introduced/standardized many modern semantic and multimedia features.
HTML entities represent special characters.
UTF-8 is a widely used character encoding.
HTML provides structure.
CSS provides style.
JavaScript provides behavior.
HTML files normally use the .html extension.
index.html is a common homepage filename.
HTML provides the basic foundation of a website.

HTML LAB ACTIVITIES — FULL PRACTICAL NOTES

Below is a complete HTML laboratory manual based on the topics in your notes. Each activity contains:

Experiment/Activity
Objective
HTML code
Explanation
Expected output
Important practical points

The activities cover the major HTML concepts from your uploaded notes, including document structure, headings, formatting, links, images, lists, tables, forms, input types, <div>, <span>, semantic HTML, multimedia, entities, and meta tags.

LAB ACTIVITY 1: Create a Basic HTML Webpage

Objective

To create a simple webpage using the basic structure of an HTML document.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>
        This is my first webpage using HTML.
    </p>

    <p>
        HTML is used to create and structure webpages.
    </p>

</body>
</html>

Explanation

<!DOCTYPE html> declares HTML5.
<html> is the root element.
<head> contains document information.
<title> defines the browser-tab title.
<body> contains visible content.
<h1> creates the main heading.
<p> creates paragraphs.

Expected Output

------------------------------------------------
| My First Webpage                            |
------------------------------------------------

        Welcome to My Website

This is my first webpage using HTML.

HTML is used to create and structure webpages.

LAB ACTIVITY 2: Create Headings and Paragraphs

Objective

To use all six HTML heading levels and paragraph elements.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Headings and Paragraphs</title>
</head>

<body>

    <h1>Heading Level 1</h1>
    <h2>Heading Level 2</h2>
    <h3>Heading Level 3</h3>
    <h4>Heading Level 4</h4>
    <h5>Heading Level 5</h5>
    <h6>Heading Level 6</h6>

    <p>
        HTML provides six levels of headings.
    </p>

    <p>
        The h1 element represents the main heading,
        while h6 represents the lowest heading level.
    </p>

</body>
</html>

Expected Output

Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6

HTML provides six levels of headings.

The h1 element represents the main heading,
while h6 represents the lowest heading level.

LAB ACTIVITY 3: Text Formatting

Objective

To demonstrate different HTML text-formatting elements.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Text Formatting</title>
</head>

<body>

    <h1>HTML Text Formatting</h1>

    <p>
        <strong>This is important text.</strong>
    </p>

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

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

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

    <p>
        <small>This is small text.</small>
    </p>

    <p>
        <del>This text is deleted.</del>
    </p>

    <p>
        <ins>This text is inserted.</ins>
    </p>

    <p>
        Water formula: H<sub>2</sub>O
    </p>

    <p>
        Mathematical expression: X<sup>2</sup>
    </p>

</body>
</html>

Expected Output

HTML Text Formatting

This is important text.

This is emphasized text.

This is underlined text.

This is highlighted text.

This is small text.

This text is deleted.

This text is inserted.

Water formula: H₂O

Mathematical expression: X²

The source notes specifically include <strong>, <em>, <u>, <mark>, <small>, <del>, <ins>, <sub>, and <sup>.

LAB ACTIVITY 4: Line Break and Horizontal Line

Objective

To use <br> and <hr> elements.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Line Break and Horizontal Line</title>
</head>

<body>

    <h1>My School</h1>

    <p>
        Shree Secondary School<br>
        Parsa Pataili<br>
        Mahottari, Nepal
    </p>

    <hr>

    <h2>About Our School</h2>

    <p>
        Our school provides quality education
        to students.
    </p>

</body>
</html>

Expected Output

My School

Shree Secondary School
Parsa Pataili
Mahottari, Nepal

----------------------------------------

About Our School

Our school provides quality education
to students.

<br> creates a line break, while <hr> creates a thematic separation.

LAB ACTIVITY 5: Create Hyperlinks

Objective

To create internal and external hyperlinks using the <a> element.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Links</title>
</head>

<body>

    <h1>My Useful Links</h1>

    <p>
        <a href="https://www.google.com">
            Visit Google
        </a>
    </p>

    <p>
        <a href="https://www.wikipedia.org">
            Visit Wikipedia
        </a>
    </p>

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

</body>
</html>

Expected Output

My Useful Links

Visit Google

Visit Wikipedia

Open Example Website in New Tab

Clicking the links takes the user to their specified destinations. The href attribute specifies the destination, and target="_blank" can request a new browsing context.

LAB ACTIVITY 6: Insert an Image

Objective

To display an image using the <img> element and its attributes.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Image</title>
</head>

<body>

    <h1>My School</h1>

    <img
        src="school.jpg"
        alt="School Building"
        width="500"
        height="300"
    >

    <p>
        This is our school building.
    </p>

</body>
</html>

Required File

Place an image named:

school.jpg

in the same folder as the HTML file.

Expected Output

             My School

       ┌───────────────────────┐
       │                       │
       │    School Building    │
       │        IMAGE          │
       │                       │
       └───────────────────────┘

This is our school building.

Important attributes include src, alt, width, and height.

LAB ACTIVITY 7: Create Different Types of Lists

Objective

To create unordered, ordered, and description lists.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Lists</title>
</head>

<body>

    <h1>HTML Lists</h1>

    <h2>Unordered List</h2>

    <ul>
        <li>Computer</li>
        <li>Keyboard</li>
        <li>Mouse</li>
        <li>Monitor</li>
    </ul>

    <h2>Ordered List</h2>

    <ol>
        <li>Open the computer</li>
        <li>Open the browser</li>
        <li>Write HTML code</li>
        <li>Save the file</li>
    </ol>

    <h2>Description List</h2>

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

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

        <dt>JavaScript</dt>
        <dd>Programming language commonly used for web interactivity</dd>
    </dl>

</body>
</html>

Expected Output

HTML Lists

Unordered List

• Computer
• Keyboard
• Mouse
• Monitor


Ordered List

1. Open the computer
2. Open the browser
3. Write HTML code
4. Save the file


Description List

HTML
    HyperText Markup Language

CSS
    Cascading Style Sheets

JavaScript
    Programming language commonly used for web interactivity

HTML supports <ul>, <ol>, and <dl> list structures.

LAB ACTIVITY 8: Create a Student Information Table

Objective

To create a table containing student information.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Student Information</title>
</head>

<body>

    <h1>Student Information</h1>

    <table border="1">

        <tr>
            <th>Roll No.</th>
            <th>Name</th>
            <th>Class</th>
            <th>Age</th>
        </tr>

        <tr>
            <td>1</td>
            <td>Ram</td>
            <td>10</td>
            <td>15</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Sita</td>
            <td>10</td>
            <td>15</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Hari</td>
            <td>10</td>
            <td>16</td>
        </tr>

    </table>

</body>
</html>

Expected Output

Roll No.	Name	Class	Age
1	Ram	10	15
2	Sita	10	15
3	Hari	10	16

Important tags

<table> → Table
<tr>    → Table row
<th>    → Heading cell
<td>    → Data cell

These are the core table elements covered in the notes.

LAB ACTIVITY 9: Create a Student Registration Form

Objective

To create a basic HTML form for collecting student information.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Student Registration Form</title>
</head>

<body>

    <h1>Student Registration Form</h1>

    <form>

        <label>Full Name:</label>
        <input type="text" name="fullname">

        <br><br>

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

        <br><br>

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

        <br><br>

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

        <br><br>

        <label>Date of Birth:</label>
        <input type="date" name="dob">

        <br><br>

        <label>Gender:</label>

        <input type="radio" name="gender" value="male">
        Male

        <input type="radio" name="gender" value="female">
        Female

        <br><br>

        <label>Subjects:</label>

        <input type="checkbox" name="subject" value="computer">
        Computer

        <input type="checkbox" name="subject" value="english">
        English

        <input type="checkbox" name="subject" value="math">
        Mathematics

        <br><br>

        <label>Upload Photo:</label>
        <input type="file">

        <br><br>

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

    </form>

</body>
</html>

Expected Output

Student Registration Form

Full Name:     [________________]

Email:         [________________]

Password:      [________________]

Age:           [____]

Date of Birth: [__/__/____]

Gender:        ○ Male   ○ Female

Subjects:      □ Computer
               □ English
               □ Mathematics

Upload Photo:  [Choose File]

               [ Register ]

The source notes cover forms, text boxes, passwords, radio buttons, checkboxes, file input, and submit controls.

LAB ACTIVITY 10: Create a Complete HTML5 Semantic Webpage

Objective

To create a webpage using semantic HTML5 elements.

Full HTML Code

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>My School Website</title>

</head>

<body>

    <header>

        <h1>Shree Secondary School</h1>

        <p>Welcome to our official website</p>

    </header>

    <nav>

        <a href="#home">Home</a> |
        <a href="#about">About</a> |
        <a href="#contact">Contact</a>

    </nav>

    <main>

        <section id="home">

            <h2>Home</h2>

            <p>
                Welcome to our school website.
            </p>

        </section>

        <section id="about">

            <h2>About Us</h2>

            <p>
                Our school provides quality education
                in a friendly learning environment.
            </p>

            <h3>Our Facilities</h3>

            <ul>
                <li>Computer Lab</li>
                <li>Library</li>
                <li>Science Lab</li>
                <li>Sports Ground</li>
            </ul>

        </section>

        <article>

            <h2>Latest News</h2>

            <p>
                Our school has organized various
                educational and extracurricular activities.
            </p>

        </article>

        <aside>

            <h3>Important Notice</h3>

            <p>
                Students should maintain regular attendance.
            </p>

        </aside>

        <section id="contact">

            <h2>Contact Us</h2>

            <form>

                <label>Name:</label>
                <input type="text">

                <br><br>

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

                <br><br>

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

            </form>

        </section>

    </main>

    <footer>

        <p>
            Copyright © 2026 My School
        </p>

    </footer>

</body>
</html>

Expected Output

================================================
        SHREE SECONDARY SCHOOL
        Welcome to our official website
================================================

Home | About | Contact

------------------------------------------------
Home
------------------------------------------------

Welcome to our school website.

------------------------------------------------
About Us
------------------------------------------------

Our school provides quality education
in a friendly learning environment.

Our Facilities

• Computer Lab
• Library
• Science Lab
• Sports Ground

------------------------------------------------
Latest News
------------------------------------------------

Our school has organized various educational
and extracurricular activities.

------------------------------------------------
Important Notice
------------------------------------------------

Students should maintain regular attendance.

------------------------------------------------
Contact Us
------------------------------------------------

Name:  [________________]

Email: [________________]

       [ Submit ]

------------------------------------------------
Copyright © 2026 My School
------------------------------------------------

This activity demonstrates <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>, which are important semantic HTML elements.

LAB ACTIVITY 11: Add Audio and Video

Objective

To embed audio and video into an HTML webpage.

Full HTML Code

<!DOCTYPE html>
<html>

<head>
    <title>Multimedia in HTML</title>
</head>

<body>

    <h1>HTML Multimedia</h1>

    <h2>Audio</h2>

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

    <h2>Video</h2>

    <video controls width="500">

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

        Your browser does not support video.

    </video>

</body>

</html>

Required Files

Place these files in the same folder:

music.mp3
video.mp4

Expected Output

HTML Multimedia

Audio

[ ▶ ━━━━━━━ 🔊 ]

Video

┌───────────────────────────────┐
│                               │
│          VIDEO                │
│                               │
│       ▶ ━━━━━━━━━ 🔊         │
└───────────────────────────────┘

The source specifically covers <audio>, <video>, <source>, and controls.

LAB ACTIVITY 12: HTML Entities and Special Characters

Objective

To display special characters using HTML entities.

Full HTML Code

<!DOCTYPE html>
<html>

<head>
    <title>HTML Entities</title>
</head>

<body>

    <h1>HTML Entities</h1>

    <p>Less than: &lt;</p>

    <p>Greater than: &gt;</p>

    <p>Ampersand: &amp;</p>

    <p>Quotation mark: &quot;</p>

    <p>Non-breaking space: Hello&nbsp;World</p>

    <p>Mathematical example: 5 &lt; 10</p>

</body>

</html>

Expected Output

HTML Entities

Less than: <

Greater than: >

Ampersand: &

Quotation mark: "

Non-breaking space: Hello World

Mathematical example: 5 < 10

HTML entities are useful for representing special characters in HTML.

LAB ACTIVITY 13: Meta Tags and UTF-8

Objective

To use character encoding and viewport meta tags.

Full HTML Code

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta name="description"
          content="My school website">

    <title>My School</title>

</head>

<body>

    <h1>My School Website</h1>

    <p>
        Welcome to our website.
    </p>

    <p>
        नेपाली भाषा पनि HTML मा देखाउन सकिन्छ।
    </p>

</body>

</html>

Expected Output

My School Website

Welcome to our website.

नेपाली भाषा पनि HTML मा देखाउन सकिन्छ।

UTF-8 allows webpages to represent a very large range of characters and languages, while the viewport declaration helps webpages adapt to mobile displays.

LAB ACTIVITY 14: `<div>` and `<span>`

Objective

To understand the difference between block containers and inline containers.

Full HTML Code

<!DOCTYPE html>
<html>

<head>
    <title>DIV and SPAN</title>
</head>

<body>

    <div>

        <h1>Student Information</h1>

        <p>
            Name:
            <span>Ram Kumar</span>
        </p>

        <p>
            Class:
            <span>10</span>
        </p>

        <p>
            School:
            <span>My School</span>
        </p>

    </div>

</body>

</html>

Expected Output

Student Information

Name: Ram Kumar

Class: 10

School: My School

Key difference

<div>  → General block container
<span> → General inline container

The source describes <div> as a general-purpose block container and <span> as an inline container.

LAB ACTIVITY 15: Complete School Website — Final Practical

Objective

To create a complete webpage combining the major HTML concepts learned in the laboratory.

Full HTML Code

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta name="description"
          content="School information website">

    <title>My School Website</title>

</head>

<body>

    <!-- Header Section -->

    <header>

        <h1>Shree Secondary School</h1>

        <p>
            Quality Education for Better Future
        </p>

    </header>


    <!-- Navigation Section -->

    <nav>

        <a href="#home">Home</a> |
        <a href="#about">About</a> |
        <a href="#students">Students</a> |
        <a href="#contact">Contact</a>

    </nav>

    <hr>


    <!-- Main Content -->

    <main>

        <!-- Home -->

        <section id="home">

            <h2>Welcome to Our School</h2>

            <p>
                Welcome to our official school website.
            </p>

            <img
                src="school.jpg"
                alt="School Building"
                width="500"
            >

        </section>

        <hr>


        <!-- About -->

        <section id="about">

            <h2>About Our School</h2>

            <p>
                Our school provides quality education
                and encourages students to participate
                in academic and extracurricular activities.
            </p>

            <h3>Our Facilities</h3>

            <ul>

                <li>Computer Lab</li>
                <li>Science Lab</li>
                <li>Library</li>
                <li>Sports Ground</li>

            </ul>

        </section>

        <hr>


        <!-- Student Table -->

        <section id="students">

            <h2>Student Information</h2>

            <table border="1">

                <tr>

                    <th>Roll No.</th>
                    <th>Name</th>
                    <th>Class</th>
                    <th>Age</th>

                </tr>

                <tr>

                    <td>1</td>
                    <td>Ram</td>
                    <td>10</td>
                    <td>15</td>

                </tr>

                <tr>

                    <td>2</td>
                    <td>Sita</td>
                    <td>10</td>
                    <td>15</td>

                </tr>

                <tr>

                    <td>3</td>
                    <td>Hari</td>
                    <td>10</td>
                    <td>16</td>

                </tr>

            </table>

        </section>

        <hr>


        <!-- Contact Form -->

        <section id="contact">

            <h2>Contact Us</h2>

            <form>

                <label>Name:</label>

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

                <br><br>


                <label>Email:</label>

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

                <br><br>


                <label>Message:</label>

                <br>

                <textarea
                    rows="5"
                    cols="40">
                </textarea>

                <br><br>


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

            </form>

        </section>

    </main>

    <hr>


    <!-- Footer -->

    <footer>

        <p>
            Copyright © 2026 Shree Secondary School
        </p>

    </footer>

</body>

</html>

Expected Output

The final webpage will contain:

====================================================
           SHREE SECONDARY SCHOOL
       Quality Education for Better Future
====================================================

Home | About | Students | Contact

----------------------------------------------------

Welcome to Our School

Welcome to our official school website.

        [ SCHOOL IMAGE ]

----------------------------------------------------

About Our School

Our school provides quality education and
encourages students to participate in academic
and extracurricular activities.

Our Facilities:

• Computer Lab
• Science Lab
• Library
• Sports Ground

----------------------------------------------------

Student Information

┌──────────┬────────┬───────┬─────┐
│ Roll No. │ Name   │ Class │ Age │
├──────────┼────────┼───────┼─────┤
│    1     │ Ram    │  10   │ 15  │
│    2     │ Sita   │  10   │ 15  │
│    3     │ Hari   │  10   │ 16  │
└──────────┴────────┴───────┴─────┘

----------------------------------------------------

Contact Us

Name:    [________________________]

Email:   [________________________]

Message:
[__________________________________]
[__________________________________]
[__________________________________]

         [ Send Message ]

----------------------------------------------------

Copyright © 2026 Shree Secondary School

HTML LAB: Practical File Format

For your school/college practical record, you can write every experiment using this format:

Experiment No. 1

Title: Create a basic HTML webpage

Objective:
To create a simple webpage using HTML.

Requirements:

Computer
Text editor/VS Code/Notepad
Web browser

Procedure:

Open a text editor.
Write the HTML code.
Save the file with .html extension.
Open the file in a web browser.
Observe the output.

Source Code:
Write the complete HTML code.

Output:
Draw/attach the browser output.

Result:
The webpage was successfully created using HTML.

⭐ Most Important Practical Questions

For an HTML practical examination, practice these especially:

Create a basic HTML webpage.
Create a webpage using <h1> to <h6>.
Create a webpage using paragraphs and line breaks.
Demonstrate text formatting tags.
Create hyperlinks.
Insert and format an image.
Create ordered and unordered lists.
Create a student information table.
Create a student registration form.
Demonstrate different <input> types.
Create a webpage using <div> and <span>.
Create a semantic HTML5 webpage.
Embed audio and video.
Demonstrate HTML entities.
Use UTF-8 and viewport meta tags.
Create a complete school website using HTML.

These practicals collectively cover essentially all the major HTML topics contained in your uploaded notes.

HTML full detailed note

HTML LAB ACTIVITIES — FULL PRACTICAL NOTES

LAB ACTIVITY 1: Create a Basic HTML Webpage

Objective

Full HTML Code

Explanation

Expected Output

LAB ACTIVITY 2: Create Headings and Paragraphs

Objective

Full HTML Code

Expected Output

LAB ACTIVITY 3: Text Formatting

Objective

Full HTML Code

Expected Output

LAB ACTIVITY 4: Line Break and Horizontal Line

Objective

Full HTML Code

Expected Output

LAB ACTIVITY 5: Create Hyperlinks

Objective

Full HTML Code

Expected Output

LAB ACTIVITY 6: Insert an Image

Objective

Full HTML Code

Required File

Expected Output

LAB ACTIVITY 7: Create Different Types of Lists

Objective

Full HTML Code

Expected Output

LAB ACTIVITY 8: Create a Student Information Table

Objective

Full HTML Code

Expected Output

Important tags

LAB ACTIVITY 9: Create a Student Registration Form

Objective

Full HTML Code

Expected Output

LAB ACTIVITY 10: Create a Complete HTML5 Semantic Webpage

Objective

Full HTML Code

Expected Output

LAB ACTIVITY 11: Add Audio and Video

Objective

Full HTML Code

Required Files

Expected Output

LAB ACTIVITY 12: HTML Entities and Special Characters

Objective

Full HTML Code

Expected Output

LAB ACTIVITY 13: Meta Tags and UTF-8

Objective

Full HTML Code

Expected Output

LAB ACTIVITY 14: <div> and <span>

Objective

Full HTML Code

Expected Output

Key difference

LAB ACTIVITY 15: Complete School Website — Final Practical

Objective

Full HTML Code

Expected Output

HTML LAB: Practical File Format

Experiment No. 1

⭐ Most Important Practical Questions

Contact Form

LAB ACTIVITY 14: `<div>` and `<span>`