Now that you have a basic understanding of what HTML is, it’s time to look at how an HTML document is structured. The basic structure of an HTML document is important because it allows web browsers to understand how to interpret and display the content on the page.
In this post, we will go over the fundamental parts of an HTML document. If you are new to the scene, be sure to check out our previous post for a quick Introduction to HTML so you can see the bigger picture.
Basic Structure of an HTML Document

1. The DOCTYPE Declaration
Every HTML document starts with a DOCTYPE declaration. This lets the browser know which version of HTML the page is written in, so that the page displays properly.
<!DOCTYPE html>
This declaration is crucial as it prevents rendering problems in different browsers. It ensures that the browser reads the document as HTML5, which is the standard of web development nowadays.
2. The html Element
The <html> element is the root element of an HTML document. All content on the page is wrapped inside this element except for the DOCTYPE declaration.
<html lang="en">
<!-- All content goes here -->
</html>
The lang attribute defines the language of the document. This can help search engines and accessibility tools better understand the content.
3. The head Element
The <head> element includes meta-information about the page, such as the title, character set, links to external stylesheets, and scripts.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
Here are some significant elements in the <head> section
<meta charset=”UTF-8″>: It will specify the character encoding.
<meta name=”viewport”> Make sure this page is about target mobile.
title>: Defines the title of the page displayed in the tab of the browser.
4. The element
The element comprises all the contents that are visibly seen by a user of a webpage like text, images, links, etc. This is the working part of a page where the users work.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
This is where you’ll spend most of your time, adding and organizing content with various HTML elements.
5. Closing Tags
HTML uses closing tags to indicate the end of an element. For example, the <body> element ends with </body>, and the <html> element ends with </html>.
Remember, however, that tags like <img>, <br>, and <input> are self-closing, meaning that they do not have an explicit closing tag. Most HTML elements will require a matching closing tag, though.
Putting it All Together
Now let’s see how everything fits into a complete HTML document
This is the basic structure of any webpage. Once you are comfortable with this format, you can add more elements to build out your page.
Conclusion
This is the basic skeleton of an HTML document. As you master the usage of elements like <!DOCTYPE>, <html>, <head>, and <body>, you now have all the tools you need to start coding web pages on your own.
If you’re interested in pushing further, do take up some study on how to put multimedia and links into your webpage to make it a treat for the viewer’s eye.
At Codeneur, we give you the knowledge and resources to help you master HTML and other essential web development skills. Start building your web pages today and level up your development journey!