HTML stands for HyperText Markup Language. It enables documents to be displayed as web pages on the Internet. Tags represent the elements of an HTML page — paragraphs, lists, tables, images, forms, and more.
HTML is not a programming language. It is a markup language — a way of annotating content to describe its structure and meaning, which the browser then renders visually.
The Structure of an HTML Document
Every HTML document follows a standard structure:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Breaking Down the Structure
| Element | Purpose |
|---|---|
<!DOCTYPE html> | Declares the document as HTML5, ensuring consistent browser rendering |
<html> | The root element — all other elements are descendants of this |
<head> | Contains metadata about the page (title, links to stylesheets, etc.) — not shown in the browser |
<body> | Contains all visible content — everything inside is shown in the browser |
<h1> | A top-level heading |
<p> | A paragraph of text |
HTML Document Structure
-----------------------
<html>
|
+-- <head>
| |
| +-- <title>
| +-- <meta>
| +-- <link> (CSS)
|
+-- <body>
|
+-- <h1> heading
+-- <p> paragraph
+-- <img> image
+-- <a> link
+-- <button> button
Common HTML Elements
HTML provides a rich set of elements for different content types:
<!-- Headings -->
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Sub-section Title</h3>
<!-- Paragraph -->
<p>This is a paragraph of body text.</p>
<!-- Hyperlink -->
<a href="https://example.com">Visit Example</a>
<!-- Image -->
<img src="photo.jpg" alt="Description of image" />
<!-- Button -->
<button>Click Me</button>
<!-- Unordered list -->
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
Attributes
Attributes provide additional information about HTML elements. They are placed inside the opening tag and follow a name="value" format.
<!-- src and alt are attributes of <img> -->
<img src="img/cat.jpg" alt="A cat sitting on a chair" />
<!-- class is used for CSS styling -->
<p class="bold-text">This paragraph has a class.</p>
<!-- id is a unique identifier -->
<p id="intro">This paragraph has a unique ID.</p>
<!-- Multiple attributes on one element -->
<p class="highlight" id="main-intro" title="Introduction">
This element has three attributes.
</p>
Key Attributes
| Attribute | Purpose |
|---|---|
class | Groups elements for CSS styling (multiple elements can share a class) |
id | Uniquely identifies a single element (must be unique per page) |
src | Specifies the source URL for images, scripts, and iframes |
href | Specifies the link destination for anchor elements |
alt | Provides alternative text for images (accessibility) |
type | Specifies the type for inputs and buttons |
HTML5
HTML5 is the current standard. It introduced significant improvements over earlier versions and is the foundation of all modern web development.
What HTML5 Supports
- HTML or XML syntax
- Interoperability with earlier HTML versions
- Markup and APIs for rich content
- Managing data, video, and audio natively (no plugins required)
- Developing cross-browser and cross-platform applications
- Creating engaging, interactive user experiences
HTML5 Semantic Elements
HTML5 introduced semantic elements that give meaning to the structure:
<header>
<nav>Navigation links here</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<aside>Related links or info</aside>
</main>
<footer>Footer content</footer>
| Semantic Element | Meaning |
|---|---|
<header> | Introductory content or navigation |
<nav> | Navigation links |
<main> | The main content of the page |
<article> | Self-contained piece of content |
<section> | A thematic group of content |
<aside> | Content tangentially related to the main content |
<footer> | Footer of the page or section |
The DOM (Document Object Model)
When a browser loads an HTML page, it builds an in-memory representation of the document called the DOM (Document Object Model). The DOM is a tree structure where every element is a node.
HTML DOM Tree
--------------
Document
|
html
/ \
head body
| / \
title h1 p
| |
"Hello" "Text..."
The DOM contains:
- Element nodes — HTML tags (headers, paragraphs, etc.)
- Text nodes — the text content inside elements
- Comment nodes — HTML comments
JavaScript interacts with and modifies the DOM at runtime, which is how dynamic web pages work:
// Find an element by ID and change its text
document.getElementById("intro").innerHTML = "Updated text!";
// Change a style
document.querySelector("h1").style.color = "blue";
Summary
HTML is the skeleton of every web page. Before you can style with CSS or add interactivity with JavaScript, you need to understand:
- Document structure — DOCTYPE, html, head, body
- Elements and tags — the building blocks of content
- Attributes — how to configure elements
- HTML5 semantics — meaningful, accessible structure
- The DOM — the in-memory representation JavaScript works with
HTML is where every web page begins. Master it and everything else in frontend development becomes easier.