Basic Structure of an HTML Document

By /

1. Understanding <!DOCTYPE>

The <!DOCTYPE> declaration defines the document type and version of HTML being used. It must be the first line in an HTML file.

Why is <!DOCTYPE> Important?

  • Ensures correct rendering by web browsers.
  • Prevents browsers from switching to quirks mode (which can cause inconsistent page layouts).
  • Helps with SEO and accessibility compliance.

Example: HTML5 Doctype

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <p>Hello, World!</p>
</body>
</html>

💡 In HTML5, <!DOCTYPE html> is simple and does not require version numbers like previous HTML versions.

2. The <html> Element

The <html> element wraps all the content on a webpage. It contains two main sections:

  1. <head> – Holds metadata, links to stylesheets, and scripts.
  2. <body> – Contains the visible content of the webpage.

Example: HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>
</body>
</html>

🔹 The <html> tag ensures the browser recognizes the document as an HTML page.

3. The <head> Section

The <head> section contains important metadata about the webpage. It does not display content directly but helps search engines and browsers understand the page.

Common Elements in <head>

TagPurpose
<title>Defines the page title (shown on the browser tab).
<meta>Provides metadata like character set, viewport, and SEO info.
<link>Links external stylesheets (CSS).
<script>Includes JavaScript for interactivity.

Example: Head Section with Metadata

<head>
    <title>My Awesome Page</title>
    <meta charset="UTF-8">
    <meta name="description" content="A beginner's guide to HTML.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>

💡 The <meta viewport> tag ensures mobile responsiveness.

4. The <body> Section

The <body> section contains all visible content, including:
✔ Text (headings, paragraphs)
✔ Images
✔ Links
✔ Lists
✔ Forms

Example: Body Section with Various Elements

<body>
    <h1>Welcome to My Site</h1>
    <p>This is an example paragraph with a <a href="https://example.com">link</a>.</p>
    <img src="image.jpg" alt="Example Image">
    <ul>
        <li>First Item</li>
        <li>Second Item</li>
    </ul>
</body>

💡 The <body> tag renders everything users see on the webpage.

5. Adding a Favicon (<link rel="icon">)

A favicon is the small icon that appears on the browser tab.

How to Add a Favicon?

  1. Create a 32×32 or 16×16 favicon.ico file.
  2. Place it in the website’s root directory.
  3. Add this inside <head>:
<link rel="icon" type="image/png" href="favicon.png">

✅ Helps in branding and improves user recognition.

6. Comments in HTML (<!-- -->)

HTML comments help document your code but are not displayed on the webpage.

Example: Using Comments

<!-- This is a comment -->
<p>This is visible content.</p>

🔹 Comments are useful for debugging and team collaboration.

7. Putting It All Together – Full HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <h1>Welcome!</h1>
    <p>This is my first webpage.</p>
</body>
</html>

This is a complete, well-structured HTML page.

Conclusion

In this chapter, you learned:
✅ What <!DOCTYPE> does and why it’s important.
✅ How to structure an HTML document using <html>, <head>, and <body>.
✅ The role of metadata, favicons, and comments.

Scroll to Top