What Is HTML? A Complete Guide to Web Page Structure
Learn what HTML is, how elements, tags, attributes, links, images, and document structure work, and how HTML combines with CSS and JavaScript to build modern web pages.
Open almost any website and underneath the colors, layouts, animations, buttons, and menus is a document describing what the page actually contains. There are headings, paragraphs, links, images, forms, navigation areas, and sections of content, all arranged into a structure the browser can understand.
That structure is usually created with HTML.
HTML stands for HyperText Markup Language. It is the standard markup language used to describe the structure and meaning of content on web pages. HTML tells a browser that one piece of content is a heading, another is a paragraph, another is an image, and another should link somewhere else.
If CSS controls how a page looks and JavaScript controls much of what it does, HTML provides the foundation they both work with.
What Is HTML?
HTML is a markup language, which means it uses special markers to describe the role of content inside a document.
Consider this:
<h1>What Is HTML?</h1>
<p>HTML gives web pages their structure.</p>
The browser does not simply see two pieces of text. The markup tells it that What Is HTML? is a top-level heading and the sentence underneath is a paragraph.
That distinction matters because web pages are not just collections of words placed on a screen. Their content has structure and meaning, and HTML provides a standard way to describe both.
Is HTML a Programming Language?
HTML is not generally considered a programming language. It is a markup language used to describe the structure and meaning of content.
Programming languages usually include features for logic, calculations, variables, conditions, and control flow. HTML does not work that way. It tells the browser what different parts of a document represent.
For example:
<h1>Welcome</h1>
<p>This is a paragraph.</p>
How to Open an HTML Document
HTML files normally use the .html extension. Create or save a file with a name such as:
index.html
Then open the file in a web browser such as Chrome, Firefox, Safari, or Edge. The browser reads the HTML and displays the page.
You can edit the file in any text or code editor, save your changes, and refresh the browser to see the updated result.
HTML Creates the Structure of a Web Page
A useful way to think about HTML is as the skeleton of a web page.
Imagine an article containing a title, introductory paragraph, image, several sections, and links to related pages. HTML identifies each of those pieces and establishes how they relate to one another.
A simple page might contain:
<h1>Learning HTML</h1>
<p>HTML is the foundation of web pages.</p>
<h2>Getting Started</h2>
<p>Let's look at how HTML elements work.</p>
The browser can now understand the hierarchy. There is a main heading, followed by introductory text, then a subsection and another paragraph.
CSS might later change the fonts, colors, and spacing, but the underlying HTML structure remains the same.
HTML Is Built From Elements
The basic building blocks of HTML are elements.
A paragraph is an element:
<p>Hello, world.</p>
A heading is another:
<h1>Welcome</h1>
A link is another:
<a href="https://example.com">Visit Example</a>
HTML includes elements for many common types of web content, including headings, paragraphs, lists, tables, forms, images, navigation, sections, buttons, and links.
Choosing the appropriate element gives the content structure and meaning rather than simply controlling its appearance.
Tags Mark the Beginning and End of Elements
HTML elements are commonly written using tags. A tag is surrounded by angle brackets:
<p>
Many elements have both an opening tag and a closing tag:
<p>This is a paragraph.</p>
The opening tag is:
<p>
and the closing tag is:
</p>
The forward slash indicates that the element is ending.
The content sits between those tags:
<p> This is a paragraph. </p>
↑ ↑ ↑
opening content closing
tag tag
Not every HTML element uses a separate closing tag. Elements such as <img> do not wrap content in the same way, so their syntax works differently.
Attributes Add More Information
Elements often need information beyond their basic type. Attributes provide that additional detail.
Consider a link:
<a href="https://example.com">Visit Example</a>
The element is <a>, which represents a hyperlink. The href attribute tells the browser where that link should go.
An image provides another example:
<img src="mountain.jpg" alt="A mountain at sunrise">
Here, src tells the browser which image to display, while alt provides alternative text describing the image.
Attributes are usually placed inside the opening tag and commonly follow this pattern:
name="value"
Different elements support different attributes, allowing HTML to describe additional information about how those elements should behave or what they represent.
HTML Elements Can Be Nested
HTML elements can contain other HTML elements. This is known as nesting.
For example:
<p>
Read our <a href="/guide">complete guide</a> to HTML.
</p>
The link is nested inside the paragraph.
Larger structures can contain many levels of nesting:
<article>
<section>
<h2>HTML Elements</h2>
<p>Elements provide structure to web content.</p>
</section>
</article>
This creates a hierarchy. The section belongs to the article, while the heading and paragraph belong to the section.
Correct nesting is important because the browser builds a tree-like representation of the HTML document. Well-structured markup makes those relationships clear.
Headings Give Content a Hierarchy
HTML provides six heading levels:
<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Smaller Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading Level</h6>
These levels describe hierarchy rather than simply font size.
An <h1> usually represents the main subject of the page. <h2> elements can introduce major sections, while <h3> elements can represent subsections within them.
Browsers apply default visual styles to headings, but appearance is not their main purpose. CSS can make any heading larger or smaller. HTML heading levels describe how the content itself is organized.
Paragraphs Hold Blocks of Text
Paragraphs use the <p> element:
<p>HTML describes the structure of a web page.</p>
If another paragraph follows, it receives its own element:
<p>HTML describes the structure of a web page.</p>
<p>CSS can then control how that structure appears.</p>
Browsers normally add some default spacing around paragraphs, but that visual spacing can be changed with CSS.
The important part is that HTML identifies each block as a paragraph. Presentation comes later.
Links Turn Documents Into the Web
Links are one of HTML’s defining features. The “HyperText” part of HTML refers to the ability to connect documents and resources through hyperlinks.
A link uses the <a> element:
<a href="https://example.com">Visit Example</a>
The href attribute contains the destination.
Links can also point to pages on the same website:
<a href="/about">About Us</a>
or to a location within the current page:
<a href="#contact">Jump to Contact</a>
Without links, websites would mostly be isolated documents. Hyperlinks are what allow users to move between pages, resources, and sections, creating the connected structure we think of as the web.
Images Use HTML Too
Images are added using the <img> element:
<img src="cat.jpg" alt="A black cat sitting beside a window">
Unlike a paragraph, an image does not contain text between opening and closing tags. Instead, its important information is provided through attributes.
The src attribute identifies the image resource:
src="cat.jpg"
The alt attribute provides a textual alternative:
alt="A black cat sitting beside a window"
Alternative text is particularly important for accessibility because it can help people using screen readers understand meaningful images when they cannot see them.
CSS can later control the image’s width, height, borders, positioning, and other visual properties.
A Complete HTML Document Has a Defined Structure
So far, the examples have shown individual elements. A real HTML page usually contains a broader document structure.
A minimal HTML5 document looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Each part has a different role. Understanding this structure makes it much easier to see how individual elements fit into an actual web page.
DOCTYPE Tells the Browser What Kind of Document It Is
The first line is usually:
<!DOCTYPE html>
This is the DOCTYPE declaration.
In modern HTML, it tells the browser to interpret the document using HTML’s current standards rather than falling back to older compatibility behaviors.
It looks a little like an HTML element, but it is a declaration rather than a normal element. In HTML5, the syntax is deliberately short compared with the much longer declarations used by some older HTML standards.
The html Element Contains the Document
After the DOCTYPE comes the <html> element:
<html lang="en">
...
</html>
This is the root element of the HTML document. Most of the page’s HTML sits inside it.
The lang="en" attribute indicates that the document’s primary language is English. Language information can help browsers, search engines, screen readers, and other software interpret the page correctly.
Inside the <html> element are two particularly important sections: <head> and <body>.
The head Contains Information About the Page
The <head> contains metadata and resources related to the document rather than the main page content shown to the user.
For example:
<head>
<meta charset="UTF-8">
<title>HTML Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
The <title> controls the document title commonly shown in the browser tab. The <meta> element can provide information such as character encoding, viewport settings, and page descriptions.
The head can also reference external resources such as CSS stylesheets.
This makes the <head> important even though most of its contents are not directly displayed as part of the page.
The body Contains the Visible Page Content
The <body> contains the content users normally interact with:
<body>
<h1>HTML Guide</h1>
<p>Welcome to the guide.</p>
<img src="html-example.png" alt="Example HTML code">
<a href="/next">Continue reading</a>
</body>
Headings, paragraphs, navigation, articles, images, forms, buttons, tables, and most other visible page elements belong inside the body.
A simple way to remember the difference is that the head describes the document, while the body contains the document’s main content.
HTML5 Added More Meaningful Structure
Modern HTML is commonly referred to as HTML5. Alongside other changes to the platform, HTML5 introduced and popularized semantic elements that describe common parts of web pages more clearly.
Instead of building everything from generic containers, a page can use elements such as:
<header></header>
<nav></nav>
<main></main>
<article></article>
<section></section>
<aside></aside>
<footer></footer>
For example:
<article>
<header>
<h1>What Is HTML?</h1>
</header>
<section>
<h2>HTML Elements</h2>
<p>HTML elements describe parts of a document.</p>
</section>
</article>
These elements provide more information about the role of the content. That can make documents easier for developers and software such as assistive technologies to understand.
HTML Provides Structure, Not Visual Design
One of the most important distinctions in frontend development is the separation between HTML structure and CSS styling.
Suppose we have:
<h1 class="page-title">What Is HTML?</h1>
HTML tells us that this is a main heading and gives it a class that other technologies can reference.
CSS can then decide how it looks:
.page-title {
color: #1d4ed8;
font-size: 48px;
text-align: center;
}
The heading’s meaning comes from HTML. Its color, size, and alignment come from CSS.
Keeping those responsibilities separate makes websites easier to maintain. The same HTML structure can be displayed differently by changing CSS without rewriting the underlying content.
JavaScript Adds Interactivity
HTML and CSS can create a complete static page, but modern websites often need to respond to users. This is where JavaScript enters the picture.
Imagine a button:
<button id="menu-button">Open Menu</button>
HTML defines the button.
CSS might make it blue with rounded corners.
JavaScript can respond when someone clicks it:
const button = document.querySelector("#menu-button");
button.addEventListener("click", () => {
console.log("Menu opened");
});
The three technologies therefore have different responsibilities:
HTML → structure and meaning
CSS → presentation and layout
JavaScript → behavior and interactivity
The boundaries are not always perfectly clean in real applications, but this model is a useful foundation for understanding frontend development.
How the Browser Uses HTML
When a browser downloads an HTML document, it parses the markup and turns the elements into an internal tree-like structure called the Document Object Model, or DOM.
Nested HTML becomes nested objects in that structure. CSS can target those elements to apply styles, while JavaScript can find them, modify them, create new ones, or respond to events associated with them.
This explains why HTML structure matters beyond simply displaying text. The markup becomes the foundation that the rest of the page operates on.
Poorly structured HTML can make styling, accessibility, scripting, and maintenance harder. Clear HTML gives everything else a more predictable foundation.
HTML Is the Foundation, Not the Finished Page
HTML is often the first language people encounter when learning web development because the basic idea is easy to see. Write a heading tag and a heading appears. Add a paragraph and the browser displays a paragraph. Add a link and suddenly the page connects to somewhere else.
But HTML becomes more useful once it stops being thought of as a collection of tags to memorize.
Elements describe content. Tags mark those elements in the document. Attributes add information. Nesting establishes relationships. Headings create hierarchy, while links and images connect the document to other resources. The html, head, and body elements give the entire page its larger structure.
CSS can then take that structure and control how it looks. JavaScript can make it interactive.
That leaves HTML doing something less flashy but more fundamental: telling the browser what the page actually is.
Every styled button, interactive menu, responsive layout, and complex web application ultimately needs some kind of structure underneath it. On the web, HTML is where that structure begins.