Structure of HTML: The Essential Guide to Building Web Pages in 2025
Updated on Jan 15, 2025 | 16 min read | 13.9k views
Share:
For working professionals
For fresh graduates
More
Updated on Jan 15, 2025 | 16 min read | 13.9k views
Share:
Table of Contents
HTML, or HyperText Markup Language, is the foundation of the web, providing the essential structure for all web pages. Its primary purpose is to organize content into meaningful elements like headings, paragraphs, images, and links, making it accessible and easy to interpret for users.
In the broader context of web development, HTML works seamlessly with CSS and JavaScript to create functional and visually appealing websites. While HTML structures the content, CSS adds styles like colors and layouts, and JavaScript introduces interactivity, such as animations and dynamic forms.
This guide will walk you through the basic structure of HTML, explaining key elements, their roles, and best practices for building robust and scalable web pages. Let’s dive right in!
The structure of an HTML document is fundamental to creating web pages. It follows a specific layout with defined sections and elements, each serving a unique purpose. Here is a look at the key components of an HTML document.
What is <!DOCTYPE html>?
The <!DOCTYPE html> declaration informs the browser about the HTML version used in the document. In modern web development, it indicates that the document is using HTML5, ensuring consistent rendering across browsers.
Purpose of <!DOCTYPE html>:
Key Points:
Example:
<!DOCTYPE html>
Also Read: HTML Tutorial: The Complete Guide
In the next section, you can learn about the HTML Element.
Overview of <html> Tag:
The <html> tag serves as the root element for any HTML document. It encapsulates all content, including the <head> and <body> sections.
Key Features:
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a simple HTML structure.</p>
</body>
</html>
Explanation:
Learning about HTML coding and the structure of HTML can provide you with complete freedom in defining the structure and functioning of your web pages. Sign up for upGrad’s Introduction to HTML course to learn about HTML coding.
Now, let’s see what the Head Section is.
Here is a look at the Head Section and its role in the HTML document.
The <head> tag contains metadata and links to external resources essential for rendering the web page correctly. It does not display content directly on the page but plays a critical role in SEO, styling, and functionality.
Example Code:
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f0f0f0;
}
</style>
<script src="script.js"></script>
</head>
Also Read: CSS Tutorial: Learn CSS from Scratch
Now, let’s take a look at the formatting and styling of HTML text.
Purpose: Text formatting tags provide basic styling to text elements, enhancing their appearance and meaning.
Common Tags:
Example Code:
<body>
<p>This is a <b>bold</b> text example.</p>
<p>This is an <i>italic</i> text example.</p>
<p>This is a <u>underlined</u> text example.</p>
<p>This is a <strong>strongly emphasized</strong> text example.</p>
<p>This is an <em>emphasized</em> text example.</p>
<p>This text is <mark>highlighted</mark>.</p>
</body>
Purpose: Use the <style> tag to apply inline or internal CSS directly within the HTML document.
Inline Styling Example:
<body>
<p style="color: red; font-size: 20px;">This is a styled paragraph.</p>
</body>
Key Features:
Key Action:
Combine the <head> section’s elements and text formatting tags to create a well-structured, functional HTML document.
In the next section, you’ll learn about the Body tag in HTML.
The <body> tag is a fundamental element in HTML, as it holds all the visible content displayed on a web page. This includes text, images, videos, links, forms, and any interactive elements that the user interacts with. It is a container for the entire visual and interactive structure of the web page, sitting directly inside the <html> tag.
Key Features of the <body> Tag
Common Elements Inside the <body> Tag
Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text that describes the content of the page.</p>
<img src="example.jpg" alt="Example Image">
<a href="https://example.com">Click here to visit an example site</a>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>
The <body> tag is the backbone of a web page's content structure, ensuring that all visible and interactive elements are well-organized and accessible.
In the next section, you will learn about some essential HTML tags used in web pages.
HTML tags are the building blocks of web pages, each serving a specific purpose to structure, style, or enhance content. Understanding the difference between block and inline elements, the common structural tags, media tags, links, and attributes is vital for effective web development.
HTML elements are categorized into block-level and inline elements based on their behavior in a document.
Block-Level Elements:
Inline Elements:
Example Code:
<div>
<h1>This is a Block Element</h1>
<p>This paragraph is also a block element.</p>
<a href="#">This is an Inline Element</a> within the paragraph.
</div>
Now, let’s understand what common tags are and their applications,
HTML uses some common tags to define elements on a webpage. These tags are used to structure content, add styles, or enable interactivity. Below is an overview of common HTML tags grouped by their purpose:
Example Code:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
2. Paragraphs (<p>)
<p>This is a paragraph of text.</p>
3. Divisions (<div>)
<div class="container">
<p>This is grouped content inside a div.</p>
</div>
Let’s now explore some common media tags used in HTML.
<img src="example.jpg" alt="An example image">
2. Videos (<video>)
<video src="example.mp4" controls autoplay></video>
Example Code:
<a href="https://example.com" target="_blank">Visit Example</a>
In the next section, you’ll learn about HTML attributes and their functions,
HTML attributes provide additional information about elements.
Attribute Table:
Attribute | Purpose | Example |
id | Unique identifier for elements. | <div id="main"></div> |
class | Grouping for styling or scripting. | <div class="container"></div> |
src | Specifies the source of media. | <img src="image.jpg"> |
alt | Accessibility text for images. | <img alt="Example image"> |
lang | Defines content language. | <html lang="en"> |
charset | Character encoding declaration. | <meta charset="UTF-8"> |
By mastering these essential HTML tags, attributes, and elements, you can build well-structured, accessible, and visually appealing web pages.
Now, you’ll see how you can add meaning to your code with semantic HTML.
Semantic HTML enhances the structure of your code by using meaningful tags that clearly describe their purpose. Unlike generic <div> and <span> tags, semantic elements convey intent and improve accessibility, SEO, and maintainability.
Semantic HTML refers to tags that provide meaning to web page content. These elements make it easier for developers, browsers, and assistive technologies to interpret the content of a web page.
For example, instead of using <div> to group content, semantic elements like <header> or <article> define the purpose of that section.
Benefits of Semantic HTML:
Example Code:
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
2. <footer>
Example Code:
<footer>
<p>© 2025 My Website. All rights reserved.</p>
<a href="privacy-policy.html">Privacy Policy</a>
</footer>
3. <main>
Example Code:
<main>
<h2>About Us</h2>
<p>We are a team dedicated to creating exceptional web experiences.</p>
</main>
4. <nav>
Example Code:
<nav>
<ul>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#team">Team</a></li>
</ul>
</nav>
Example Code:
<article>
<h2>Breaking News</h2>
<p>This is a breaking news story about the latest trends in technology.</p>
</article>
2. <section>
Example Code:
<section>
<h2>Our Services</h2>
<p>We offer web development, SEO optimization, and graphic design.</p>
</section>
3. <aside>
Example Code:
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#article1">Understanding SEO</a></li>
<li><a href="#article2">Top Web Design Trends</a></li>
</ul>
</aside>
Semantic HTML improves readability, SEO, and accessibility, making it a vital skill for creating modern, efficient web pages. By using these elements appropriately, developers ensure that their code is meaningful, maintainable, and user-friendly.
Let’s now take a look at the outline and accessibility of an HTML document.
upGrad’s Exclusive Software Development Webinar for you –
SAAS Business – What is So Different?
An organized HTML document outline and enhanced accessibility are critical for creating web pages that are both user-friendly and inclusive. By leveraging semantic tags and accessibility best practices, developers can ensure better navigation and usability for all users, including those relying on assistive technologies.
The HTML document outline defines the logical structure of a webpage, and the basic structure of HTML, guiding both users and search engines through the hierarchy of content.
Key Concepts of the Outline:
Best Practices:
Example Outline:
<h1>Main Title</h1>
<section>
<h2>Subsection 1</h2>
<p>Content for subsection 1.</p>
<h3>Sub-subsection 1.1</h3>
<p>Content for sub-subsection 1.1.</p>
</section>
<section>
<h2>Subsection 2</h2>
<p>Content for subsection 2.</p>
</section>
Accessibility ensures that all users, including those with disabilities, can navigate and interact with web content effectively. HTML provides several features to enhance accessibility.
Semantic tags improve the experience for screen readers by creating a clear structure:
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
The alt attribute provides alternative text for images, helping visually impaired users understand the content.
<img src="team.jpg" alt="Photo of the company team working in an office.">
Labels associate input fields with descriptive text, making forms more accessible.
Example:
<form>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>
In the next section, you’ll learn about some advanced HTML features used in modern web pages.
Modern web pages leverage advanced HTML features to create interactive, structured, and accessible content. This includes working with forms for user input and using tables for structured data representation.
Forms are essential for collecting user data and interacting with web applications. HTML provides robust features to structure forms and ensure usability.
Forms typically consist of the following elements:
Attributes:
HTML supports various input types for flexibility in data collection:
Example Code:
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Register</button>
</form>
Now, let’s explore how tables for data representation work.
Tables allow structured representation of data in rows and columns, making information easier to interpret.
Tables are built using the following elements:
Example Code:
<table border="1">
<caption>Monthly Sales Data</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Sales</th>
<th scope="col">Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,500</td>
</tr>
<tr>
<td>February</td>
<td>$12,000</td>
<td>$3,000</td>
</tr>
</tbody>
</table>
CSS Styling Example:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
By mastering forms and tables, you can create dynamic and user-friendly web pages that provide both interactivity and clear data presentation. These features enhance the usability and functionality of modern websites.
Next, let’s explore some of the best practices for writing HTML code.
Writing clean, well-structured HTML is essential for creating maintainable and accessible web pages. Adhering to best practices while working with the basic structure of HTML ensures better performance, easier debugging, and improved compatibility across browsers and devices.
1. Keep Your Code Clean and Organized
Example of Organized Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Best Practices Example</title>
</head>
<body>
<!-- Main Content Section -->
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<section>
<h2>About Us</h2>
<p>This section contains information about our company.</p>
</section>
</main>
</body>
</html>
2. Avoid Common HTML Mistakes
Certain mistakes can lead to errors or unexpected behavior in your web pages.
Common Mistakes and How to Avoid Them:
Fix:
<style>
.highlight {
color: red;
font-size: 20px;
}
</style>
<p class="highlight">Text</p>
3. Validate Your HTML
HTML validation ensures your code follows web standards, improving browser compatibility and reducing bugs.
Benefits of Validation:
Tools for Validation:
How to Validate:
By following these best practices, you can write efficient, maintainable, and error-free HTML code, ensuring a seamless user experience and easier collaboration with other developers.
Learning HTML coding can help you to streamline your web development projects, allowing you to have greater flexibility in determining how web pages work. At upGrad, you can choose from a plethora of courses and upskill programs that can help you to cultivate your HTML skills and improve your career prospects. You can also enroll for courses on diverse programming languages that can enhance your development skills.
Here are some upGrad courses that can help you to sharpen your HTML skills:
Boost your career with our popular Software Engineering courses, offering hands-on training and expert guidance to turn you into a skilled software developer.
Master in-demand Software Development skills like coding, system design, DevOps, and agile methodologies to excel in today’s competitive tech industry.
Stay informed with our widely-read Software Development articles, covering everything from coding techniques to the latest advancements in software engineering.
Get Free Consultation
By submitting, I accept the T&C and
Privacy Policy
India’s #1 Tech University
Executive PG Certification in AI-Powered Full Stack Development
77%
seats filled
Top Resources