2.1 HTML Document Structure

The Basic Template

Every HTML page follows this exact structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Structure Explained

Element	Purpose
<!DOCTYPE>	Tells browser it's HTML5
<html>	Root element
<head>	Metadata (not displayed)
<title>	Browser tab title
<body>	Visible content

🎮 Try It Yourself

Edit the HTML below and see the result instantly:

2.2 HTML Tags & Elements

What are Tags?

HTML tags are keywords surrounded by angle brackets:

<tagname>content goes here</tagname>

Opening tag: <p>
Closing tag: </p> (with forward slash)
Self-closing tags: <img>, <br>, <hr>

Common Tags Gallery

<h1> -

Heading 1

<h2> -

Heading 2

<p> -

Paragraph text

<strong> - Bold text

<em> - Italic text

Tag Practice Game

Match the tag with its description:

<p>

<h1>

<em>

2.3 Text & Headings

Heading Levels

<h1> Main Title (most important)

<h2> Section Title

<h3> Sub-section

<h4> Minor heading

<h5> Small heading

<h6> Smallest heading

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Sub-section</h3>

Text Formatting

Tag	Result
<b> or <strong>	Bold text
<i> or <em>	Italic text
<u>	Underlined text
<mark>	Highlighted
<small>	Smaller text
<del>	~~Deleted text~~
<ins>	Inserted text
<sub>	H₂O (subscript)
<sup>	10^th (superscript)

✏️ Text Formatting Playground

2.4 Images & Videos

Images

<img src="image.jpg" alt="Description" width="300" height="200">

Attributes:

src - Image source (URL or file path)
alt - Alternative text (accessibility)
width/height - Dimensions

Videos

<video controls width="300">
    <source src="video.mp4" type="video/mp4">
    Your browser doesn't support video.
</video>

YouTube Embed

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

Audio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

2.5 Links & Navigation

External Links

<a href="https://google.com" target="_blank">Visit Google</a>

Result: Visit Google

Internal Links

<a href="about.html">About Us</a>

Result: About Us

Anchor Links

<a href="#top">Back to Top</a>

Result: Back to Top

Email Links

<a href="mailto:info@kranedigital.com">Email Us</a>

Result: Email Us

Phone Links

<a href="tel:+2348104727681">Call Us</a>

Result: Call Us

Download Links

<a href="file.pdf" download>Download PDF</a>

Result: Download PDF

Navigation Bar Example

html

2.6 Lists & Tables

Unordered List

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

HTML
CSS
JavaScript

Ordered List

<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JS</li>
</ol>

Learn HTML
Learn CSS
Learn JavaScript

Definition List

<dl>
    <dt>HTML</dt>
    <dd>Structure</dd>
</dl>

HTML: HyperText Markup Language
CSS: Cascading Style Sheets

HTML Tables

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Name	Age	Course
John Doe	25	HTML
Jane Smith	30	CSS
Bob Johnson	22	JS

2.7 Forms & Input Elements

Form Structure

<form action="submit.php" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <button type="submit">Submit</button>
</form>

Input Types

Text:

Email:

Password:

Number:

Date:

Color:

Range:

Radio Buttons

Male
Female
Other

<input type="radio" name="gender" value="male">

Checkboxes

HTML
CSS
JavaScript

<input type="checkbox" name="skills[]" value="html">

Select Dropdown

<select>
    <option>HTML</option>
</select>

Textarea

<textarea rows="4"></textarea>

📝 Complete Registration Form

Full Name *

Email *

Gender
Male Female

Skills
HTML CSS JS

Course

Message

2.8 Semantic HTML5

Semantic tags give meaning to your content, making it accessible and SEO-friendly.

`<header>`

Introductory content, navigation

<header>
    <h1>My Site</h1>
    <nav>...</nav>
</header>

`<nav>`

Navigation links

<nav>
    <a href="/">Home</a>
</nav>

`<main>`

Primary content

<main>
    <article>...</article>
</main>

`<article>`

Self-contained content

<article>
    <h2>Title</h2>
    <p>Content...</p>
</article>

`<section>`

Thematic grouping

<section>
    <h2>Section</h2>
    <p>...</p>
</section>

`<aside>`

Sidebar content

<aside>
    <h3>Related</h3>
</aside>

`<footer>`

Copyright, contact

<footer>
    <p>© 2026</p>
</footer>

`<figure>`

Images with captions

<figure>
    <img src="img.jpg">
    <figcaption>Caption</figcaption>
</figure>

`<time>`

Dates and times

<time datetime="2026-02-24">
    Feb 24, 2026
</time>

🏗️ Semantic Layout Example

<header> - Logo + Navigation

<main>

<article> - Blog Post

<section> - Comments

<aside> - Sidebar

<footer> - Copyright

HTML FUNDAMENTALS

HTML Curriculum

Section 2.1 - 2.4

Section 2.5 - 2.8