Basic Structure of an HTML Document

Each webpage on the internet begins with a basic HTML document or webpage. For us to utilize a browser, it is important to understand the life-giving anatomy structure of an HTML document.

HTML Document Building Blocks

🗂️ Doctype Declaration

This tag tells the web browser what version of HTML to expect in this document.

<!DOCTYPE html>

📦 HTML Tag

The starting piece of any HTML document, at its core it's where every other component is nested.

<html lang="en">

  <!-- Everything goes here -->

</html>

👑 Head Section

It contains HTML meta tags along with the title of the webpage for indexing. By default, the title will be displayed on the top of the window.

🧍 Body Section

The Body Section usually contains the main content of the page such as headings, paragraphs, images, links etc.

<body>
  <h1>Hello World!</h1>
  <p>This is my first webpage.</p>
</body>

📃 Full Example

Showing only the “Hello World!” example.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a basic HTML document structure.</p>
  </body>
</html>