HTML Document Structure

This page illustrates the fundamental structure of an HTML document and explains the purpose of key structural tags.

Basic Structure of an HTML Document

An HTML document typically follows this structure:

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document Title</title>
            <meta name="description" content="Page description">
        </head>
        <body>
            <!-- Content goes here -->
        </body>
        </html>

Explanation of Key Tags

<!DOCTYPE html>:
Declares the document type and version of HTML being used. In HTML5, it is simply <!DOCTYPE html>.
<html>:
The root element that encompasses all other elements in the document.
<head>:
Contains meta-information about the document, such as its title, character set, and linked resources like stylesheets.
<meta charset="UTF-8">:
Specifies the character encoding for the document, ensuring proper display of text.
<title>:
Sets the title of the document, which appears in the browser's title bar or tab.
<body>:
Contains the content of the document that is displayed to users, including text, images, and other media.

Additional Structural Tags

<div>:
A block-level container used to group elements for styling or scripting purposes.
<span>:
An inline container used to group text or elements for styling purposes.
<header>:
Represents introductory content, typically a group of introductory or navigational aids.
<nav>:
Defines a set of navigation links.
<main>:
Specifies the main content of the document, unique to the document's central topic.
<footer>:
Represents a footer for its nearest sectioning content or sectioning root element.

Understanding these structural tags is essential for creating well-organized and semantically meaningful HTML documents.

Homepage