HTML Basic Structure

Learn the building blocks that make up every HTML document!

What is HTML Structure?

HTML structure is like the skeleton of a web page. Every HTML document follows the same basic pattern with specific sections that serve different purposes.

  • DOCTYPE: Tells the browser this is HTML5
  • HTML: The root container for everything
  • Head: Information about the page (invisible)
  • Body: The actual content users see

Think of it like this: If a webpage is a house, DOCTYPE is the foundation, HTML is the house itself, head is the blueprint, and body is the rooms people use!

Complete HTML Structure

Example: Basic HTML Document


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first HTML page!</p>
</body>
</html>

DOCTYPE Declaration

Example: DOCTYPE


<!DOCTYPE html>
  • Always the very first line
  • Tells the browser to use HTML5
  • Not case-sensitive (but lowercase is standard)
  • Not an HTML tag — it's a declaration

Important: Without DOCTYPE, browsers might display your page incorrectly!

The <html> Tag

Example: HTML Root Element


<html lang="en">
    <!-- Everything goes inside here -->
</html>
  • The root element that wraps everything
  • lang="en" specifies the language (English)
  • Helps screen readers and search engines
  • All other tags go inside <html>

Tip: Change lang="en" to your language code (e.g., lang="es" for Spanish)

The <head> Section

Example: Head Section


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
  • Contains metadata (information about the page)
  • Not visible to website visitors
  • Includes title, character set, CSS links
  • Important for SEO and browser settings

Remember: Head = Information ABOUT the page, not content ON the page!

Essential Meta Tags

Example: Meta Tags Explained


<!-- Character encoding (supports all languages/symbols) -->
<meta charset="UTF-8">

<!-- Makes website mobile-friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Description for search engines -->
<meta name="description" content="Learn HTML basics">

<!-- Keywords for SEO -->
<meta name="keywords" content="HTML, tutorial, web development">
  • charset="UTF-8" – Supports all characters and emojis 😊
  • viewport – Makes your site look good on phones
  • description – Shows up in Google search results

The <title> Tag

Example: Page Title


<title>My Awesome Website | Home</title>
  • Appears in browser tab
  • Shows in search engine results
  • Used when bookmarking the page
  • Keep it short and descriptive (50-60 characters)

Good Title: "Contact Us | CrackEase"
Bad Title: "Page 1"

The <body> Section

Example: Body Section


<body>
    <h1>Welcome!</h1>
    <p>This is the content visitors see.</p>
    <img src="photo.jpg" alt="Photo">
    <a href="about.html">About Us</a>
</body>
  • Contains all visible content
  • Text, images, videos, links, buttons
  • Everything users see and interact with
  • Only one <body> tag per page

Simple Rule: If you can see it on the webpage, it goes in the <body>!

Putting It All Together

Example: Complete HTML Page


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="My personal portfolio website">
    <title>John Doe | Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>John Doe</h1>
        <p>Web Developer</p>
    </header>
    
    <main>
        <section>
            <h2>About Me</h2>
            <p>I love building websites!</p>
        </section>
        
        <section>
            <h2>My Projects</h2>
            <ul>
                <li>Portfolio Website</li>
                <li>E-commerce Store</li>
                <li>Blog Platform</li>
            </ul>
        </section>
    </main>
    
    <footer>
        <p>© 2026 John Doe. All rights reserved.</p>
    </footer>
</body>
</html>

HTML Structure Breakdown

Example: Annotated Structure


<!DOCTYPE html>              <!-- 1. Document type -->
<html lang="en">              <!-- 2. Root element -->
    <head>                    <!-- 3. Metadata section -->
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>                    <!-- 4. Visible content -->
        <h1>Content</h1>
    </body>
</html>

Common Mistakes to Avoid

Example: Wrong vs Right


<!-- ❌ WRONG: Missing DOCTYPE -->
<html>
    <head><title>Title</title></head>
</html>

<!-- ✅ CORRECT: Complete structure -->
<!DOCTYPE html>
<html lang="en">
    <head><title>Title</title></head>
    <body></body>
</html>

<!-- ❌ WRONG: Content in head -->
<head>
    <h1>Welcome</h1>
</head>

<!-- ✅ CORRECT: Content in body -->
<body>
    <h1>Welcome</h1>
</body>

Best Practices

  • Always start with <!DOCTYPE html>
  • Include lang attribute in <html>
  • Add essential meta tags in <head>
  • Write descriptive page titles
  • Keep structure organized and indented
  • Close all tags properly

Pro Tip: Use proper indentation to make your code readable — it's like organizing your room!