HTML Deep Dive — The Skeleton

HTML (HyperText Markup Language) is the skeleton of every webpage. It defines:

What content exists
How content is organized
Relationships between elements

Without HTML, there is no webpage. CSS and JavaScript enhance HTML, but HTML is required.

The Document Structure

Every HTML page follows this structure:

HTML

<!DOCTYPE html>           <!-- 1. Declaration -->
<html lang="en">          <!-- 2. Root element -->
<head>                    <!-- 3. Metadata (invisible) -->
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>                    <!-- 4. Content (visible) -->
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</body>
</html>

Let's Break It Down:

Document Structure Explained

1. <!DOCTYPE html>

Tells browser: "This is HTML5"
Must be first line
Not actually an HTML tag

2. <html lang="en">

Root element wrapping everything
lang="en" specifies language (helps accessibility)

3. <head> — The Metadata

Information ABOUT the page (NOT displayed)
Contains: <title>, <meta>, <link>, <script>

4. <body> — The Content

Everything VISIBLE on the page
All your actual content goes here

Structure Tags

These organize your content:

`<div>` — Generic Container

HTML

<div class="card">
    <h2>Title</h2>
    <p>Content goes here</p>
</div>

Most common tag — groups things together
No inherent meaning — style with CSS

`<header>` — Page/Section Header

HTML

<header>
    <img src="logo.png" alt="Company Logo">
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

Top of page or section — contains logo, navigation

Other Structure Tags

Tag	Purpose	Usage
`<nav>`	Navigation links	Menu items, footer links
`<main>`	Primary content	Only ONE per page
`<section>`	Thematic grouping	Groups related content
`<article>`	Independent content	Blog posts, news items
`<footer>`	Page/section footer	Copyright, contact info

Text Tags

Headings: `<h1>` through `<h6>`

HTML

<h1>Main Page Title</h1>     <!-- Largest, most important -->
<h2>Section Heading</h2>     <!-- Second level -->
<h3>Subsection</h3>          <!-- Third level -->
<h4>Minor heading</h4>       <!-- Fourth level -->

Heading Rules

Use in order (don't skip from h1 to h4)
Only ONE <h1> per page
Important for SEO and accessibility

Other Text Tags

HTML

<!-- Paragraph -->
<p>This is a paragraph of text.</p>
 
<!-- Inline container for styling -->
<p>This has <span class="highlight">highlighted</span> text.</p>
 
<!-- Hyperlink -->
<a href="https://google.com">Go to Google</a>
<a href="/about">About Page</a>
 
<!-- Emphasis -->
<p>This is <strong>very important</strong> information.</p>
<p>This is <em>emphasized</em> text.</p>

Interactive Tags

`<button>` — Clickable Button

HTML

<button>Click Me</button>
<button type="submit">Submit Form</button>
<button onclick="doSomething()">Do Something</button>

Button vs Link

Buttons DO things (submit, toggle, calculate)
Links GO places (navigate to pages)

`<input>` — User Input

HTML

<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter password">
<input type="checkbox"> Remember me
<input type="submit" value="Submit">

`<form>` — Form Container

HTML

<form action="/submit" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">Login</button>
</form>

Other Input Elements

HTML

<!-- Multi-line text -->
<textarea rows="4" placeholder="Enter your message..."></textarea>
 
<!-- Dropdown selection -->
<select name="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="lk">Sri Lanka</option>
</select>

Media Tags

`<img>` — Image

HTML

<img src="photo.jpg" alt="A beautiful sunset">
<img src="https://example.com/image.png" alt="External image">

Always Include alt!

alt provides description for accessibility
Required for screen readers
Shows if image fails to load

Video and Audio

HTML

<!-- Video player -->
<video src="movie.mp4" controls width="640">
    Your browser doesn't support video.
</video>
 
<!-- Audio player -->
<audio src="song.mp3" controls>
    Your browser doesn't support audio.
</audio>

Understanding Attributes

Attributes provide additional information about elements:

HTML

<a href="https://google.com" target="_blank" class="nav-link" id="home-link">
   │           │                    │                │               │
   └─ tag      └─ where to go       └─ new tab       └─ CSS styling  └─ unique ID

Common Attributes

Attribute	Purpose	Example
`id`	Unique identifier	`id="main-header"`
`class`	Styling group	`class="button primary"`
`src`	Source URL	`src="image.jpg"`
`href`	Link destination	`href="/about"`
`alt`	Image description	`alt="Profile photo"`
`type`	Input type	`type="email"`
`placeholder`	Input hint	`placeholder="Enter name"`

`id` vs `class`

class

Unique — one per page

Reusable — many can share

#myId in CSS

.myClass in CSS

For specific elements

For groups/categories

Putting It Together

A complete page structure:

HTML

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    </header>
    
    <main>
        <section id="hero">
            <h1>Welcome to My Website</h1>
            <p>This is the main heading and introduction.</p>
            <button>Get Started</button>
        </section>
        
        <section id="features">
            <h2>Features</h2>
            <div class="feature-card">
                <img src="icon1.png" alt="Feature 1">
                <h3>Fast</h3>
                <p>Lightning quick performance.</p>
            </div>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 My Company</p>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>

Lesson Summary

HTML Document Structure

Text

<!DOCTYPE html>
<html>
  <head> (invisible metadata) </head>
  <body> (visible content) </body>
</html>

Tag Categories

Category	Tags
Structure	`div`, `header`, `main`, `footer`, `section`, `article`, `nav`
Text	`h1`-`h6`, `p`, `span`, `a`, `strong`, `em`
Interactive	`button`, `input`, `form`, `select`, `textarea`
Media	`img`, `video`, `audio`

Key Attributes

id = unique identifier
class = styling group
src = source for media
href = link destination
alt = image description

📝 Quiz

1/3

What goes in the <head> section?

Next Up

Lesson 2.3: CSS Deep Dive
Learn how CSS transforms the skeleton into beautiful designs!

HTML Deep Dive — The Skeleton

The Document Structure

Let's Break It Down:

Document Structure Explained

Structure Tags

<div> — Generic Container

<header> — Page/Section Header

Other Structure Tags

Text Tags

Headings: <h1> through <h6>

Heading Rules

Other Text Tags

Interactive Tags

<button> — Clickable Button

Button vs Link

<input> — User Input

<form> — Form Container

Other Input Elements

Media Tags

<img> — Image

Always Include alt!

Video and Audio

Understanding Attributes

Common Attributes

id vs class

Putting It Together

Lesson Summary

HTML Document Structure

Tag Categories

Key Attributes

📝 Quiz

Next Up

`<div>` — Generic Container

`<header>` — Page/Section Header

Headings: `<h1>` through `<h6>`

`<button>` — Clickable Button

`<input>` — User Input

`<form>` — Form Container

`<img>` — Image

`id` vs `class`