HTML Tutorial
1. Introduction to HTML
What is HTML?
→ HTML (HyperText Markup Language) is the standard language for creating webpages.
→ HTML is the code that is used to structure a web page and its content.
→ The component used to design the structure of websites are called HTML tags
Structure of an HTML document:
Example of Basic Html Page:
<!DOCTYPE html>
<html >
<head>
<title>Document</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Explanation:
<!DOCTYPE html> → Tells the browser this is an HTML5 document.
<html> → Root element.
<head> → Contains metadata (title, styles, links, etc.).
<body> → Contains content visible on the page.
<p > → Paragraph tag
O/P:
HTML Element
An HTML element is defined by a starting tag. If the element
contains other content, it ends with a closing tag, where the
element name is preceded by a forward slash as shown below
with few tags:
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements
which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.
HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what
kind of content should be placed in what part of an HTML document.
2. HTML Tags
In HTML, tags are categorized into two main types: container tags and empty tags.
a. Container/Paired Tags
These tags come in pairs: an opening tag <tag> and a closing tag </tag>.
They wrap content inside them.
Example:
<p>This is a paragraph.</p>
<b>Bold text</b>
<h1>Heading 1</h1>
b. Empty/ Singular (Self-Closing) Tags
These tags do not have closing tags.
They stand alone and do not wrap content.
Example:
<br> <!-- line break -->
<hr> <!-- horizontal line -->
<img src="[Link]" alt="Example"> <!-- image -->
<input type="text"> <!-- form input -->
Text Formatting Tags
<h1> to <h6> → Headings (h1 = largest, h6 = smallest).
<p> → Paragraph.
<br> → Line break (self-closing).
<hr> → Horizontal line (self-closing).
<b> → Bold text.
<i> → Italic text.
<u> → Underlined text.
<strong> → Important text (bold).
<em> → Emphasized text (italic).
<mark> → Highlighted text.
<small> → Smaller text.
<sup> / <sub> → Superscript( x 2 ¿ / Subscript ( x 2 ¿ .
<pre> → Pre-formatted text (display text as it is without ignoring spaces and next line).
<center> →Align text center
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Tags Example</title>
</head>
<body>
<!-- Headings -->
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<hr> <!--horizontal line -->
<!-- Paragraph and Line Break -->
<p>This is a paragraph. HTML is used to <br> structure content on the web.</p>
<hr>
<!-- Text Formatting -->
<p><b>This text is bold.</b></p>
<p><i>This text is italic.</i></p>
<p><u>This text is underlined.</u></p>
<p><strong>This text is strong (important).</strong></p>
<p><em>This text is emphasized.</em></p>
<p><mark>This text is highlighted.</mark></p>
<p><small>This text is small.</small></p>
<p>Subscript = H<sub>2</sub>O </p>
<p>Superscript = a<sup>2</sup> + b<sup>2</sup> = 8.</p>
<pre> This is pre-formatted text</pre>
<p><center>This is centered text</center></p>
</body>
</html>
[Link] Attributes
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All
attributes are made up of two parts: a name and a value:
Attribute Values Description Example
id user-defined Unique identifier for an element <p id="p_1">Hi</p>
names
class user-defined CSS class selector for styling <p class="p_class">Hi</p>
names
style CSS styles Inline CSS styling <p style="color:red; font-
weight:bold;">Hi</p>
align left, right, Horizontal alignment (deprecated for <p align="center">Hi</p>
center most tags; CSS preferred)
width numeric value Width of images, tables, or other <img src="[Link]" width="300">
or % elements
height numeric value Height of images, tables, or other <img src="[Link]" height="200">
or % elements
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Attributes Example</title>
<style>
/* Example of using class in CSS */
.p_class {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<h2>HTML Attributes Example</h2>
<!-- id attribute -->
<p id="p_1">This paragraph has a unique id.</p>
<!-- class attribute -->
<p class="p_class">This paragraph is styled using a CSS class.</p>
<!-- style attribute -->
<p style="color:red; font-weight:bold;">This paragraph uses inline styling.</p>
<!-- align attribute -->
<p align="center">This paragraph is centered using the align attribute.</p>
<!-- width and height with image -->
<img src="[Link]" alt="Sample Image" width="300" height="200">
</body>
</html>
4. Links & Images
🔗 1. Links (<a> tag)
The <a> tag stands for anchor. It is used to connect one page to another, or to link text/images to another resource.
Basic Syntax: <a href="URL">Clickable Text</a>
Key Attributes
1. href – destination of the link
o Can be a website ([Link]
o A local file ([Link])
o An email ([Link]
o A phone number ([Link]
2. target – tells where to open the link
o _self → opens in same tab (default)
o _blank → opens in new tab
o _parent → opens in parent frame
o _top → opens in full browser window
3. title – tooltip text shown when you hover
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Links</title>
<style>
* {
padding: 10px;
}
#section2 {
margin-top: 800px;
background-color: lightgray;
height: 800px;
}
</style>
</head>
<body>
<h1>Links Target Example</h1>
<hr /> <br />
<!-- Opens in the same tab (default) -->
<a href="[Link] target="_self">Google (same tab)</a>
<br /><br />
<!-- Opens in a new tab -->
<a href="[Link] target="_blank">Wikipedia (new tab)</a>
<br /><br />
<!-- Opens in parent frame -->
<a href="[Link] target="_parent">YouTube (parent frame)</a>
<br /><br />
<!-- Opens in full browser window -->
<a href="[Link] target="_top">GitHub (full window)</a>
<br /> <br />
<a href="#section2">Jump to Section 2</a>
<div id="section2">
<a href="[Link]">Go to Index Page</a><br /> <br>
<!-- Email link -->
<a href="[Link] Email</a> <br> <br>
<!-- Phone link -->
<a href="[Link] Us</a>
</div>
</body>
</html>
🖼 2. Images (<img> tag)
The <img> tag is an empty tag (no closing tag) used to display images.
Basic Syntax:
<img src="[Link]" alt="Description">
Key Attributes:
1. src – the path of the image (local file or URL).
E.g: local image → "images/[Link]" or online image → "[Link]
2. alt – alternative text (important for accessibility & SEO).
o Shown if the image can’t load.
o Read by screen readers for visually impaired users.
3. width and height – size of image in pixels.
Image as a Link
You can put an <img> inside an <a> tag.
This makes the image clickable.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Links and Images Example</title>
</head>
<body>
<h2>Images Examples</h2>
<!-- Local Image -->
<img src="[Link]" alt="My Photo" width="150"><br><br>
<!-- Online Image -->
<img src="[Link] alt="React
Logo" width="120"><br><br>
<h2>Image as a Link</h2>
<!-- Clickable Image -->
<a href="[Link] target="_blank">
<img
src="[Link]
alt="Google Logo" width="200">
</a>
</body>
</html>
✅ Mini Assignment for You:
1. Create a page with:
o A link to your favorite social media site (open in a new tab).
o An image of your choice with width 300px.
o A link that jumps to a section at the bottom of the page (use id and href="#id").
5. Lists
HTML supports 3 main types of lists:
🔹 1. Ordered List (<ol>)
An ordered list is numbered (1, 2, 3…).
Attributes:
type → change numbering style
o type="1" → 1, 2, 3 (default)
o type="A" → A, B, C
o type="a" → a, b, c
o type="I" → I, II, III
o type="i" → i, ii, iii
start → start from a specific number
<ol type="A" start="3">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
🔹 2. Unordered List (<ul>)
An unordered list uses bullets.
Attributes:
type → change bullet style (not supported in HTML5, use CSS instead)
o disc (default) ●
o circle ○
o square ■
<ul type="square">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
🔹 3. Definition List (<dl>)
A definition list is used for terms and their meanings.
<dl>
<dt> A</dt>
<dd>Apple</dd>
<dt>B</dt>
<dd>Banana</dd>
<dt>O</dt>
<dd>Orange </dd>
</dl>
Nested Lists
Lists inside another list.
Example:
Fruits
1. Apple
2. Banana
Vegetables
o Carrot
o Potato
Example:
<!DOCTYPE html>
<html>
<head>
<title>List Examples</title>
</head>
<body>
<h2>1. Ordered List</h2>
<ol type="I" start="2">
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ol>
<h2>2. Unordered List </h2>
<ul type="square">
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ul>
<h2>3. Definition List </h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
<h2>4. Nested List </h2>
<ul>
<li>Fruits
<ol type="a">
<li>Apple</li>
<li>Banana</li>
</ol>
</li>
<li>Vegetables
<ul type="circle">
<li>Carrot</li>
<li>Potato</li>
</ul>
</li>
</ul>
</body>
</html>
✅ Mini Assignment for You:
Create a page with:
1. An unordered list of your 3 hobbies.
2. An ordered list of your daily routine (at least 5 steps).
3. A definition list for 3 computer terms.
6. Tables
An HTML table is used to display data in rows and columns.
🔹 1. Basic Table
A table is made with the <table> tag, and inside it we use:
<table> → defines a table
<tr> → Table row (horizontal line of cells)
<th> → Table header cell (bold & centered by default)
<td> → Table data cell (normal cell)
Basic Table Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<h2>Simple Table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Raj</td>
<td>24</td>
</tr>
<tr>
<td>Sita</td>
<td>22</td>
</tr>
</table>
</body>
</html>
🔹 2. Table Attributes
border="1" → adds border (use CSS in modern HTML).
cellpadding → space inside cells.
cellspacing → space between cells.
width → set table width.
align → position table (deprecated, use CSS).
<table border="1" cellpadding="10" cellspacing="5" width="60%" align="center">
<!--copy and paste above code-->
</table>
🔹 3. Table with Colspan , Rowspan & caption
colspan → one cell spans multiple columns.(colspan="3" → makes one cell stretch across 3 columns)
rowspan → one cell spans multiple rows.
<caption> → adds a title
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="8" width="50%" align="center">
<caption>Time Table</caption>
<tr>
<th>Day</th>
<th colspan="2">Subjects</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
</tr>
<tr>
<td rowspan="2">Tuesday</td>
<td>Science</td>
<td>History</td>
</tr>
<tr>
<td colspan="2">Sports</td>
</tr>
</table>
</body>
</html>
Table Sections
<thead>→ header section(to wrap the table head)
<tbody>→ main body (to warp the table body)
<tfoot>→ footer (summary row)
To center the table data in above example, use:
<tbody align="center">
...
</tbody>
✅ Mini Assignment for You:
Create a table with:
1. A heading row (Name, Age, City).
2. At least 3 rows of data.
3. Use colspan or rowspan in one of the rows.
4. Add a caption on top of the table.
7. Forms
An HTML form is used to collect user input (like text, email, password, etc.)
E.g.- sign up/login/help requests/contact me
It is created with the <form> tag.
Inside a form, we use different form elements like:
<input> (text, password, email, checkbox, radio, etc.)
<textarea> (multi-line text box)
<select> & <option> (dropdown menu)
<button> (submit, reset, or normal button)
<label> (describes an input field)
🔹 1. <form> Tag
The container for all form elements.
Attributes:
o action → URL where the form data is sent (e.g., action="/submit").
o method → get or post (how the data is sent).
get → appends data in URL, visible to user.
post → sends data in the request body, not visible.
o enctype → encoding type for file uploads (multipart/form-data).
<form action="/submit" method="post">
<!-- form elements go here -->
</form>
🔹 2. <input> Tag
Used for single-line input fields.
It is a self-closing tag.
Type attribute determines the kind of input:
Type Purpose
text Single-line text input
password Hides entered text (for passwords)
email Validates email format
number Accepts only numbers
date Date picker
radio Single choice from multiple options
checkbox Multiple selections allowed
file File upload
submit Submits the form
reset Resets the form fields
button Generic button (JavaScript actions)
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
🔹 3. <label> Tag
Labels describe input fields.
Use for="id" to link label with input.
Improves accessibility and usability.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
🔹 4. <textarea> Tag
Used for multi-line text input.
Attributes:
o rows → number of visible text lines
o cols → width of textarea
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
🔹 5. <select> and <option> Tags
Creates drop-down lists.
<option> defines each selectable item.
Attribute selected can set a default option.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="nepal">Nepal</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>
🔹 6. Radio Buttons and Checkboxes
Radio buttons → select only one option from a group.
Checkboxes → select multiple options.
<!-- Radio Buttons -->
Gender:
<input type="radio" id="male" name="gender" value="Male">Male
<input type="radio" id="female" name="gender" value="Female">Female
<!-- Checkboxes -->
Hobbies:
<input type="checkbox" id="reading" name="hobby" value="Reading">Reading
<input type="checkbox" id="sports" name="hobby" value="Sports">Sports
🔹 7. <button> Tag
Used for clickable buttons.
Types:
o submit → sends form data
o reset → clears the form
o button → custom button for JS actions
<button type="submit">Submit</button>
<button type="reset">Reset</button>
🔹 8. Other Important Attributes
name → unique name for each input (used when sending data to server)
id → unique identifier, links to <label>
required → makes a field mandatory
placeholder → hint text inside input field
<input type="text" name="username" id="username" placeholder="Enter your name" required>
🔹 Complete Example of a Form
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="/submit" method="post">
<!-- Text Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="fullname" required>
<br><br>
<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<!-- Password Input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<!-- Radio Buttons -->
Gender:
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
<br><br>
<!-- Checkboxes -->
Hobbies:
<input type="checkbox" id="reading" name="hobby" value="Reading">
<label for="reading">Reading</label>
<input type="checkbox" id="sports" name="hobby" value="Sports">
<label for="sports">Sports</label>
<br><br>
<!-- Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="nepal">Nepal</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>
<br><br>
<!-- Textarea -->
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
<br><br>
<!-- Buttons -->
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
8. Semantic HTML(Page layout technique)
Semantic HTML means using meaningful tags to structure content.
A semantic tag clearly describes its meaning both to the browser and developer.
Example: <header> = header section, <footer> = footer section.
Non-semantic tags like <div> and <span> don’t give meaning (only used for grouping/styling).
Common Semantic HTML Tags
1. Structural Tags
<header> → Defines the top section of a webpage or section (logo, navigation, title).
<nav> → Defines navigation links.
<main> → Defines the main content of the webpage.
<section> → Defines a thematic section (like a chapter).
<article> → Defines independent content (like blog post, news).
<aside> → Defines side content (sidebar, ads, tips).
<footer> → Defines the bottom section (copyright, contact info).
2. Text Meaning Tags
<strong> → Important text (bold).
<em> → Emphasized text (italic).
<mark> → Highlighted text.
<abbr> → Abbreviations (with tooltip using title).
<cite> → Title of a creative work (book, movie).
<time> → Represents a date/time.
3. Media & Interactive
<figure> → Groups image/video with a caption.
<figcaption> → Caption for <figure>.
<details> → Expandable/collapsible content.
<summary> → Title for <details>
Example: Non-Semantic vs Semantic
Non-semantic (old way with <div>):
<div id="header">My Website</div>
<div id="nav">Home | About | Contact</div>
<div id="content">Welcome to my website...</div>
<div id="footer">Copyright 2025</div>
Semantic (modern HTML5):
<header> ... </header>
<nav> ... </nav>
<main> ... </main>
<footer> ... </footer>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML Example</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<article>
<header>
<h2>What is Semantic HTML?</h2>
<p><time datetime="2025-10-01">October 1, 2025</time></p>
</header>
<p><strong>Semantic HTML</strong> gives meaning to content instead of just
appearance.</p>
<p>For example, use <em><article></em> for blog posts, not just
<em><div></em>.</p>
<figure>
<img src="[Link]" alt="Semantic HTML Example" width="300">
<figcaption>An image showing semantic HTML tags.</figcaption>
</figure>
</article>
<aside>
<h3>Related Posts</h3>
<ul>
<li><a href="#">HTML Basics</a></li>
<li><a href="#">Forms in HTML</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 My Blog | <abbr title="HyperText Markup Language">HTML</abbr></p>
</footer>
</body>
</html>
Why Use Semantic HTML?
Improves readability of code.
Better for SEO (search engines understand content structure).
Helps with accessibility (screen readers for visually impaired users).
Makes maintenance easier.
✅ Mini Assignment for You:
Create a simple blog layout using semantic tags with:
A <header> with blog title.
A <nav> with 3 links.
A <main> containing an <article> with heading + paragraph.
An <aside> with related links.
A <footer> with copyright.
9. Multimedia(Audio & video)
Video Tag : <video src="myVid.mp4"> My Video </video>
Audio Tag : <audio src="audio.mp3"> My Audio </audio >
Attributes:
controls → Shows play/pause/volume.
autoplay → Plays automatically.
loop → Plays repeatedly.
poster → Thumbnail image before video plays.
muted → Starts without sound.
Width/height → Sets width and height of the audio/video.
Embedding from YouTube
You can also embed external multimedia like YouTube videos using <iframe>. For this you can directly go on You
Tube video , click on share option then click on embed and copy the code.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h2>Audio Example</h2>
<audio controls>
<source src="song.mp3" type="audio/mp3" />
</audio>
<h2>Video Example</h2>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4" />
</video>
<h2>Embedded YouTube Video</h2>
<iframe
width="560"
height="315"
src="[Link]
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-
in-picture"
allowfullscreen
></iframe>
</body>
</html>
Div Tag Span Tag
Div is a container used for other HTML elements Span is also a container used for other HTML elements
Block Element (takes full width) Inline Element (takes width as per size)
Adding CSS to HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Audio</title>
<!-- External CSS Example -->
<link rel="stylesheet" type="text/css" href="../css/[Link]">
<!-- Internal CSS Example -->
<style>
.section {
background-color: aqua;
}
</style>
</head>
<body>
<section class="section">
<div>
<!-- Inline CSS Example -->
<h1 style="font-size: 20px;">Adding CSS</h1>
</div>
</section>
</body>
</html>
Adding JavaScript to HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
</head>
<body>
<script>
[Link]("Hello, JavaScript!");
[Link]("This is a message in the console.");
alert("Welcome to JavaScript!");
</script>
</body>
</html>
Note made by Raj Kumar Shrestha