Show List
Tutorials > HTML > HTML document structure

HTML document structure


The structure of an HTML document is the way in which the different parts of the document are organized and nested inside each other. The basic structure of an HTML document consists of the following elements:

  1. Document Type Declaration (DOCTYPE): The first line of an HTML document is the Document Type Declaration, which declares the version of HTML used in the document. For example, the DOCTYPE for HTML5 is <!DOCTYPE html>.

  2. HTML Element: The HTML element is the root element of the document and contains all other elements. It starts with the opening tag <html> and ends with the closing tag </html>.

  3. Head Element: The head element, represented by the <head> tag, contains information about the document, such as the title, meta data, and links to other resources. The head element is located within the HTML element and starts with the opening tag <head> and ends with the closing tag </head>.

  4. Title Element: The title element, represented by the <title> tag, contains the title of the document, which is displayed in the browser's title bar or tab. The title element is located within the head element.

  5. Body Element: The body element, represented by the <body> tag, contains the main content of the document, such as headings, paragraphs, images, and more. The body element is located within the HTML element and starts with the opening tag <body> and ends with the closing tag </body>.

Here's an example of a basic HTML document structure:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Sample HTML Page</title>
  <meta name="description" content="Description of the page">
  <meta name="keywords" content="Sample, HTML">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header>
    <h2>Cities</h2>
  </header>

  <section>

    <ul>
      <li><a href="#london">London</a></li>
      <li><a href="#paris">Paris</a></li>
      <li><a href="#tokyo">Tokyo</a></li>
    </ul>


    <article>
      <h1 id="london">London</h1>
      <p>London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to
        Roman times.</p>

      <h1 id="paris">Paris</h1>
      <p>Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture.
        Its 19th-century cityscape is crisscrossed by wide boulevards and the River Seine.</p>

      <h1 id="tokyo">Tokyo</h1>
      <p>Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic
        temples. The opulent Meiji Shinto Shrine is known for its towering gate and surrounding woods.</p>
    </article>

  </section>
</body>

</html>
Display
Cities
London
London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times.
Paris
Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture. Its 19th-century cityscape is crisscrossed by wide boulevards and the River Seine.
Tokyo
Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples. The opulent Meiji Shinto Shrine is known for its towering gate and surrounding woods.


Next: HTML Tags and Elements

    Leave a Comment

  • captcha text