When building web pages, understanding the basic structure of an HTML document is the first step. The structure not only provides a framework for the document but also enables browsers to render content correctly.
HTML(Hypertext Markup Language), structures web pages. Unlike programming languages, it isn’t compiled or interpreted. Browsers render HTML directly, displaying content without typical errors. It’s a markup language and not programming, making execution smooth without encountering compilation or interpretation issues.
Table of Content
Structure of an HTML Document
What is an HTML Document?
HTML documents are text files that contains structured code which tells browsers how to display a webpage. These documents are made up of HTML tags which define elements like headers, paragraphs, images, links, and more.
Structure of an HTML Document
An HTML document consists of specific tags that form the skeleton of the page. Here’s a look at a basic HTML document structure
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>
<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.
- : The declaration is placed at the beginning of the document. It tells the browser that the document follows HTML5 standards, ensuring consistent rendering across browsers.
- Tag:Thetag wraps the entire document, serving as the root element of an HTML page. It typically includes thelang attribute to specify the language of the content.
- Section:Thesection contains metadata, scripts, styles, and other information not displayed directly on the page but essential for functionality and SEO.
- Section: Thesection contains all the visible content of the web page, including text, images, videos, links, and more. This is where you’ll add the main elements to display on the page.
HTML tags are structural components enclosed in angle brackets. They are typically opened and closed with a forward slash (e.g.,
). 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 tag in HTML, which tells the browser to bold the text inside it.
Structure of an HTML Document
Understanding these key tags will allow you to organize content effectively and create more readable and accessible webpages.
- Headings (
to
):
Headings are important for structuring the content within the section. They define the hierarchy of information, where
is the highest-level heading.
- Paragraphs ():
Thetag
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 (
): The
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 ():Links are created with the tag. The href attribute defines the destination URL, and the text within the tag serves as the clickable link text.
- Lists (
- ,
-
- ,
- ):
Lists allow you to organize items in bullet points (
- )
- )
. Each item within a list is wrapped in
-
- tags
- .
- Divisions (
):
The
tagis 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.
