Understanding HTML Structure: Complete Guide

Learn about the structure of HTML documents, tags, elements, attributes, and the DOM tree.

Introduction

HTML has a specific structure and hierarchy. Let's understand how it all fits together!

What You Will Learn

  • HTML document structure
  • Tags, elements, and attributes
  • Nesting and hierarchy
  • Parent-child relationships
  • The DOM tree

Basic HTML Document Structure

Every HTML page has this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta information, title, CSS, JS -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- Visible content goes here -->
    <h1>Hello!</h1>
    <p>Welcome.</p>
</body>
</html>

Tags, Elements, and Attributes

Tags

  • Surrounded by angle brackets < >
  • Come in pairs: opening and closing
  • Closing tag has a slash /
<p>   <!-- Opening tag -->
</p>  <!-- Closing tag -->

Elements

  • Opening tag + content + closing tag
<p>This is a paragraph element.</p>

Self-Closing Tags

Some elements don't have closing tags:

<br>
<hr>
<img>
<input>
<link>
<meta>

Attributes

Provide additional information about elements:

<tag attribute="value">Content</tag>

<a href="https://example.com">Click</a>
<img src="image.jpg" alt="Description">

Nesting Elements

Elements can be nested inside other elements:

<div>
    <p>This paragraph is inside a div.</p>
    <ul>
        <li>First item</li>
        <li>Second item</li>
    </ul>
</div>

Proper Nesting ✅

<p><strong>Hello</strong></p>

Improper Nesting ❌

<p><strong>Hello</p></strong>

Parent, Child, and Sibling Relationships

<body>
    <header>
        <h1>Title</h1>
        <nav>...</nav>
    </header>
    <main>
        <article>...</article>
    </main>
</body>

| Relationship | Example | |--------------|---------| | Parent | <body> is parent of <header> and <main> | | Child | <h1> is child of <header> | | Sibling | <header> and <main> are siblings | | Descendant | <h1> is descendant of <body> | | Ancestor | <body> is ancestor of <h1> |

The DOM Tree

DOM stands for Document Object Model. It's the tree representation of HTML.

html
├── head
│   ├── meta
│   ├── meta
│   └── title
│       └── "My Page"
└── body
    ├── header
    │   └── h1
    │       └── "Welcome"
    └── main
        └── p
            └── "Hello!"

Block vs Inline Elements

Block Elements

  • Start on a new line
  • Take full available width
  • Examples: <div>, <p>, <h1>-<h6>, <ul>, <li>, <section>
<div>Block 1</div>
<div>Block 2</div>  <!-- New line -->

Inline Elements

  • Don't start on new line
  • Take only needed width
  • Examples: <span>, <a>, <strong>, <em>, <img>
<p>Text with <span>inline</span> element.</p>

Semantic vs Non-Semantic Elements

Semantic Elements

  • Clearly describe their meaning
  • Good for SEO and accessibility
  • Examples: <header>, <nav>, <main>, <article>, <footer>

Non-Semantic Elements

  • Generic containers
  • No inherent meaning
  • Examples: <div>, <span>

Commenting Your Code

Add comments to explain your code:

<!-- This is a comment -->
<p>Paragraph</p>

<!--
Multi-line
comment
-->

Comments are not displayed in the browser.

Whitespace in HTML

Multiple spaces, tabs, and newlines are collapsed into a single space:

<p>Hello     world!</p>  <!-- Displays as "Hello world!" -->

<p>
    Hello
    world!
</p>  <!-- Also displays as "Hello world!" -->

Use <br> for line breaks and <pre> for preserving whitespace.

Best Practices

✅ Use proper indentation ✅ Use semantic elements when possible ✅ Keep nesting levels reasonable (don't go too deep) ✅ Close all tags (even optional ones) ✅ Use lowercase tag and attribute names ✅ Quote attribute values

Common Mistakes

❌ Forgetting closing tags ❌ Improperly nesting elements ❌ Using block elements inside inline elements ❌ Not using proper indentation ❌ Confusing tags and attributes

Example: Complete Structured Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Welcome!</h2>
            <p>This is my website. Thanks for visiting!</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

FAQs

Q: What is the DOM? A: Document Object Model - the tree representation of HTML.

Q: What's the difference between tag and element? A: A tag is <p>, an element is <p>content</p>.

Q: Do all tags need closing tags? A: No, some are self-closing like <img>, <br>, <hr>.

Related Topics

  • First HTML Program
  • Doctype HTML

Summary

HTML structure is hierarchical with parent-child relationships. Understanding tags, elements, attributes, and the DOM is fundamental!

Next Topic

Great job completing Module 1! Now let's start Module 2: HTML Document Structure with Doctype HTML.

← Back to Syllabus