MakeW3web

Anatomy of an HTML document

The anatomy of an HTML document refers to the structure and components that make up a web page. In simple words, it is like the skeleton of a web page. Here are the main parts of an HTML document, explained with examples:

1. Document Type Declaration (DOCTYPE) : The DOCTYPE tells the browser the version of HTML used in the document. For HTML5, the DOCTYPE is simple and straightforward.

Example:  ` <!DOCTYPE html>`

2. HTML element : The HTML element is the root or container of the entire document. All other elements are nested within it.

Example:

<html>
  <!-- All other elements go here -->
</html>

3. Head element: The head element contains metadata, or information about the document that's not displayed on the page, such as the title, character encoding, and links to external resources like stylesheets or scripts.

Example:

<head>
  <title>My First Web Page</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>

4. Title element: The title element is nested within the head element and sets the title of the web page, which is displayed on the browser's title bar or tab.

Example: `<title>My First Web Page</title>`

5. Meta element: The meta element is used within the head element to provide metadata about the document, such as the character encoding.

Example: `<meta charset="UTF-8">`

6. Link element: The link element is used to link external resources like stylesheets to the HTML document. It's commonly placed in the head element.

Example: `<link rel="stylesheet" href="styles.css">`

7. Body element: The body element holds the content displayed on the web page, such as text, images, and interactive elements like forms or buttons.

Example:

<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first web page.</p>
  <img src="example-image.jpg" alt="An example image">
</body>

A complete example of the anatomy of an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is my first web page.</p>
    <img src="example-image.jpg" alt="An example image">
  </body>
</html>

This example demonstrates the main components of the anatomy of an HTML document, with the DOCTYPE declaration at the top, followed by the basic HTML elements, including the head and body elements. The head element contains metadata and resources, while the body element contains the visual content of a web page.

Understanding the anatomy of an HTML document helps you create well-structured and properly formatted web pages.

Was this page helpful?