01. HTML

Introduction

HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the World Wide Web. It serves as the foundation of every web page, defining the structure, content, and meaning of web documents. Understanding HTML is essential for anyone working in web development, as it provides the semantic framework that browsers use to render content.

What is HTML?

HTML is a markup language, not a programming language. It uses tags and attributes to describe the structure and meaning of content, allowing browsers to interpret and display web pages correctly. HTML documents are plain text files that contain HTML elements, which browsers parse and render as visual web pages.

Core Characteristics

HTML has several defining characteristics that make it fundamental to web development:

Markup Language

HTML uses markup tags to annotate text and other content. These tags tell the browser how to display content and provide semantic meaning to different parts of a document.

Platform Independent

HTML works across all operating systems and devices. A single HTML document can be viewed on Windows, macOS, Linux, mobile devices, and more, making it truly universal.

Structure and Semantics

HTML provides both structural organization (how content is arranged) and semantic meaning (what content represents), enabling browsers, search engines, and assistive technologies to understand the document’s purpose and content.

HTML Versions

HTML has evolved through several versions, each adding new features and capabilities:

HTML 4.01 (1999): Established core web standards
XHTML 1.0 (2000): XML-based version with stricter syntax
HTML5 (2014): Modern standard with semantic elements, multimedia support, and APIs
HTML5.1, HTML5.2, HTML5.3: Incremental updates and improvements

Modern web development primarily uses HTML5, which provides enhanced semantic elements, better multimedia support, and improved accessibility features.

Basic HTML Document Structure

Every HTML document follows a standard structure that browsers expect:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

This structure includes:

DOCTYPE declaration: Tells the browser which HTML version to use
html element: Root element containing all content
head section: Contains metadata and document information
body section: Contains visible content

How HTML Works

When you create an HTML document and open it in a browser, the following process occurs:

Browser receives HTML: The browser fetches the HTML file
Parsing: The browser parses the HTML to create a Document Object Model (DOM)
Rendering: The browser renders the DOM as a visual web page
Styling: CSS (if present) is applied to style the content
Interactivity: JavaScript (if present) adds dynamic behavior

HTML Elements and Tags

HTML uses elements, which consist of tags and content. Tags are keywords surrounded by angle brackets:

<!-- Opening tag, content, and closing tag -->
<p>This is a paragraph.</p>

<!-- Self-closing tag (no content) -->
<img src="image.jpg" alt="Description">

Elements can have attributes that provide additional information:

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

The Role of HTML in Web Development

HTML works in conjunction with other web technologies:

CSS: Styles HTML elements to create visual design
JavaScript: Adds interactivity and dynamic behavior
APIs: HTML5 provides APIs for features like geolocation, local storage, and more

Together, these technologies form the foundation of modern web development.

Why HTML Matters

HTML is essential because it:

Defines structure: Organizes content in a logical, hierarchical manner
Provides semantics: Gives meaning to content for browsers, search engines, and assistive technologies
Enables accessibility: Proper HTML structure makes websites usable for people with disabilities
Supports SEO: Semantic HTML helps search engines understand and index content
Ensures compatibility: Standard HTML works across all browsers and devices

Getting Started

To begin working with HTML, you only need:

A text editor (VS Code, Sublime Text, or any plain text editor)
A web browser (Chrome, Firefox, Safari, or Edge)
Basic knowledge of HTML syntax

You can create an HTML file, save it with a .html extension, and open it directly in a browser to see your work.