HTML Document Structure

HTML Document Structure

An HTML document follows a basic structure that tells web browsers how the page is organized. The document begins with the HTML doctype declaration, followed by the <html> element containing the <head> and <body> elements.

The <head> contains information about the document, such as its title, character encoding, metadata, stylesheets, and other resources. The <body> contains the webpage content displayed or otherwise presented to the user, including headings, paragraphs, links, images, navigation, sections, forms, and other elements.

Basic HTML Document Structure

A basic HTML document contains a doctype declaration and the <html>, <head>, and <body> elements. These provide the foundation for the rest of the webpage.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
  </head>
  <body>
    <h1>Page Heading</h1>
    <p>Page content goes here.</p>
  </body>
</html>

<!doctype> Declaration

The <!doctype html> declaration appears at the beginning of an HTML document. It tells the browser that the document uses modern HTML and should be rendered in standards mode.

The doctype is a declaration rather than an HTML element, so it does not have a closing tag and is placed before the <html> element.

<!doctype html>

<html> Element

The <html> element is the root element of an HTML document. All other HTML elements in the document are contained within it, except for the doctype declaration.

The lang attribute should be used to identify the primary language of the document. This information helps browsers, search engines, translation tools, and assistive technologies interpret the content correctly.

<html lang="en">
  ...
</html>

<head> Element

The <head> element contains document metadata and references to resources used by the page. Its contents are generally not displayed as the main webpage content.

Common elements used inside the <head> include <title>, <meta>, <link>, <style>, <base>, and <script>.

<head>
  <meta charset="utf-8">
  <meta name="description" content="A description of the webpage.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body> Element

The <body> element contains the document's page content. A document has one <body> element.

Elements within the <body> can organize page sections, headings, text, links, images, lists, tables, forms, media, and other content.

<body>
  <h1>Page Heading</h1>
  <p>This is the page content.</p>
</body>

Semantic Page Structure

HTML provides semantic elements that describe the purpose of different areas of a webpage. Using these elements where appropriate gives the document a meaningful structure rather than relying entirely on generic containers such as <div>.

Heading Structure

HTML provides six heading levels, <h1> through <h6>. Headings identify sections of content and establish relationships between a section and its subsections.

Use heading levels to represent the organization of the content rather than choosing a heading level because of its default visual size. CSS should be used when a heading's appearance needs to be changed.

<h1>HTML Tutorial</h1>
<h2>HTML Elements</h2>
<h3>Text Elements</h3>
<h3>List Elements</h3>
<h2>HTML Attributes</h2>

Complete HTML Document Example

The following example combines the basic document structure with semantic elements commonly used to organize webpage content.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Example HTML webpage.">
    <title>Example Webpage</title>
  </head>
  <body>
    <header>
      <h1>Example Webpage</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/contact.html">Contact</a>
      </nav>
    </header>
    <main>
      <section>
        <h2>About This Page</h2>
        <p>This is an example of a structured HTML document.</p>
      </section>
    </main>
    <footer>
      <p>Example footer content.</p>
    </footer>
  </body>
</html>