Courses/HTML & CSS/HTML Basics & Structure

Lesson 2 • Beginner

HTML Basics & Structure

Master the foundation of every website - clean, correct HTML structure.

What You'll Learn

✓ The required HTML document skeleton
✓ DOCTYPE, html, head, and body tags
✓ Semantic HTML elements (header, nav, main, footer)
✓ Headings hierarchy (h1-h6)
✓ HTML comments for documentation
✓ Lists, links, and images

1) Why HTML Structure Matters

HTML structure is the foundation of every website. No matter how advanced the design, animations, or backend logic become, everything still rests on clean, correct HTML.

Bad structure =

❌ Broken layouts
❌ Poor SEO
❌ Accessibility problems
❌ Hard-to-maintain code

Good structure =

✅ Faster websites
✅ Easier styling
✅ Easier JavaScript later
✅ Professional-quality projects

2) What HTML Really Does

HTML describes what exists on the page, not how it behaves.

HTML answers questions like:

• What is a heading?
• What is a paragraph?
• What is a section?
• What is navigation?

3) The Required HTML Page Skeleton

Every real HTML document must follow this structure:

HTML Document Structure

The essential skeleton every HTML page needs

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is the body where all visible content goes.</p>
    
    <!-- Try adding more content here! -->
    <h2>About Me</h2>
    <p>I'm learning HTML and CSS.</p>
  </body>
</html>

Every part has a specific purpose - let's explore each one.

4) <!DOCTYPE html>

This line tells the browser: "This is a modern HTML5 document."

Without it:

❌ Browsers may switch to old compatibility modes
❌ Layout bugs can occur
❌ CSS may behave strangely

Always include it. No exceptions.

5) <html> and lang Attribute

The <html> tag wraps the entire page.

HTML Language Attribute

See how the lang attribute helps accessibility

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Language Demo</title>
</head>
<body style="font-family: sans-serif; padding: 20px; background: #0f172a; color: white;">
  <h1>English Content</h1>
  <p>The lang="en" attribute tells browsers and screen readers this page is in English.</p>
  
  <h2>Why It Matters:</h2>
  <ul>
    <li>✅ Screen readers pronounce words correctly</li>
    <li>✅ Search engines understand your content</li>
    <li>✅ Better accessibility for all u
...

6) <head> Section (Invisible but Critical)

The <head> contains information about the page, not visible content.

Head Section Elements

Meta tags, title, and linked resources

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">
  
  <!-- Page title (shows in browser tab) -->
  <title>My Amazing Website</title>
  
  <!-- Viewport for mobile responsiveness -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Page description for SEO -->
  <meta name="description" content="Learn HTML the right way">
  
  <!-- Internal CSS styles -->
  <style>
    body {
      font-family: system-ui, sans-serif;

...

7) <body> Section

Everything visible on the page goes inside <body>.

Body Content

All visible content lives in the body

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Body Content Demo</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: linear-gradient(to bottom, #0f172a, #1e293b);
      color: #e5e7eb;
      padding: 40px;
      min-height: 100vh;
      margin: 0;
    }
    h1 { color: #22c55e; }
    .card {
      background: #334155;
      padding: 20px;
      border-radius: 12px;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <h1>Everythi
...

8) Headings (h1 - h6)

HTML has 6 heading levels for content hierarchy:

Heading Hierarchy

See all 6 heading levels in action

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Headings Demo</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #0f172a;
      color: #e5e7eb;
      padding: 20px;
    }
    h1 { color: #ef4444; border-bottom: 2px solid #ef4444; padding-bottom: 10px; }
    h2 { color: #f97316; }
    h3 { color: #eab308; }
    h4 { color: #22c55e; }
    h5 { color: #3b82f6; }
    h6 { color: #8b5cf6; }
  </style>
</head>
<body>
  <h1>H1 - Main Page 
...

Rules:

✅ Use one <h1> per page
✅ Headings should be hierarchical
❌ Do NOT skip levels randomly

9) Comments (For Humans, Not Browsers)

Comments help developers, not browsers.

HTML Comments

Comments are invisible to users but help developers

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Comments Demo</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #0f172a;
      color: #e5e7eb;
      padding: 20px;
    }
    .note { color: #22c55e; font-style: italic; }
  </style>
</head>
<body>
  <!-- This is a comment - browsers ignore it! -->
  
  <h1>HTML Comments</h1>
  
  <!-- 
    Multi-line comments work too!
    Use them to explain complex sections.
  -->
  
  <p>Comments 
...

10) Semantic HTML (VERY IMPORTANT)

Semantic elements describe meaning, not appearance.

Semantic HTML Structure

Build a proper page layout with semantic elements

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #0f172a;
      color: #e5e7eb;
      margin: 0;
    }
    header {
      background: #1e293b;
      padding: 20px;
      border-bottom: 2px solid #3b82f6;
    }
    nav a {
      color: #3b82f6;
      margin-right: 15px;
      text-decoration: none;
    }
    main {
      padding: 20px;
      max-width: 800px;
    }
    s
...

Benefits of Semantic HTML:

✅ Better SEO
✅ Better accessibility
✅ Easier to style
✅ Cleaner code

11) Lists (Ordered & Unordered)

HTML Lists

Create bullet points and numbered lists

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lists Demo</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #0f172a;
      color: #e5e7eb;
      padding: 20px;
    }
    .container { display: flex; gap: 40px; flex-wrap: wrap; }
    .list-box {
      background: #1e293b;
      padding: 20px;
      border-radius: 8px;
      flex: 1;
      min-width: 200px;
    }
    h2 { color: #3b82f6; margin-top: 0; }
    ul { list-style-type: dis
...

12) Links and Images

Links and Images

Add navigation and visual content

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Links & Images</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #0f172a;
      color: #e5e7eb;
      padding: 20px;
    }
    a {
      color: #3b82f6;
      text-decoration: none;
    }
    a:hover { text-decoration: underline; }
    .card {
      background: #1e293b;
      padding: 20px;
      border-radius: 8px;
      margin: 20px 0;
    }
    img {
      border-radius: 8px;
     
...

Practice Challenge

Build a complete personal profile page with:

Proper HTML structure (DOCTYPE, html, head, body)
Semantic elements (header, main, footer)
Headings, paragraphs, and lists
At least one link and one image

Build Your Profile Page

Create a complete personal profile with everything you've learned

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Profile</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, sans-serif;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      color: #e5e7eb;
      min-height: 100vh;
    }
    header {
      background: #1e293b;
      padding: 30px;
      text-align: center;
      border-bottom: 3px solid #3b82f6;
    }
    header img {
      width: 12
...

Key Takeaways

✓Every HTML page needs DOCTYPE, html, head, and body
✓The head contains meta info; the body contains visible content
✓Use semantic elements (header, nav, main, section, footer)
✓Headings create hierarchy - use one h1 per page
✓Always include alt text on images for accessibility

HTML Basics & Structure

What You'll Learn

1) Why HTML Structure Matters

2) What HTML Really Does

3) The Required HTML Page Skeleton

HTML Document Structure

4) <!DOCTYPE html>

5) <html> and lang Attribute

HTML Language Attribute

6) <head> Section (Invisible but Critical)

Head Section Elements

7) <body> Section

Body Content

8) Headings (h1 - h6)

Heading Hierarchy

9) Comments (For Humans, Not Browsers)

HTML Comments

10) Semantic HTML (VERY IMPORTANT)

Semantic HTML Structure

11) Lists (Ordered & Unordered)

HTML Lists

12) Links and Images

Links and Images

Practice Challenge

Build Your Profile Page

Key Takeaways

Cookie & Privacy Settings