HTML

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and design
webpages. It is the building block of all websites, allowing developers to structure content
using a series of tags and elements. HTML provides the framework that browsers use to
interpret and display text, images, and other content on the web.

Capabilities of HTML
HTML has a variety of capabilities that make it an essential tool for web development:

Content Structure:

• HTML allows you to structure content into headings, paragraphs, lists, links, and more.
This helps in organizing the information on a webpage in a readable and logical manner.
• Example: <h1> for a main heading, <p> for a paragraph, <ul> for an unordered list.

Hyperlinks:
o m
m .c
• HTML allows the creation of hyperlinks using the <a> tag. These links can connect
different pages within a website or link to external sites.

al o
• Example: <a href="https://www.example.com">Click here to

n
visit Example.com</a>

s a
a
Embedding Media:

/ / h
• HTML can embed images, audio, and video les into a webpage using tags like

s :
p
<img>, <audio>, and <video>.

ht t
Example: <img src="image.jpg" alt="An example image”>

Forms:

• HTML provides the ability to create forms that allow users to input data. Forms are used
for tasks like signing up for a newsletter, logging into an account, or submitting feedback.

Example: <form action="/submit" method="post"><input

type="text" name=“username"></form>

1
fi
Tables:

• HTML allows the creation of tables to organize data into rows and columns.

<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apples</td>
<td>$1.00</td>
</tr>
</table>

Semantic Tags:

• HTML5 introduced semantic tags like <header>, <footer>, <article>, and

<section> that give meaning to the structure of a webpage. These tags help search

m
engines and assistive technologies (like screen readers) understand the content better.

<header>
<h1>Welcome to My Website</h1>
.c o
</header>
o m
al
<article>

n
<h2>About Me</h2>

a
<p>This is a section about me.</p>
</article>

as
/ / h
Interactive Content:
s :
tp
ht
• HTML supports interactive elements such as buttons, forms, and embedded scripts (using
JavaScript) that allow for dynamic user interactions.

Example: <button onclick="alert('Hello!')">Click Me!</

button>

Responsive Design:

• Using HTML along with CSS, you can create web pages that adjust their layout and
content to different screen sizes, making them accessible on desktops, tablets, and mobile
devices.

Example: A responsive <div> that changes size depending on the screen width.

2
 History of HTML
HTML 1.0 (1991)

• Overview: The very rst version of HTML was created by Tim Berners-Lee in 1991. It
was simple and supported basic tags like <p>, <h1>, and <a>. HTML 1.0 was not
standardized and was used mainly for sharing documents.
• Capabilities: Basic text formatting, links, and images.

HTML 2.0 (1995)

• Overview: The rst of cial version of HTML, HTML 2.0, was standardized in 1995 by
the Internet Engineering Task Force (IETF). It built upon HTML 1.0 and added more tags
for forms and tables.
• Capabilities: Forms (<form>), tables (<table>), and improved error handling.

HTML 3.2 (1997)

• Overview: HTML 3.2 was developed by the World Wide Web Consortium (W3C) and
became the rst W3C standard. It introduced a wider range of elements, including
support for complex tables, text ow around images, and mathematical equations.

m
• Capabilities: Applets, text ow, enhanced tables.

HTML 4.01 (1999)

.c o
o m
• Overview: HTML 4.01 became the most widely used version of HTML and introduced

al
support for stylesheets (CSS), which separated content from design. It also improved

n
form elements and included better support for internationalization.

a
• Capabilities: CSS integration, internationalization, enhanced forms, and scripting.

as
h
XHTML 1.0 (2000)

:/ /
• Overview: XHTML (Extensible Hypertext Markup Language) was a stricter and cleaner

p s
version of HTML 4.01. It followed XML syntax rules, which required all elements to be

ht t
properly closed and nested.
• Capabilities: XML-based syntax, strict error handling, and better portability.

HTML5 (2014)

• Overview: HTML5, the latest version, was of cially released in 2014 by the W3C. It
brought signi cant changes and introduced new semantic elements, multimedia support
(audio and video), APIs, and enhanced form elements. HTML5 is designed to be
backward-compatible and supports both older and modern web applications.
• Capabilities: Semantic elements, native multimedia support, APIs (like Geolocation,
Canvas), and of ine storage.

3
fi
fi
fl
fi
fi
fi
fl
fl
fi
 Key Milestones in HTML History

• 1990s: The early versions of HTML allowed basic web page creation, leading to the
explosion of the World Wide Web.
• 1996-1999: Introduction of HTML 4.01 set the stage for modern web design with CSS.
• 2000-2010: The development of XHTML and HTML5 standards catered to the needs of a
rapidly evolving web ecosystem.
• Post-2010: HTML5 becomes the foundation for modern web applications, offering support
for multimedia, mobile web, and richer, interactive content.

Writing HTML Documents

• Explanation: HTML (HyperText Markup Language) is the standard language for creating
web pages. An HTML document is essentially a text le containing code that tells the web
browser how to display content on a page.

<!DOCTYPE html>
<html>

m
<head>

o
<title>My First Web Page</title>

.c
</head>
<body>
<h1>Welcome to My Website!</h1>
o m
al
<p>This is my rst paragraph on my rst web page.</p>

n
</body>

a
</html>

as
h
Explanation: This simple HTML document displays a webpage with a title in the browser

/ /
tab, a heading, and a paragraph.

:
p s
Creating an HTML Document

ht t
• Explanation: To create an HTML document, you need to write the HTML code in a text
editor and save the le with a .html extension.
• Example: You can use any text editor like Notepad (Windows) or TextEdit (Mac). After
writing the code, save the le as mypage.html.
Viewing an HTML Document

• Explanation: Once you've saved your HTML document, you can view it by opening the
le in any web browser (e.g., Chrome, Firefox, Edge).
• Example: Double-clicking on mypage.html will open it in your default web browser,
showing the content you wrote in the HTML le.

4
fi
fi
fi
fi
fi
fi
fi
Tags, Elements, and Attributes

• Explanation: HTML is made up of tags, which are the building blocks of an HTML
document. Tags usually come in pairs, with an opening tag and a closing tag. Elements are
the content wrapped by tags. Attributes provide additional information about elements.

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

Explanation: Here, <a> is the anchor tag used for links. href is an attribute that speci es
the URL of the link, and "Visit Example.com" is the element content.

HTML Document Structure

• Explanation: A basic HTML document has a speci c structure, including the <!
DOCTYPE html> declaration, <html>, <head>, and <body> tags.

<!DOCTYPE html>
o m
.c
<html>
<head>
<title>Page Title</title>

o m
al
</head>
<body>
<h1>Main Heading</h1>
a n
s
<p>This is a paragraph.</p>
</body>

h a
/
</html>

s :/
Explanation: This structure ensures that your webpage is properly formatted and displayed

tp
htfor Writing HTML Code
in browsers.

Guidelines

• Explanation: Follow best practices like proper indentation, using lowercase for tags, and
closing all tags properly.

<div>
<p>This is a properly indented paragraph inside a div.</p>
</div>

Explanation: Proper formatting makes the code easier to read and maintain.

5
fi
fi
Common HTML Container Elements

• Explanation: Container elements like <div>, <span>, and <section> are used to
group content together and apply styling or layout changes.

<div>
<h2>Section Title</h2>
<p>Content inside a div container.</p>
</div>

Explanation: The <div> tag is used here to group a heading and a paragraph together.

Character Tags – Logical and Physical

• Explanation: Character tags are used to apply styling or semantics to text. Logical tags
like <em> (emphasis) and <strong> (strong emphasis) convey meaning, while physical
tags like <b> (bold) and <i> (italic) apply speci c styling.

<p>This is <em>important</em> and this is <strong>very important</strong>.</p>

m
Explanation: The text "important" is emphasized, and "very important" is strongly
emphasized.

.c o
m
Attributes of Body Element

al o
• Explanation: The <body> element contains all the content of an HTML document, and it

a n
can have attributes like background, bgcolor, and text (though these are now
outdated and replaced by CSS).

as
/ /
<body bgcolor="lightblue">
h
:
<p>This page has a light blue background color.</p>

s
p
</body>

ht t
Explanation: The bgcolor attribute sets the background color of the webpage.

Empty Elements

• Explanation: Empty elements are HTML tags that do not have any content or closing tags.
Common examples include <br> (line break) and <img> (image).

<p>This is a paragraph.<br>This is the next line.</p>

Explanation: The <br> tag is an empty element that creates a line break.

6
fi
 Character Entities

• Explanation: Character entities are used to display special characters that are reserved in
HTML, such as <, >, &, etc.

<p>Use &lt; to display a less-than symbol and &gt; for a greater-than symbol.</p>

Explanation: &lt; displays <, and &gt; displays >.

Lists in HTML

• Explanation: HTML allows you to create lists, including ordered lists (<ol>) and
unordered lists (<ul>).

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

m
Explanation: This creates a bullet-point list with three items.

Nested List
.c o
o m
al
• Explanation: A nested list is a list inside another list. This can be done with both ordered
and unordered lists.

a n
s
<ul>
<li>Item 1</li>

h a
/
<li>Item 2
<ul>

s :/
<li>Subitem 1</li>

tp
<li>Subitem 2</li>

ht
</ul>
</li>
<li>Item 3</li>
</ul>

Explanation: Here, "Subitem 1" and "Subitem 2" are part of a nested list under "Item 2.’’

De nition List

• Explanation: A de nition list is used to create a list of terms and their descriptions. It uses
the <dl>, <dt>, and <dd> tags.

7
fi
fi
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard language for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling HTML documents.</dd>
</dl>

Explanation: This creates a list where "HTML" and "CSS" are terms with their
corresponding descriptions.

o m
m .c
al o
a n
as
/ / h
s :
tp
ht