HTML is a markup language used to define the layout of a web page
using a system of tags and attributes. Tags are keywords enclosed in
angle brackets (e.g., <p>, <a>, <div>) that label parts of content
such as headings, paragraphs, lists, links, images, and more.
HTML is called "HyperText" because it allows for the linking of
documents via hyperlinks. It’s "Markup" because it marks up or
annotates content with tags to convey how the browser should
present the content.
2. Historical Background
HTML was created by Tim Berners-Lee in 1991 as a means to share
information via documents that are interconnected by hyperlinks.
Since then, it has evolved significantly:
● HTML 2.0 (1995): The first official version.
● HTML 4.01 (1999): Introduced more formatting capabilities.
● XHTML (early 2000s): A stricter, XML-based version.
● HTML5 (2014): A major update with support for multimedia,
semantic elements, and APIs.
● HTML5 is the current standard and is maintained by the W3C
(World Wide Web Consortium) and WHATWG (Web Hypertext
Application Technology Working Group).
3. Basic Structure of an HTML Document
A basic HTML document includes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>: Declares the document type.
<html>: The root of the HTML document.
<head>: Contains meta-information, links to stylesheets, and
scripts.
<body>: Contains the content displayed on the web page.
4. HTML Tags and Elements
HTML is made up of elements, which usually consist of an opening
tag, content, and a closing tag:
<p>This is a paragraph.</p>
Common HTML elements:
Headings: <h1> to <h6>
Paragraphs: <p>
Links: <a href="url">
Images: <img src="image.jpg" alt="description">
Lists: <ul>, <ol>, <li>
Tables: <table>, <tr>, <td>, <th>
Forms: <form>, <input>, <textarea>, <button>
5. Attributes
Attributes provide additional information about elements. They are
always included in the opening tag:
<a href="https://example.com" target="_blank">Visit Example</a>
href: Specifies the link’s destination.
target="_blank": Opens the link in a new tab.
6. HTML5 Semantic Elements
HTML5 introduced semantic elements to give meaning to the
structure:
<header>: Introductory content or navigation.
<nav>: Contains navigation links.
<main>: Main content area.
<section>: A thematic grouping of content.
<article>: Independent, self-contained content.
<aside>: Side content like ads or widgets.
<footer>: Footer information like contact or copyright.
Semantic HTML improves accessibility, SEO, and code clarity.
7. Multimedia in HTML
HTML5 made it easy to embed multimedia without third-party
plugins:
Images: <img
Audio: <audio controls> <source src="audio.mp3"> </audio>
Video: <video controls> <source src="video.mp4"> </video>