HTML Course | Structure of an HTML Document
Last Updated :
17 May, 2025
HTML (Hypertext Markup Language) is used in over 95% of websites and is the foundation of all web pages. It provides the basic structure and content layout. For beginners in web development, learning HTML is the essential first step.
Structure of an HTML DocumentWhat is an HTML Document?
HTML is a markup language used for structuring content on the web. It consists of elements (tags) that describe the content and structure of a webpage. These elements are enclosed in angle brackets (< >) and come in pairs, such as opening and closing tags. HTML helps browsers interpret and display content like text, images, links, videos, and more.
Structure of an HTML Document
An HTML document is essentially a series of nested elements that work together to form a complete webpage. The document follows a standard structure to ensure consistency and compatibility across different browsers.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Structure of HTML Document</title>
</head>
<body>
<!-- Main content of website -->
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>
Let’s see each part of this structure to understand its function and importance.
1. <!DOCTYPE html>: Declaring the Document Type
The <!DOCTYPE html> declaration is used to specify the version of HTML. In this case, it indicates that the document is written in HTML5, which is the latest version of HTML.
2. <html>: The Root Element
The <html> element is the root element of the HTML document. Everything inside this element is considered part of the HTML document.
The <head> section contains metadata about the document that isn't displayed on the webpage. This section includes important elements like:
- <meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8 supports most characters from all languages).
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Controls the layout on mobile devices by setting the viewport width and scaling.
4. <body>:Visible Content of the Webpage
The <body> tag contains the actual content of the webpage that will be visible to users, such as text, images, and links.
HTML tags are structural components enclosed in angle brackets. They are typically opened and closed with a forward slash (e.g., <h1></h1>). Some tags are self-closing, while others support attributes like width, height, and controls for defining properties or storing metadata.
There are generally two types of tags in HTML
- Paired Tags: These tags come in pairs i.e. they have both opening(< >) and closing(</ >) tags.
- Empty Tags: These tags are self-closing and do not require a closing tag.”
Below is an example of a <b> tag in HTML, which tells the browser to bold the text inside it.
Understanding these key tags will allow you to organize content effectively and create more readable and accessible webpages.
- Headings (<h1> to <h6>): Headings are important for structuring the content within the <body> section. They define the hierarchy of information, where <h1> is the highest-level heading.
- Paragraphs (<p>): The <p> tag is used for creating paragraphs, which help to group text into readable sections. This tag automatically adds some spacing between paragraphs to improve readability.
- Images (<img>): The <img> tag is used to add images to a webpage. It requires the src attribute to specify the image path and the alt attribute for accessibility.
- Links (<a>):Links are created with the <a> tag. The href attribute defines the destination URL, and the text within the <a> tag serves as the clickable link text.
- Lists (<ul>, <ol>, <li>): Lists allow you to organize items in bullet points (<ul>) or numbered order (<ol>). Each item within a list is wrapped in <li> tags.
- Divisions (<div>): The <div> tag is a container used to group other elements together, often for layout. It does not add any style or structure on its own but is useful for applying CSS styles to sections of content.
Best Practices for Writing HTML
Here are some best practices to follow when writing HTML:
- Use semantic HTML: Use appropriate tags such as
<header>, <footer>, <article>, and <section> to improve the structure and accessibility of your page. - Include alt text for images: Always use the
alt attribute for images to improve accessibility. - Minimize inline styles and scripts: Keep your HTML clean by linking to external CSS and JavaScript files instead of using inline styles or scripts.
for more details follow this article => HTML Tags – A to Z List
Conclusion
Learning how an HTML page is built is the first step in web development. By using basic tags, you can start making simple web pages and understand how websites are made.
Similar Reads
Introduction to HTML and CSS | Learn to Design Your First Website in Just 1 Week Ready to Design Your First Website in Just 1 Week? With this guide, learn how to build a simple yet stylish website in just one week to gain skills and confidence.This is an introduction course to HTML and CSS which will help you learn all about the basics of HTML and CSS needed to begin with Web De
4 min read
HTML Course | Structure of an HTML Document HTML (Hypertext Markup Language) is used in over 95% of websites and is the foundation of all web pages. It provides the basic structure and content layout. For beginners in web development, learning HTML is the essential first step. Structure of an HTML DocumentWhat is an HTML Document?HTML is a ma
4 min read
HTML Course | First Web Page Printing Hello World So far, we have already learned about the structure of an HTML document, tags, etc in the previous module. Let us use this knowledge to create our first web page.Here, we are creating a simple webpage that displays a "Hello World" message as the perfect starting point. This exercise will help you un
2 min read
HTML Course | Basics of HTML Now that you've created your first "Hello World" webpage, it's time to learn some important concepts of HTML. In this chapter, we’ll cover basic elements that add content and structure, including paragraphs, images, lists, attributes, comments, and more. Table of ContentHTML Paragraph HTML Horizonta
6 min read
HTML Course | Starting the Project - Creating Directories Now we have understood the important concepts of HTML, it's time to start building a structured web project. In this chapter, you’ll learn how to set up directories and organize files efficiently. It is important to have a well-structured directory for both small and large projects, as it makes your
3 min read
HTML Course | Understanding and Building Project Structure Now that you've already set up a basic directory structure, it's time to understand and build the basic structure of our project.Course Navigation Understanding and Building Project StructureWe have already created all of the directories needed for our project. Let's just start writing our HTML code
3 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
5 min read
HTML Course | Creating Navigation Menu A navigation menu is the first element we see in any website. It allows users to explore different pages and sections easily. In this chapter, you’ll learn how to create a navigation menu in HTML.Course Navigation HTML Course : Creating Navigation MenuIn the last chapter, we have created the entire
6 min read
HTML Course | Building Header of the Website The header is the top part of the website and the important area for branding and navigation. In this chapter, you’ll learn how to build a header with the tags which we have already learnt.Course Navigation HTML Course : Building Header of the WebsiteSo far, we have created the navigation bar for th
4 min read
HTML Course | Building Main Content - Section 1 The main content of a website is where you show the core information that visitors are looking for. This could be text, images, links, or any important details about your services, products, or ideas.Course Navigation HTML Course : Building Main Content - Section 1We just completed building the head
4 min read