Chapter: 2 - Introduction to HTML
2.1 What is HTML?
HTML (Hypertext Markup Language) is the standard language used to create and design
web pages.
It structures content on the web and is used alongside CSS (for styling) and JavaScript (for
functionality).
HTML is the backbone of web development, and these fundamental elements help
structure, format, and present data on the web
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
2.2 Basic Structure of an HTML Page:
A simple HTML document typically includes the following sections:
<!DOCTYPE html> <!-- Declaration for the document type -->
<html lang="en"> <!-- Opening HTML tag with language attribute -->
<head>
<meta charset="UTF-8"> <!-- Specifies the character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design
meta tag -->
<title>Document Title</title> <!-- Title of the document -->
</head>
<body>
<!-- Content of the page goes here -->
<h1>Welcome to My Web Page</h1>
<p>This is a sample HTML page.</p>
</body>
</html>
Explanation:
<!DOCTYPE html>: Declares the document type and version of HTML (HTML5 here).
<html>: Root element of the document.
<head>: Contains metadata, links to external resources like stylesheets, scripts, etc.
<body>: Contains the visible content of the web page (text, images, etc.)
2.3 HTML Tags
HTML markup tags are usually called HTML tags.
HTML tags are keywords (tag names) surrounded by angle brackets like <html>
HTML tags are the building blocks of HTML. These tags are enclosed in angle brackets (<
>).
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a slash before the tag name
Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>
Common HTML Tags:
Text Formatting Tags:
o <h1> to <h6>: Headings (h1 is the largest, h6 is the smallest).
o <p>: Paragraph.
o <b>: Bold text.
o <i>: Italic text.
o <u>: Underlined text.
o <br>: Line break.
o <strong>: Important text (bold by default).
o <em>: Emphasized text (italic by default).
Links and Images:
o <a>: Anchor tag for hyperlinks.
<a href="https://www.example.com">Visit Example</a>
o <img>: Embeds an image.
<img src="image.jpg" alt="Description of Image">
Lists:
o <ul>: Unordered list (bulleted list).
o <ol>: Ordered list (numbered list).
o <li>: List item.
HTML Elements
In HTML, most elements are written with a start tag (e.g. <p>) and an end tag (e.g.
</p>), with the content in between:
<p>This is a paragraph.</p>
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is
to read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how the
content of the HTML page is to be presented/displayed to the user:
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Basic Tags
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag.
Example
<a href="http://www.w3schools.com">This is a link</a>
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
With comments you can place notifications and reminders in your HTML:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
HTML Hyperlinks (Links)
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another
document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.w3schools.com/">Visit W3Schools</a>
HTML List:
HTML lists allow web developers to group a set of related items in lists.
An unordered HTML list:
Item
Item
Item
Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
1. HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The
list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
Coffee
Milk
2. HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list
items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
1. Coffee
2. Milk
<ol type="I"> <ol type="i"> <ol type="A"> <ol type="a">
<li>Coffee</li> <li>Coffee</li> <li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li> <li>Tea</li> <li>Tea</li>
</ol> </ol> </ol> </ol>
Output: Output: Output: Output:
I. Coffee i. Coffee A. Coffee a. Coffee
II. Tea ii. Tea B. Tea b. Tea
If start with 20 then Output:
<ol start="20">
<li>Coffee</li> 20. Coffee
<li>Tea</li> 21. Tea
<li>Milk</li> 22. Milk
</ol>
2.4 Meta Tags
Meta tags are used to provide metadata about the HTML document like character set, author, and viewport
settings for mobile optimization.
Common Meta Tags:
html
CopyEdit
<meta charset="UTF-8"> <!-- Defines the character encoding -->
<meta name="author" content="Author's Name"> <!-- Document author -->
<meta name="description" content="This is an example webpage"> <!-- Page description -->
<meta name="keywords" content="HTML, tags, website"> <!-- Keywords for search engines -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- For mobile responsiveness -->
charset="UTF-8": Specifies the character encoding.
name="viewport": Ensures the webpage scales correctly on mobile devices.
2.5 HTML forms
Forms allow users to submit data to a server. Forms are created using the <form> tag and can include various
input elements.
Basic Form Structure:
<form action="submit_form.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
Explanation:
<form>: Defines the form element.
action: Specifies the URL where the form data will be sent.
method: Specifies the HTTP method (GET or POST).
<input>: Used to collect user input. Types include text, email, password, radio, checkbox, etc.
<label>: Defines a label for an input element.
HTML forms are used to pass data to a server.
1. Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
How the HTML code above looks in a browser:
First name:
Last name:
2 . Password Field
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
How the HTML code above looks in a browser: Password:
3. Radio Buttons
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female
</form>
How the HTML code above looks in a browser:
Male
Female
4. Checkboxes
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
How the HTML code above looks in a browser:
I have a bike
I have a car
5. Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server.
The data is sent to the page specified in the form's action attribute. The file defined in the action
attribute usually does something with the received input:
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How the HTML code above looks in a browser:
Username:
Submit
6. DropDown List Box
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Output:
2.6 - HTML Frames
Frames allow a web page to display multiple documents in separate sections of the browser window.
However, they are largely outdated in modern web design due to issues with usability and accessibility.
They were once created using the <frameset> tag.
Frameset Example:
<frameset cols="50%, 50%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
This creates a page with two columns, each displaying a different page.
Note: Frames are no longer recommended for modern web development. CSS and other layout
techniques have replaced them.
2.6 HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag. (th stands for table heading) The <td> elements
are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
The width of a table can be defined using CSS.
Tables are used to organize data in rows and columns.
Basic Table Structure:
<html>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Output:
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
Explanation:
<table>: Defines the table.
<tr>: Table row.
<th>: Table header (bold and centered by default).
<td>: Table data/cell.
border: Adds a border to the table (deprecated in favor of CSS).
HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
<html>
<head>
<style>
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
To add padding only above the content, use the padding-top property.
Add padding to the other sides with the padding-bottom, padding-left, and padding-
right properties.
<html>
<head>
<style>
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 50px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on the
table element:
<html>
<head>
<style>
table {
border-spacing: 30px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
HTML Table Colspan & Rowspan
Before Table Colspan & Rowspan code:
<html>
<head>
<style>
</style>
</head>
<body>
<table border="2">
<tr>
<th>enroll no</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Smit</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>Neha</td>
<td>25</td>
</tr>
</table>
</body>
</html>
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
<html>
<body>
<table border="2">
<tr>
<th colspan = "2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Smit</td>
<td>23</td>
</tr>
<tr>
<td>2</td>
<td>Neha</td>
<td>25</td>
</tr>
</table>
</body>
</html>
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
<html>
<body>
<table border="2">
<tr>
<th>enroll no</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td rowspan = "2">1</td>
<td>Smit</td>
<td>23</td>
</tr>
<tr>
<td>Neha</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Example:
<html>
<head>
<style>
</style>
</head>
<body>
<table border="2">
<tr>
<th>sr no</th>
<th>enroll no</th>
<th>Name</th>
<th>subject</th>
<th>mark</th>
</tr>
<tr>
<td>1</td>
<td>123</td>
<td>Smit</td>
<td>WD</td>
<td>80</td>
</tr>
<tr>
<td>2</td>
<td>124</td>
<td>Agna</td>
<td>SE</td>
<td>84</td>
</tr>
<tr>
<td>3</td>
<td>125</td>
<td>Sneha</td>
<td>AI</td>
<td>77</td>
</tr>
<tr>
<td>4</td>
<td>128</td>
<td>Gargi</td>
<td>dsa</td>
<td>77</td>
</tr>
<tr>
<td>5</td>
<td>130</td>
<td>Heta</td>
<td>JAVA</td>
<td>70</td>
</tr>
</table>
</body>
</html>
sr no enroll no Name subject mark
1 123 Smit WD 80
2 124 Agna SE 84
3 125 Sneha AI 77
4 128 Gargi dsa 77
5 130 Heta JAVA 70
2.7 HTML Buttons:
Buttons are interactive elements used in forms or for triggering JavaScript actions.
Button Example:
<button type="button">Click Me!</button>
<button>: Creates a clickable button.
type="button": Specifies the button's action type (can also be "submit" or "reset" for form
controls).
2.8 HTML User Inputs
User inputs are used to collect data from users. Common input elements include text fields, radio
buttons, checkboxes, and drop-down lists.
Common Input Types:
Text Input:
<input type="text" name="username">
Password Input:
<input type="password" name="password">
Radio Buttons:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Checkbox:
<input type="checkbox" name="newsletter" value="subscribe"> Subscribe to Newsletter
Select (Dropdown):
<select name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
Textarea:
<textarea name="message" rows="4" cols="50">Enter text here...</textarea>
HTML Form:
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
Password:
<input type="text" name="pwd"><br><br>
Gender:
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label> <br><br>
country:
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">India</option>
<option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>
Message:
<textarea name="message" id="message" cols="30" rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
2.9 Introduction to HTML5
HTML5 is the latest version of the HyperText Markup Language (HTML), which is the standard for structuring
web content.
It was finalized as a W3C Recommendation in October 2014, with significant improvements over the previous
versions of HTML.
HTML5 was developed to address the needs of modern web applications, mobile devices, and multimedia
content, enabling a more interactive, rich, and responsive user experience.
HTML5 revolutionized web development by introducing new elements, improving multimedia support,
providing APIs for more dynamic interactions, and promoting semantic web content.
It allows for building modern, responsive, and feature-rich websites that perform well across devices, including
mobile and desktop.
The inclusion of native support for video and audio, new form controls, and powerful storage options all
contribute to a more robust web development experience.
2.10 New Features in HTML5 as Compared to HTML4
1. New Elements:
HTML5 introduced several new semantic elements that improve the structure and accessibility of web
pages.
These elements clearly define the purpose of different sections of the page, making content more
understandable for search engines and developers.
Some of the important new elements are:
o <article>: Represents a self-contained piece of content that could be independently
distributed (e.g., a blog post, news article).
o <section>: Represents a section of a document, usually with a heading.
o <nav>: Represents a section of navigation links.
o <header>: Represents the header of a document or section, typically containing metadata,
navigation links, or introductory content.
o <footer>: Represents the footer of a document or section, usually containing information like
copyright, contact info, or related links.
2. Improved Forms:
HTML5 introduced new input types, attributes, and form elements that make web forms more
interactive and easier to work with. Examples include:
o <input type="email">, <input type="date">, <input type="range">.
o New attributes like placeholder, autofocus, required, pattern.
3. Audio and Video Support:
HTML5 provides native support for embedding audio and video without relying on third-party plugins
like Flash.
The <audio> and <video> elements allow developers to embed media directly into web pages.
4. Canvas and SVG:
HTML5 introduced the <canvas> element, which enables dynamic rendering of graphics, animations,
and game visuals directly in the browser.
SVG (Scalable Vector Graphics) also became a native part of HTML, allowing for high-quality,
resolution-independent graphics.
5. Local Storage:
HTML5 introduced the concept of local storage through the localStorage and sessionStorage objects.
This allows websites to store data in the browser, creating offline web applications and reducing the
need for server communication.
6. Geolocation API:
HTML5 provides a Geolocation API that allows web applications to access the user's geographical
location, making location-based services possible.
2.11 Audio and Video Interfaces in HTML5
1. Audio Interface (<audio>):
o The <audio> tag allows for embedding audio files (like MP3, Ogg, or WAV) without relying on
third-party plugins.
o Basic example:
<audio controls>
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
o HTML5 also provides JavaScript interfaces to control the audio, such as play(), pause(),
currentTime, volume, and muted.
2. Video Interface (<video>):
o The <video> tag allows for embedding video files (like MP4, WebM, or Ogg) directly into the
webpage.
o Basic example:
<video controls width="600">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogv">
Your browser does not support the video element.
</video>
o Similar to the <audio> tag, the <video> tag comes with JavaScript controls such as play(),
pause(), currentTime, volume, etc.
2.12 Headers and Footers in HTML5
1. Header (<header>):
o Represents the introductory content of a page or section. It can contain logos,
navigation links, and headings.
o Typically used for grouping content such as navigation menus or introductory material
for a section of a page.
o Example:
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
2. Footer (<footer>):
o Represents the footer of a document or section, containing information like copyright
statements, terms of service, privacy policies, etc.
o It can be used at the bottom of the page or section.
o Example:
<footer>
<p>© 2025 MyWebsite. All rights reserved.</p>
</footer>
2.13 Articles in HTML5
The <article> element represents a standalone piece of content that could be distributed
independently. An article is typically a self-contained unit that could be reused elsewhere (like
in a blog, news post, or forum post).
Example:
<article>
<h2>Breaking News: New HTML5 Features</h2>
<p>HTML5 introduces many new features...</p>
</article>
2.14 HTML Semantics in HTML5
HTML Semantics refers to the use of HTML tags that convey meaning about the content enclosed
within them, rather than merely defining how the content should look.
Importance of Semantic HTML:
o Improves accessibility, making websites easier to navigate for users with disabilities.
o Enhances search engine optimization (SEO), as search engines can better understand
the structure and meaning of the page.
o Makes it easier for developers to understand the structure of the page.
Some important semantic elements introduced in HTML5:
<article>: For content that is a self-contained unit.
<section>: Represents a section in a document.
<header>: Defines introductory content for a document or section.
<footer>: Represents the footer content.
<nav>: Defines navigation links.
<main>: Represents the dominant content of the document (everything except the header,
footer, and sidebar).
