Every web page you see on the internet is built using HTML. To understand how a web page works, it is essential to know the basic structure of an HTML document.
An HTML document follows a predefined structure that helps browsers correctly interpret and display content.
The structure of an HTML document defines how content is organized. A well-structured document improves readability, accessibility, search engine optimization (SEO), and browser compatibility.
Below is the standard structure of a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first HTML page.</p>
</body>
</html>The DOCTYPE declaration tells the browser that the document is written in HTML5. It ensures consistent rendering across browsers.
The <html> tag is the root element of the document. All other HTML elements are placed inside it.
The <head> section contains metadata about the page. This includes the title, character encoding, styles, and SEO information.
The <title> tag defines the text shown in the browser tab. It is also important for search engine ranking.
The <body> contains all visible content of the webpage. This includes text, images, links, tables, and forms.
| Element | Purpose |
|---|---|
| <h1> to <h6> | Headings |
| <p> | Paragraphs |
| <a> | Links |
| <img> | Images |
| <ul>, <ol> | Lists |
The basic structure of an HTML document provides the framework for building web pages. Understanding this structure is the first step toward mastering web development.
Once you are comfortable with HTML structure, you can move on to styling with CSS and adding interactivity using JavaScript.