Introduction to HTML: History &
Evolution
🌐 What is HTML?
HTML stands for HyperText Markup Language.
It is the core language for structuring content on the web.
HTML allows you to describe the layout and meaning of content
using 'tags'.
It works together with CSS (for design) and JavaScript (for
interactivity).
📖 Why 'HyperText' & 'Markup'?
HyperText refers to text that contains links (hyperlinks) to other
text or resources.
It allows users to quickly navigate between different parts of the
internet.
Markup Language is a system for annotating text to add structure
and meaning, without affecting its actual content.
HTML 'marks up' content like headings, paragraphs, lists, links, and
images using tags.
How and When Did HTML Start?
HTML was created by Tim Berners-Lee, a British scientist working
at CERN.
It was first introduced in 1991 to help researchers easily share and
access documents online.
The initial proposal of HTML included just 18 simple tags for
structuring text, links, and lists.
Tim also created the first web browser — called WorldWideWeb —
to display these HTML documents.
📝 HTML Versions & Evolution
HTML 1.0 (1993) - The very first official release.
HTML 2.0 (1995) - Introduced forms, images, and text alignment.
HTML 3.2 (1997) - Added tables, scripting with JavaScript, and
better page layout options.
HTML 4.01 (1999) - Focused on separating content and design,
improved forms and accessibility.
XHTML (2000) - A stricter, XML-based version of HTML.
HTML5 (2014) - Modernized HTML with support for video, audio,
canvas graphics, offline web apps, and semantic tags.
🌍 The Role of W3C (World Wide Web Consortium)
The W3C was founded by Tim Berners-Lee in 1994 to oversee the
development of web standards.
It maintains and publishes official HTML specifications to ensure
compatibility and openness on the web.
HTML is constantly evolving through a collaborative, open process
led by the W3C.
🎉 Major Features Introduced in HTML5
Semantic Tags like <header>, <footer>, <article>, <section> for
clearer structure.
Built-in support for audio and video without plugins.
The <canvas> element for 2D graphics and animations.
Offline web application support using local storage and caching.
Enhanced form controls like date pickers, color selectors, and
sliders.
🔄 How HTML Has Shaped the Web
HTML made it possible for anyone to publish content on the web.
It transformed the internet from a technical research tool to a global
communication platform.
Without HTML, there would be no websites, blogs, social media
platforms, or online shops.
The open and evolving nature of HTML is what keeps the web
accessible and innovative.
📖 Basic Structure of an HTML
Document
📑 What is the Basic Structure of an HTML Document?
An HTML document starts with a Document Type Declaration
(DOCTYPE) to tell the browser which version of HTML it’s using.
It contains HTML elements enclosed in <html> tags.
The content is divided into two main parts: <head> and <body>.
🧱 Key Parts of an HTML Document
<!DOCTYPE html>: Declares the document type and HTML
version.
<html>: The root element of the document.
<head>: Contains metadata, title, links to stylesheets, and scripts.
<body>: Holds the visible content of the webpage like headings,
paragraphs, images, and links.
📝 Example: Basic HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<title>Web Application</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web Application</p>
</body>
</html>
Notes
Every HTML document should start with <!DOCTYPE html> for
HTML5.
The <title> tag is displayed in the browser tab.
The <body> section holds everything you see on the page.
Common HTML Tags
🧩 Basic Structure Tags
<!DOCTYPE html> → Defines document type
<html> → Root of the webpage
<head> → Metadata (title, links, styles, scripts)
<title> → Browser tab title
<body> → Main visible page content
📝 Text Formatting Tags
<h1> to <h6> → Headings (h1 is biggest)
<p> → Paragraph
<b> / <strong> → Bold / Strong emphasis
<i> / <em> → Italic / Emphasis
<u> → Underline
<br> → Line break
<hr> → Horizontal line
📌 Links & Media
<a> → Hyperlink
Example: <a href="[Link] Here</a>
<img> → Image
Example: <img src="[Link]" alt="description">
<audio> → Embed audio
<video> → Embed video
🔳 Containers & Layout
<div> → Block container (layout)
<span> → Inline container (styling small text)
📋 Lists
<ul> → Unordered (bullets)
<ol> → Ordered (numbers)
<li> → List item
📦 Tables
<table> → Table
<tr> → Table Row
<td> → Table Data
<th> → Table Header
🧾 Forms
<form> → Form wrapper
<input> → Input field
<textarea> → Multi-line text box
<button> → Button
<label> → Label for inputs
<select> / <option> → Drop-down
⚙️Semantic HTML5 Tags
These make code meaningful & SEO friendly:
<header>
<nav>
<section>
<article>
<aside>
<footer>
<main>
Simple Example Bringing Them Together
<!DOCTYPE html>
<html>
<head>
<title>HTML Demo</title>
</head>
<body>
<header>
<h1>Welcome to HTML</h1>
</header>
<p>This is a paragraph.</p>
<a href="[Link] Example</a>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<img src="[Link]" alt="Sample Image">
</body>
</html>
📑 HTML Lists & Tables
📋 Unordered List (`<ul>`)
A list of items where the order does not matter, typically shown with
bullets.
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
📑 Ordered List (`<ol>`)
A list of items where the order matters, typically numbered.
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
🔘 Description List (`<dl>`)
A list of terms and their corresponding descriptions.
<dl>
<dt>HTML</dt>
<dd>A markup language for web pages.</dd>
<dt>CSS</dt>
<dd>Styles web content.</dd>
<dt>JavaScript</dt>
<dd>Adds interactivity to websites.</dd>
</dl>
📊 Basic Table Structure
Tables are used to display tabular data using rows and columns.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
📝 Table with Caption and Headings
You can add captions, headers, and define sections within a table.
<table border="1">
<caption>Student Marks</caption>
<thead>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>85</td>
</tr>
<tr>
<td>Sara</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">End of List</td>
</tr>
</tfoot>
</table>
📝 HTML Forms & Input Types
📝 Basic HTML Form
Forms are used to collect user input and submit it to a server.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<button type="submit">Submit</button>
</form>
🔡 Text Input (`type="text"`)
Used for a single-line text field.
<input type="text" placeholder="Enter your name" />
🔒 Password Input (`type="password"`)
Hides characters as the user types.
<input type="password" placeholder="Enter password" />
📧 Email Input (`type="email"`)
Validates email addresses.
<input type="email" placeholder="Enter your email" />
📅 Date Input (`type="date"`)
Allows the user to select a date from a date picker.
<input type="date" />
📦 Checkbox (`type="checkbox"`)
Allows the user to select one or multiple options.
<label>
<input type="checkbox" /> I agree to the terms
</label>
⚪ Radio Buttons (`type="radio"`)
Lets the user select one option from a set.
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
🎨 Color Picker (`type="color"`)
Lets the user pick a color from a color dialog.
<input type="color" />
🎛 Range Slider (`type="range"`)
Allows the user to select a value from a range.
<input type="range" min="0" max="100" />
📝 Textarea (Multi-line Text)
A multi-line text input field.
<textarea rows="4" cols="50" placeholder="Enter your message here"></textarea>
📂 File Upload (`type="file"`)
Allows the user to select and upload files.
<input type="file" />
🔘 Dropdown Select (`<select>`)
Lets the user select an option from a dropdown menu.
<select>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>