1. Introduction
What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It helps browsers display content such as text, images, links, tables, forms, audio, and video.
HTML is not a programming language. It is a markup language that defines the structure of web content. HTML works together with CSS for styling and JavaScript for interactivity.
Why HTML is Important
HTML is the foundation of every website and web application. It helps developers organize content properly and allows browsers to display webpages correctly.
Modern HTML also supports multimedia, semantic elements, accessibility, and responsive web design.
Uses of HTML
HTML is used for:
- Creating websites
- Building forms
- Embedding multimedia
- Creating tables and lists
- Designing web interfaces
- Linking webpages
2. History of HTML
HTML was created by Tim Berners-Lee in 1991 while working at CERN. The first version of HTML contained simple tags for headings, paragraphs, and links.
Over time, HTML evolved from HTML 1.0 to HTML5 with support for multimedia, semantic elements, APIs, and responsive design.
Evolution of HTML
HTML 1.0
<h1>Hello World</h1>
<p>Basic HTML page.</p>
HTML 2.0
<form>
<input type="text" placeholder="Enter Name">
</form>
HTML 3.2
<table border="1">
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
</table>
HTML 4.01
<div>
<h2>Welcome</h2>
</div>
XHTML
<img src="image.jpg" alt="Image" />
HTML5
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
3. Features of HTML
Easy to Learn
HTML uses simple tags and beginner-friendly syntax.
<h1>Hello</h1>
<p>This is HTML.</p>
Platform Independent
HTML works on all operating systems and browsers such as Chrome, Firefox, Edge, and Safari.
Supports Multimedia
<img src="image.jpg" alt="Image">
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
Semantic Structure
HTML5 introduced semantic tags that improve readability, SEO, and accessibility.
<header>
<h1>My Website</h1>
</header>
<section>
<p>Welcome</p>
</section>
<footer>
<p>Footer</p>
</footer>
Works with CSS and JavaScript
HTML provides structure, CSS handles styling, and JavaScript adds functionality.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 id="title">Hello</h1>
<script>
document.getElementById("title").innerHTML = "Welcome";
</script>
</body>
</html>
4. Structure of an HTML Document
A basic HTML document contains the following structure:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a webpage.</p>
</body>
</html>
Main Elements
-
<!DOCTYPE html>→ Defines HTML5 document -
<html>→ Root element -
<head>→ Contains metadata -
<title>→ Defines webpage title -
<body>→ Contains visible webpage content
5. Basic HTML Tags
Headings
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
Paragraph
<p>This is a paragraph.</p>
Links
<a href="https://example.com">Visit Website</a>
Images
<img src="image.jpg" alt="Sample Image">
Lists
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
Div and Span
<div>
<span>Hello World</span>
</div>
6. Semantic HTML
Semantic tags describe the meaning of content clearly.
Common Semantic Tags
<header><main><section><article><footer><nav>
Example
<header>
<h1>Website</h1>
</header>
<nav>
<a href="#">Home</a>
</nav>
<main>
<section>
<article>
<h2>Article Title</h2>
</article>
</section>
</main>
<footer>
Copyright 2026
</footer>
Semantic HTML improves readability, SEO, and accessibility.
7. HTML Forms
Forms are used to collect user input.
<form>
<label>Name:</label>
<input type="text" required>
<br><br>
<label>Message:</label>
<textarea></textarea>
<br><br>
<label>City:</label>
<select>
<option>Delhi</option>
<option>Mumbai</option>
</select>
<br><br>
<button type="submit">Submit</button>
</form>
8. HTML Tables
Tables display data in rows and columns.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Suraj</td>
<td>21</td>
</tr>
</table>
Important Tags
<table><tr><th><td>colspanrowspan
9. Multimedia in HTML
HTML supports multimedia elements such as audio, video, iframe, and pictures.
Audio
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
Video
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
Iframe
<iframe src="https://example.com"></iframe>
Picture
<picture>
<img src="image.jpg" alt="Image">
</picture>
10. HTML APIs
Geolocation API
navigator.geolocation.getCurrentPosition();
Drag and Drop API
<div draggable="true">Drag Me</div>
Local Storage
localStorage.setItem("name", "Suraj");
11. Accessibility in HTML
Accessibility makes websites usable for all users.
Important Practices
- Use
alttext for images - Use proper labels
- Use semantic tags
- Use ARIA roles
Example
<img src="logo.png" alt="Website Logo">
<label for="name">Name</label>
<input type="text" id="name">
12. SEO Best Practices
SEO helps webpages rank better in search engines.
Best Practices
- Use meta tags
- Maintain heading hierarchy
- Use semantic HTML
- Optimize images
Example
<meta name="description" content="HTML Documentation">
13. Advantages and Limitations
Advantages
- Easy to learn
- Lightweight
- Supported by all browsers
- Free to use
Limitations
- Cannot create logic alone
- Requires CSS for styling
- Requires JavaScript for interactivity
14. Best Practices
- Use semantic tags
- Write clean indentation
- Keep code organized
- Optimize images
- Avoid inline CSS
- Use meaningful names
15. Real-World Applications
HTML is used in:
- Websites
- Portfolios
- Blogs
- Dashboards
- E-commerce websites
- Web applications
16. Conclusion
HTML is the foundation of web development and is used to create and structure webpages. It provides the basic framework for displaying content on the internet.
With HTML5, web development became more powerful through support for multimedia, APIs, semantic elements, and accessibility. HTML continues to be one of the most important technologies in modern web development.
17. References
- MDN Web Docs
- W3Schools
- WHATWG HTML Standard
- freeCodeCamp
- Banner image used in this article is referenced from web.dev.