Every website you visit, whether it's a simple personal blog or a complex application like YouTube, has HTML at its foundation.
When you open a website, your browser receives an HTML document and uses it to understand the structure of the page. The document tells the browser what content is available, how that content is organized, and where to find additional resources such as stylesheets and JavaScript files.
But have you ever wondered why almost every HTML document starts with <!DOCTYPE html>? Why do we need separate <head> and <body> sections? And what exactly happens when a browser reads these elements?
In this tutorial, we'll explore the basic structure of an HTML document, understand the purpose of each part, and learn a little about how browsers process HTML behind the scenes.
By the end, you'll be able to create your own HTML document and, more importantly, understand why you're writing each line.
The basic HTML document
Let's begin with a simple HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first HTML page.</p>
</body>
</html>This is a complete HTML document. You can copy this code into a text file, save it with an .html extension, and open it in your browser.
The result will be a simple webpage displaying a heading and a paragraph.
Although the document contains several lines of code, only two lines produce visible text inside the page:
<h1>Hello, World!</h1>
<p>Welcome to my first HTML page.</p>So what is everything else doing?
To understand that, we need to examine the document one part at a time.
1. The DOCTYPE declaration
The very first line of our HTML document is:
<!DOCTYPE html>This is called the DOCTYPE declaration, short for Document Type Declaration.
Its purpose is to tell the browser to use standards mode when rendering the document.
Why is DOCTYPE necessary?
Modern browsers are designed to follow web standards. However, this wasn't always the case.
During the early days of the web, different browsers interpreted HTML and CSS somewhat differently. Some websites depended on these older rendering behaviors.
As browsers improved and adopted more consistent standards, developers faced a problem: websites built for older browsers could break if the new rules were applied automatically.
To maintain compatibility, browsers introduced different rendering modes.
Standards mode is the mode browsers use for modern websites. In this mode, the browser follows the current HTML and CSS standards as closely as possible.
Quirks mode exists mainly for backward compatibility. It reproduces certain older browser behaviors that some legacy websites depend on.
The DOCTYPE declaration helps the browser decide which mode to use.
For example:
<!DOCTYPE html>This declaration tells a modern browser to use standards mode.
If you omit the DOCTYPE declaration, the browser may enter quirks mode, which can cause unexpected differences in how CSS layouts and other features behave.
Is DOCTYPE an HTML tag?
No. This is an important distinction.
Although it resembles an HTML tag, <!DOCTYPE html> is a declaration, not an HTML element.
It doesn't have an opening and closing tag, and it doesn't represent visible content.
Does DOCTYPE specify the HTML version?
Historically, DOCTYPE declarations were more complicated and referred to document type definitions.
For example, HTML 4.01 used declarations such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">You don't need to write declarations like this for modern HTML documents.
The modern declaration is simply:
<!DOCTYPE html>It is commonly associated with HTML5, but it doesn't lock your page to a particular version of HTML. Modern HTML is maintained as a Living Standard.
Remember: Include <!DOCTYPE html> at the beginning of every new HTML document.
2. The <html> element
After the DOCTYPE declaration, we have:
<html lang="en">At the end of the document, you'll find:
</html>Together, these tags define the <html> element.
The <html> element is known as the root element of an HTML document.
A root element is the top-level element that contains the other elements in the document.
Consider this example:
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>Here, both <head> and <body> are inside the <html> element.
We call them child elements of <html>.
The <html> element is also the document element in the browser's Document Object Model (DOM), which we'll discuss later.
What does lang="en" mean?
You probably noticed that the opening <html> tag contains something extra:
lang="en"This is an HTML attribute.
Attributes provide additional information or configuration for an element.
In this case, lang specifies the primary language of the document.
For example:
<html lang="en">This indicates that the primary language is English.
If your webpage is written in Malayalam, you can use:
<html lang="ml">Other examples include fr for French, de for German, and hi for Hindi.
Why should we specify the language?
The lang attribute helps browsers, assistive technologies, and other software interpret the document correctly.
For example, screen readers use language information to select suitable pronunciation rules when reading content aloud.
Imagine a screen reader trying to pronounce a Malayalam paragraph using English pronunciation rules. The result may be difficult to understand.
The language attribute helps prevent such problems.
You can also specify a different language for an individual element:
<html lang="en">
<body>
<p>This paragraph is in English.</p>
<p lang="ml">നമസ്കാരം</p>
</body>
</html>The document's primary language is English, but the second paragraph is explicitly identified as Malayalam.
The lang attribute does not automatically translate anything. It simply describes the language being used.
3. The <head> element
Next, let's examine the <head> section.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>The <head> element contains information about the HTML document.
This information is generally called metadata.
Metadata simply means information that describes other information.
Think about a photograph saved on your computer. The photograph contains the actual picture, but the file may also store information such as its dimensions, creation date, and camera details.
HTML documents work in a somewhat similar way.
The main content of the webpage belongs inside <body>, while <head> contains information and resources that help browsers and other software understand and process the page.
The head can contain the page title, character encoding information, metadata for search engines, references to CSS files, and JavaScript.
Most information inside <head> isn't displayed directly within the webpage, although it can influence how the page appears and behaves.
Let's look at the elements commonly placed inside it.
4. Understanding <meta charset="UTF-8">
One of the first elements you'll usually find inside <head> is:
<meta charset="UTF-8">This specifies the document's character encoding.
That probably sounds a little technical, so let's understand what it means.
What is character encoding?
Computers store and transmit information as bytes.
When you type a character such as A, 5, or @, the computer needs a way to represent that character using bytes.
A character encoding defines how characters are represented as bytes.
Consider the English letter A.
In UTF-8, this character is represented by the hexadecimal byte value 41, which is 65 in decimal.
But websites don't contain only English letters.
They can contain Malayalam, Hindi, Arabic, Japanese, mathematical symbols, and emojis.
We need an encoding system capable of representing all these characters.
That's where UTF-8 comes in.
What is UTF-8?
UTF-8 stands for Unicode Transformation Format – 8-bit.
It is a character encoding capable of representing all Unicode characters, including characters from a large number of languages.
For example, a UTF-8 encoded HTML document can contain:
<p>Hello!</p>
<p>നമസ്കാരം!</p>
<p>こんにちは!</p>
<p>😀</p>UTF-8 uses a variable number of bytes to represent each Unicode character.
It uses one byte for basic ASCII characters and up to four bytes for other Unicode characters.
This makes it efficient for English text while still supporting characters from other languages.
What happens if the encoding is incorrect?
Suppose you've created a webpage containing Malayalam text, and saved it using UTF-8.
If the browser interprets the bytes using an incompatible encoding, the text may appear as strange symbols or unreadable characters.
This is commonly called mojibake, or garbled text.
The following declaration helps the browser identify the intended encoding:
<meta charset="UTF-8">However, the declaration alone doesn't convert the file into UTF-8. Your text editor must actually save the document using UTF-8 too.
A little deeper: how does the browser determine encoding?
The browser may receive character encoding information through several mechanisms.
For instance, a web server can send an HTTP response header such as:
Content-Type: text/html; charset=UTF-8This header can take precedence over the encoding specified by the HTML <meta> element.
When using a meta-based character encoding declaration, the HTML standard requires it to appear completely within the first 1024 bytes of the document.
That's one reason developers place it near the beginning of <head>.
For your HTML projects, using UTF-8 consistently is the best practice.
5. Understanding the viewport meta element
The next line is:
<meta name="viewport" content="width=device-width, initial-scale=1.0">This element is especially important when building websites that work well on mobile devices.
Before understanding what it does, we need to understand the viewport.
What is a viewport?
The viewport is the area in which a browser displays a webpage.
On a desktop computer, this is generally the content area of the browser window.
On a mobile phone, it's the area available for displaying the webpage, although the technical details differ slightly because mobile browsers may use separate layout and visual viewports.
Consider a webpage opened on two devices: a desktop monitor and a smartphone.
The desktop browser might have a viewport that is 1400 CSS pixels wide, while the smartphone might have a layout viewport around 390 CSS pixels wide.
Your webpage needs to adapt to these different sizes.
Understanding name="viewport"
Let's break the element into its individual parts.
<meta name="viewport" content="width=device-width, initial-scale=1.0">The name attribute tells the browser what type of metadata this is.
Here, viewport indicates that the metadata contains viewport configuration instructions.
The content attribute contains the actual settings.
What does width=device-width do?
width=device-widthThis tells the mobile browser to use the device's width in CSS pixels as the layout viewport width.
Without an appropriate viewport declaration, some mobile browsers use a much wider virtual layout viewport designed for desktop-sized pages.
They then scale the entire page down to fit the phone's screen.
As a result, text may appear extremely small, and users may need to zoom in to read the content.
Setting width=device-width allows mobile layouts to work with a viewport that more closely matches the device's available screen width.
Notice that we're talking about CSS pixels, not necessarily physical screen pixels. A modern phone may have far more physical pixels than the number of CSS pixels used for layout.
What does initial-scale=1.0 mean?
initial-scale=1.0This specifies an initial zoom scale of 1.
In simple terms, the browser starts the page at its normal scale rather than initially zooming it out.
The combination of these two settings gives us:
<meta name="viewport" content="width=device-width, initial-scale=1.0">This is the viewport configuration you'll commonly use in modern websites.
However, the viewport meta element alone doesn't make a website responsive.
You still need to build layouts that adapt to different screen sizes, usually with CSS.
The viewport declaration simply provides an appropriate starting point for those layouts.
6. The <title> element
Next is the <title> element.
<title>My First Web Page</title>The <title> element defines the title of the HTML document.
When you open a webpage, you'll usually see its title in the browser tab.
For example, consider the following document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning HTML - My Blog</title>
</head>
<body>
<h1>Introduction to HTML</h1>
</body>
</html>Here, the browser tab will typically display:
Learning HTML - My Blog
But the heading displayed inside the page will be:
Introduction to HTML
This introduces an important distinction.
<title> vs <h1>
Beginners sometimes confuse these two elements.
The <title> element belongs inside <head> and defines the document's title.
The <h1> element belongs inside <body> and represents a top-level heading within the page content.
The title also helps identify the page in browser bookmarks, browser history, and other interfaces.
Search engines may use the title when generating search results, although they can choose to display something different.
A useful page title should describe the page clearly.
For example:
<title>Understanding HTML Elements and Attributes</title>This is more descriptive than:
<title>Page 1</title>An HTML document should have a meaningful title. In ordinary HTML pages, the document head is expected to contain exactly one <title> element.
7. The <body> element
We've reached the part of the document where most of your actual webpage content lives.
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first HTML page.</p>
</body>The <body> element represents the content of the HTML document.
When you want to display headings, paragraphs, images, buttons, tables, forms, or other content on a webpage, you'll generally place them inside <body>.
Let's expand our example:
<body>
<h1>Welcome to My Website</h1>
<p>My name is Alex, and I'm learning HTML.</p>
<h2>My Interests</h2>
<ul>
<li>Programming</li>
<li>Photography</li>
<li>Traveling</li>
</ul>
<a href="https://example.com">Visit Example</a>
</body>This example contains several HTML elements.
The <h1> element represents a top-level heading, while <h2> represents a heading at the next level.
The <p> element represents a paragraph.
The <ul> element defines an unordered list, and each <li> represents an item in that list.
Finally, the <a> element creates a hyperlink. The href attribute specifies the link's destination.
All these elements help the browser understand the structure and meaning of the content.
Can a body contain invisible elements?
Yes.
Although the body primarily contains the content of the webpage, not every element inside it produces something visible.
For example:
<body>
<h1>Welcome</h1>
<script>
console.log("Hello from JavaScript!");
</script>
</body>The JavaScript code doesn't produce visible text in the webpage. Instead, it sends a message to the browser's developer console.
So it's more accurate to think of <body> as the container for the document's main content and related functionality, rather than simply everything that's visible.
8. Understanding HTML tags, elements, and attributes
Now that we've explored the main sections of an HTML document, let's look more closely at how HTML markup works.
Consider this line:
<p class="message">Hello, World!</p>There are several things happening here.
Opening tag
<p class="message">This is the opening tag.
It indicates the beginning of a paragraph element and contains an attribute.
Content
Hello, World!This is the text content of the paragraph.
Closing tag
</p>This marks the end of the paragraph element.
Notice the forward slash (/) before the tag name.
The complete element
The complete HTML element consists of the opening tag, its content, and the closing tag.
<p class="message">Hello, World!</p>The class="message" part is an attribute.
It assigns the class name message to the element. CSS or JavaScript can later use this class to identify or work with the element.
This gives us a useful distinction:
- Tag: The markup used to mark the beginning or end of an element.
- Element: The complete structure represented by the markup and its contents.
- Attribute: Additional information supplied through an opening tag.
Not every element needs a closing tag, which brings us to another important concept.
9. Elements without closing tags
Most HTML elements have opening and closing tags.
For example:
<h1>My Website</h1>
<p>This is a paragraph.</p>However, some elements don't contain child content and cannot have an end tag.
These are called void elements.
Examples include:
<meta charset="UTF-8">
<br>
<hr>
<img src="photo.jpg" alt="A mountain landscape">
<input type="text">The <br> element represents a line break.
The <hr> element represents a thematic break between sections of content.
The <img> element embeds an image, while <input> represents an input control.
You may sometimes encounter syntax such as:
<br />
<img src="photo.jpg" alt="A mountain landscape" />The trailing slash is allowed for compatibility with XML-style syntax, but it isn't required in HTML for void elements.
In ordinary HTML syntax, it doesn't make an element self-closing.
Also, not every element without visible text is a void element.
For example, <script> is not a void element and requires an appropriate closing tag:
<script src="app.js"></script>10. Understanding the parent-child relationship
HTML documents are hierarchical.
This means elements can contain other elements, creating a tree-like structure.
Consider the following example:
<body>
<main>
<h1>My Blog</h1>
<article>
<h2>Learning HTML</h2>
<p>HTML is used to structure web pages.</p>
</article>
</main>
</body>Here, <body> is the parent of <main>.
The <main> element is the parent of <h1> and <article>.
The <article> element is the parent of <h2> and <p>.
This relationship becomes important when working with CSS and JavaScript because both frequently interact with elements based on their position in the document.
Why is proper nesting important?
Look at this example:
<p>This is <strong>important</strong> information.</p>The <strong> element is correctly nested inside the paragraph.
Now consider an incorrect example:
<p>This is <strong>important</p></strong>The closing tags are in the wrong order.
Browsers have error-recovery rules and may automatically correct certain mistakes. However, relying on that behavior can lead to unexpected document structures.
There's another important rule: just because tags are correctly paired doesn't mean every combination is valid.
For example:
<p>
<div>Hello</div>
</p>This is invalid HTML because a <p> element cannot contain a <div> element. When the browser encounters the <div> opening tag, the HTML parser will automatically close the paragraph.
The document structure created by the browser may therefore differ from the structure you expected.
Proper nesting makes your HTML easier to understand and reduces unexpected behavior.
11. Adding CSS and JavaScript to the document
HTML defines the structure of the webpage, but modern websites also use CSS for styling and JavaScript for interactive behavior.
These resources can be connected to an HTML document.
Adding CSS
Suppose you have a CSS file named style.css.
You can connect it to your HTML document using the <link> element:
<head>
<link rel="stylesheet" href="style.css">
</head>Here, rel="stylesheet" identifies the relationship between the HTML document and the linked resource.
The href="style.css" attribute specifies the location of the CSS file.
The browser downloads the stylesheet and uses its rules when rendering the page.
Adding JavaScript
You can include an external JavaScript file using <script>.
<head>
<script src="app.js" defer></script>
</head>The src attribute identifies the JavaScript file.
The defer attribute tells the browser to download the external classic script without blocking HTML parsing and to execute it after the document has been parsed.
Deferred scripts execute before the DOMContentLoaded event, in document order.
This is particularly helpful when JavaScript needs to interact with HTML elements.
Without an appropriate loading strategy, a script might execute before the elements it needs have been created.
There are other ways to load JavaScript, including async and JavaScript modules, but defer is a useful starting point for ordinary external scripts.
12. Other useful elements inside <head>
Beyond the essential elements we've already discussed, you may encounter a few additional elements in real-world websites.
Meta description
<meta name="description" content="Learn the basic structure of an HTML document with examples.">This provides a short description of the page.
Search engines may use the description when generating search result snippets, although they can also generate their own.
Favicon
A favicon is the small icon associated with a website, often displayed in browser tabs.
You can specify one using:
<link rel="icon" href="favicon.ico">The href attribute points to the icon file.
Internal CSS
CSS can also be written directly inside an HTML document using the <style> element.
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>This is useful for small examples, although larger projects typically benefit from separate CSS files.
HTML comments
You can add comments to HTML documents using:
<!-- This is an HTML comment -->Comments help developers document their code.
For example:
<body>
<!-- Main heading -->
<h1>My Website</h1>
</body>HTML comments normally aren't rendered as page content, but they can still be visible in the page source or developer tools.
Never store passwords, API keys, or other secrets inside HTML comments. The HTML is sent to the browser, so visitors can inspect it.
13. How does a browser understand an HTML document?
We've learned how to write HTML. But what actually happens when a browser opens an HTML file?
Let's look at a simplified version of the process.
Suppose we have the following document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello!</h1>
<p>Welcome to my website.</p>
</body>
</html>When the browser loads the HTML, it doesn't simply display the file as plain text.
Instead, it processes the document.
First, the browser obtains the HTML data, either from a web server or from a local file.
It then decodes the bytes into characters using the document's character encoding.
Next, the HTML parser processes the markup and constructs a tree of nodes.
This tree is called the Document Object Model, or DOM.
What is the DOM?
The DOM is an in-memory representation of the document that browsers and scripts can work with.
For our example, the element hierarchy looks roughly like this:
Document
└── html
├── head
│ └── title
│ └── "My Page"
│
└── body
├── h1
│ └── "Hello!"
│
└── p
└── "Welcome to my website."This is a simplified representation. A complete DOM also contains other node types, such as the document type node and text nodes for whitespace.
Notice that the DOM preserves the relationships between the elements.
The browser doesn't need to repeatedly search through the original HTML source to understand the document structure.
It can work with this tree.
JavaScript can also use the DOM to access and modify the document.
For example:
document.querySelector("h1").textContent = "Hello, JavaScript!";This code finds the first <h1> element and changes its text.
The original HTML file on disk doesn't change. Instead, JavaScript modifies the DOM that the browser is currently using.
Is the DOM always identical to the HTML source?
Not necessarily.
HTML parsers have rules for handling missing tags and invalid markup.
For instance, consider this HTML:
<!DOCTYPE html>
<title>My Page</title>
<h1>Hello!</h1>Although the explicit <html>, <head>, and <body> tags are missing, the browser can construct the necessary elements in the DOM.
In fact, HTML allows certain tags to be omitted under specific conditions.
But just because a browser can handle omitted tags doesn't mean beginners should leave them out.
Writing the complete document structure makes your code clearer and easier to maintain.
What happens after the DOM is created?
The browser also processes CSS and builds the information needed to determine the appearance of elements.
It calculates styles and layouts, determines where visible content should appear, and paints the result on the screen.
The actual browser rendering pipeline involves several additional stages and optimizations, but you can think of the overall process like this:
HTML file
|
v
Character decoding
|
v
HTML parsing
|
v
DOM construction
|
v
Style and layout processing
|
v
Painting and rendering
|
v
Webpage displayedThese stages aren't always strictly sequential. Browsers can download resources, parse HTML, process styles, and perform other work concurrently or incrementally.
As you begin learning JavaScript and CSS, understanding this process will become increasingly useful.
14. Does indentation matter in HTML?
You may have noticed that our examples use indentation.
<html>
<body>
<h1>Hello!</h1>
<p>Welcome!</p>
</body>
</html>Could we write the same document on a single line?
Yes.
<html><body><h1>Hello!</h1><p>Welcome!</p></body></html>Both versions produce the same visible heading and paragraph.
HTML doesn't require indentation to express parent-child relationships. Tags and parsing rules determine the structure.
However, indentation makes your code much easier to read.
It allows you to identify which elements belong inside other elements.
For example:
<main>
<section>
<h2>About Me</h2>
<p>I'm learning web development.</p>
</section>
</main>Here, it's immediately clear that <section> is inside <main> and that the heading and paragraph belong to the section.
Does HTML ignore all whitespace?
No. That's a common misunderstanding.
In ordinary HTML text, browsers typically collapse sequences of spaces and line breaks when rendering them.
For example:
<p>Hello World!</p>This usually appears as:
Hello World!
However, whitespace is not always ignored.
Elements such as <pre> preserve whitespace formatting, and CSS can change how whitespace is displayed.
Whitespace also produces text nodes in the DOM, even when the browser collapses it visually.
So indentation is generally safe for formatting your HTML, but whitespace can still matter in particular situations.
15. Creating a complete HTML webpage
Now that we've discussed each major part, let's combine everything into a slightly more realistic example.
We'll create a simple personal webpage with a header, navigation links, main content, and footer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simple personal website built with HTML.">
<title>Alex's Personal Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Alex's Website</h1>
<nav>
<a href="#about">About</a>
<a href="#interests">Interests</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>Hello! I'm Alex, and I'm learning web development.</p>
</section>
<section id="interests">
<h2>My Interests</h2>
<ul>
<li>Programming</li>
<li>Photography</li>
<li>Traveling</li>
</ul>
</section>
</main>
<footer>
<p>Copyright 2026 Alex.</p>
</footer>
</body>
</html>If you open this file in a browser, you'll see a simple webpage containing a title, navigation links, two sections, and a footer.
The style.css file is optional for this exercise. If it doesn't exist, the browser will still display the HTML content using its default styles.
Why did we use <header>, <main>, and <footer>?
These are called semantic HTML elements.
They describe the role or meaning of different parts of the document.
For example, <header> identifies introductory content for a page or section.
The <nav> element identifies a section containing navigation links.
The <main> element represents the dominant content of the page.
The <section> element represents a thematic grouping of content, typically with a heading.
Finally, <footer> represents footer information for the page or a section.
These elements make the document's meaning clearer to developers, browsers, and assistive technologies.
Notice that <header> is different from <head>.
The <head> element contains document metadata, while <header> contains introductory content that can appear within the visible page.
Understanding that distinction will help you avoid a common beginner mistake.
16. How to run your HTML document
You don't need a web server, programming language, or complicated development environment to create your first HTML page.
A text editor and a web browser are enough.
Open a text editor such as Visual Studio Code, Notepad, or any other editor that can save plain-text files.
Create a new file named:
index.htmlPaste the following code into it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>My First Website</h1>
<p>I just created my first HTML document!</p>
</body>
</html>Save the file and open it in your browser.
You should see the heading and paragraph.
Why did we name the file index.html?
The name index.html is a common convention for the default page of a website or directory.
For example, when you visit a URL such as:
https://example.com/The web server may be configured to serve an index.html file automatically.
However, this behavior depends on the server configuration. The browser itself doesn't require HTML files to have that name.
You can name your files about.html, contact.html, or anything else appropriate.
The .html extension identifies the file as an HTML document for many tools and operating systems.
How can you inspect the HTML in your browser?
Most modern browsers provide developer tools.
Open your webpage, right-click on an element, and select Inspect.
The browser will open its developer tools and show the DOM structure of the webpage.
You can expand elements, inspect their attributes, and even change text directly within the developer tools.
Those changes normally affect only the currently loaded page, not the original HTML file.
This is one of the easiest ways to explore how real websites are structured.
17. Common mistakes beginners make
Before finishing, let's address a few common mistakes that can lead to confusing results.
Forgetting the DOCTYPE declaration
Without a proper DOCTYPE, browsers may use quirks mode.
Start new HTML documents with:
<!DOCTYPE html>Putting visible page content inside <head>
The <head> element is meant for document metadata and associated resources.
Headings, paragraphs, and the main page content belong inside <body>.
Confusing <title> with <h1>
The <title> element defines the document title, typically shown in the browser tab.
The <h1> element represents a heading in the document content.
Both have different purposes.
Forgetting to close elements
For example:
<p>Hello!HTML allows some end tags to be omitted in specific situations, but it's better for beginners to close ordinary elements explicitly.
Write:
<p>Hello!</p>Assuming browsers will always fix incorrect HTML
Browsers are forgiving and recover from many markup errors.
But the way they repair invalid HTML isn't always what you expect.
A page appearing correct doesn't necessarily mean its HTML is valid.
Using the wrong file extension
A common beginner mistake is saving a file as:
index.html.txtinstead of:
index.htmlSome text editors automatically append .txt when saving files.
Check the actual filename if your browser isn't treating the file as HTML.
18. A small exercise
Try creating an HTML document without copying the complete template from this tutorial.
Your page should have a meaningful document title, use UTF-8 encoding, include the viewport meta element, and specify English as its primary language.
Inside the body, add a main heading with your name, a paragraph introducing yourself, and a section describing three things you're interested in.
Once you've created the page, open it in your browser and inspect its DOM using the developer tools.
Then experiment with a few changes.
Try changing the text inside <title> and observe what happens to the browser tab. Change the <h1> text and observe what happens inside the webpage.
You can also temporarily remove the <html>, <head>, and <body> tags and inspect the DOM again. You'll notice that the browser can reconstruct those elements even when they're missing from the source.
Restore the complete structure afterward.
These small experiments will help you understand HTML much better than simply memorizing a template.
Final thoughts
The basic structure of an HTML document is simple enough to learn in a few minutes. But understanding what each part does gives you a stronger foundation for everything that follows.
The DOCTYPE helps the browser choose the correct rendering mode. The <html> element represents the document's root. The <head> contains metadata and references to resources, while the <body> contains the page's main content.
Behind the scenes, the browser parses this markup and constructs a DOM tree that CSS and JavaScript can work with.
You don't need to memorize every HTML element right away. Start by getting comfortable with the document structure, opening and closing tags, attributes, and nesting.
Once these concepts feel familiar, you can move on to headings, paragraphs, links, images, lists, and the many other elements that make up a webpage.
And the next time you create an HTML document, those first few lines won't look like mysterious boilerplate anymore. You'll know exactly why they're there.