LESSON 01 • THE BUILDING BLOCKS

Anatomy of HTML5 Tags

HTML (HyperText Markup Language) gives structure to every webpage on the Internet using tags.

🏷️ What is an HTML Tag & Element?

An HTML element starts with an Opening Tag, contains content inside, and finishes with a Closing Tag.

<h1 class="title">Opening Tag + Attribute

Hello World!Element Content

</h1>Closing Tag

📄 Standard Document Boilerplate

<!DOCTYPE html> - Tells browser this is modern HTML5
<html> - Root element wrapping all web code
<head> - Metadata, title, fonts & styles (invisible)
<body> - All visible elements rendered on screen

⚡ Live HTML Editor & Real-Time Preview

HTML CODE:

<!-- Edit HTML below -->
<h1>Welcome to Winet Explains!</h1>
<p>This is a <strong>live rendered</strong> paragraph element inside our custom preview container.</p>
<button style="background: #00ff88; color: #000; padding: 8px 16px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer;">Click Me!</button>

LIVE VISUAL PREVIEW:

LESSON 02 • TEXT & TYPOGRAPHY

Headings & Text Formatting

Structure your text hierarchy using headings <h1> to <h6> and add inline text emphasis.

✍️ Essential Text Tags

Tag	Purpose
`<h1> - <h6>`	Headings (1 is largest/most important)
`<p>`	Standard paragraph text block
`<strong>`	Bold text (high importance)
`<em>`	Italic text (emphasis)
`<mark>`	Highlighted text background
`<code>`	Inline monospace code snippet
`<blockquote>`	Indented quote block
`<br> / <hr>`	Line break / Horizontal rule divider

⚡ Live HTML Editor & Real-Time Preview

HTML CODE:

<h1>Main Article Headline (H1)</h1>
<h2>Section Subtitle (H2)</h2>

<p>HTML5 allows you to format text easily using <strong>strong bold tags</strong> and <em>emphatic italics</em>.</p>

<p>You can also <mark style="background:#ffd700; color:#000;">highlight important words</mark> or display code snippets like <code>const score = 100;</code>.</p>

<hr style="border-color: rgba(255,255,255,0.2);">
<blockquote style="border-left: 3px solid #00f2fe; padding-left: 10px; color: #94a3b8;">
  "Coding HTML is like speaking directly to web browsers!"
</blockquote>

LIVE VISUAL PREVIEW:

LESSON 03 • LISTS & DATA

Lists & Structured Content

Organize content into bulleted, numbered, or definition lists.

📋 3 Types of HTML Lists

1. Unordered List `<ul>`

Bullet points for items where order doesn't matter (e.g. Shopping List).

<ul> <li>Item</li> </ul>

2. Ordered List `<ol>`

Numbered sequence for step-by-step instructions (e.g. Recipes).

<ol> <li>Step 1</li> </ol>

3. Description List `<dl>`

Terms <dt> paired with definitions <dd> (e.g. Glossaries).

<dl> <dt>Term</dt> <dd>Def</dd> </dl>

⚡ Live HTML Editor & Real-Time Preview

HTML CODE:

<h3>🎮 How to Become a Web Dev:</h3>
<ol style="color: #cbd5e1; padding-left: 20px;">
  <li>Learn HTML5 Structure</li>
  <li>Master CSS3 Styling</li>
  <li>Add JavaScript Interactivity</li>
</ol>

<h3>🛒 Project Stack:</h3>
<ul style="color: #cbd5e1; padding-left: 20px;">
  <li>HTML5 Semantic Tags</li>
  <li>CSS Glassmorphic Cards</li>
  <li>Vanilla JS Event Engine</li>
</ul>

LIVE VISUAL PREVIEW:

LESSON 04 • HYPERLINKS & ANCHORS

Links & Web Navigation

The anchor tag <a href="..."> turns text or images into clickable links across the Web.

🔗 Anchor Attributes (`href` & `target`)

href="https://..."

Destination URL: The web address or file path the link leads to.

target="_blank"

New Tab: Opens the external link in a brand-new browser tab!

href="mailto:user@site.com"

Email Link: Launches the default desktop email app automatically.

href="#section-id"

Internal Anchor: Smoothly scrolls down to an element with `id="section-id"`.

⚡ Live HTML Editor & Real-Time Preview

HTML CODE:

<h3>🔗 Clickable Web Links Demo</h3>

<!-- External Link opening in new tab -->
<p>
  Visit <a href="https://developer.mozilla.org" target="_blank" style="color: #00f2fe; font-weight: bold;">MDN Web Docs ↗</a> for official web references.
</p>

<!-- Styled Button Link -->
<a href="mailto:hello@winetexplains.dev" style="display: inline-block; background: #ff3b30; color: #fff; padding: 10px 18px; border-radius: 8px; text-decoration: none; font-weight: bold;">
  ✉️ Email Winet Explains
</a>

LIVE VISUAL PREVIEW:

LESSON 05 • MEDIA & ASSETS

Images, Audio & Video

Embed rich multimedia content natively using HTML5 tags without third-party plugins.

🖼️ Image & Media Elements

<img src="pic.jpg" alt="Description">

Self-closing tag. The `alt` attribute is crucial for screen-readers & SEO!

<audio controls src="audio.mp3">

Renders a native audio player with play/pause and volume controls.

<video controls width="100%" poster="thumb.png">

Renders a video player supporting HTML5 MP4/WebM files.

⚡ Live HTML Editor & Real-Time Preview

HTML CODE:

<h3>🖼️ HTML5 Media Showcase</h3>

<!-- Responsive SVG / Image Avatar -->
<img src="https://api.dicebear.com/7.x/bottts/svg?seed=Winet" alt="Robot Avatar" style="width: 70px; height: 70px; border-radius: 50%; border: 2px solid #00ff88; background: #111;">

<p style="color: #cbd5e1; margin-top: 5px;">HTML5 Native Video Element:</p>
<video controls style="width: 100%; border-radius: 8px; max-height: 120px; background: #000;">
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
  Your browser does not support video.
</video>

LIVE VISUAL PREVIEW:

LESSON 06 • STRUCTURE & ACCESSIBILITY

HTML5 Semantic Layout

Semantic elements describe their meaning to both the browser and developer, replacing generic <div> soup!

🏗️ Semantic Page Layout Tags

<header> Logo & Banner

<nav> Navigation Links

<main> Primary Content

<section> & <article>

<aside> Sidebar

<footer> Copyright & Links

⚡ Live HTML Editor & Real-Time Preview

HTML CODE:

<!-- Semantic Layout Example -->
<header style="background: rgba(0,242,254,0.15); padding: 8px; border-radius: 6px; margin-bottom: 6px;">
  <h4 style="margin:0; color:#00f2fe;">📰 Tech Weekly News</h4>
</header>

<main style="display: flex; gap: 8px;">
  <article style="flex: 2; background: rgba(255,255,255,0.05); padding: 8px; border-radius: 6px;">
    <h5>HTML5 Semantics Are Here!</h5>
    <p style="font-size:0.8rem; color:#cbd5e1;">Using semantic tags improves SEO Google rank and accessibility.</p>
  </article>

  <aside style="flex: 1; background: rgba(255,215,0,0.1); padding: 8px; border-radius: 6px;">
    <h6 style="margin:0; color:#ffd700;">Trending</h6>
    <small style="color:#94a3b8;">#WebDev #HTML5</small>
  </aside>
</main>

LIVE VISUAL PREVIEW:

LESSON 07 • USER INPUT

Forms, Inputs & Labels

HTML forms collect data from users using specialized input controls.

📝 Essential Form Controls

⚡ Live HTML Editor & Real-Time Preview

HTML CODE:

<form style="display:flex; flex-direction:column; gap:8px;">
  <label style="color:#00f2fe; font-weight:bold; font-size:0.85rem;">User Name:</label>
  <input type="text" placeholder="Enter name..." style="padding:6px; border-radius:6px; border:1px solid #444; background:#111; color:#fff;">

  <label style="color:#00f2fe; font-weight:bold; font-size:0.85rem;">Favorite Theme Color:</label>
  <input type="color" value="#00ff88" style="height:35px; width:100%; border:none; cursor:pointer;">

  <div style="display:flex; align-items:center; gap:6px; margin-top:4px;">
    <input type="checkbox" id="check-terms">
    <label for="check-terms" style="color:#cbd5e1; font-size:0.8rem;">I agree to HTML5 terms</label>
  </div>

  <button type="button" style="background:#ff3b30; color:#fff; padding:8px; border:none; border-radius:6px; font-weight:bold; cursor:pointer;">Register Account</button>
</form>

LIVE VISUAL PREVIEW:

LESSON 08 • TABULAR DATA

HTML Tables & Data Grids

Format grid-based tabular data cleanly using semantic table tags.

📊 Table Tags & Attributes

Tag / Attribute	Description
`<table>`	Main table container element
`<thead> / <tbody>`	Table Header vs Table Body sections
`<tr>`	Table Row (contains cells)
`<th>`	Header cell (bold, centered by default)
`<td>`	Standard Data cell
`colspan="2"`	Spans cell across multiple columns
`rowspan="2"`	Spans cell across multiple rows

⚡ Live HTML Editor & Real-Time Preview

HTML CODE:

<table style="width:100%; border-collapse:collapse; text-align:left; font-size:0.85rem;">
  <thead>
    <tr style="background:rgba(0,242,254,0.2); color:#00f2fe;">
      <th style="padding:6px; border:1px solid #333;">Rank</th>
      <th style="padding:6px; border:1px solid #333;">Player</th>
      <th style="padding:6px; border:1px solid #333;">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding:6px; border:1px solid #333;">🥇 1st</td>
      <td style="padding:6px; border:1px solid #333;">WinetDev</td>
      <td style="padding:6px; border:1px solid #333; color:#00ff88; font-weight:bold;">9,850</td>
    </tr>
    <tr style="background:rgba(255,255,255,0.03);">
      <td style="padding:6px; border:1px solid #333;">🥈 2nd</td>
      <td style="padding:6px; border:1px solid #333;">CyberAlex</td>
      <td style="padding:6px; border:1px solid #333; color:#00ff88; font-weight:bold;">8,420</td>
    </tr>
  </tbody>
</table>

LIVE VISUAL PREVIEW:

🎓 Winet's Presenter Notes:

Important rule: Only use `

` for actual tabular data (like scoreboards, financial sheets, or schedules). Do NOT use tables for page layouts—use CSS Flexbox or Grid instead!

LESSON 09 • EMBEDS & VECTOR GRAPHICS

iFrames, SVG & Canvas

Embed third-party webpages or render scalable vector graphics directly in your markup.

🎨 Advanced HTML5 Graphics

<iframe src="url" width="100%" height="200">

Embeds another HTML webpage or YouTube video inside a window box frame.

<svg width="100" height="100"> <circle>

Scalable Vector Graphics. Crisp crisp resolution at any zoom level without pixelation!

<canvas id="my-canvas">

High-speed bitmap drawing surface controlled via JavaScript (games, animations).

⚡ Live HTML Editor & Real-Time Preview

HTML CODE:

<h3>🎨 Inline SVG Vector Graphics</h3>

<svg width="120" height="120" viewBox="0 0 100 100">
  <!-- Glowing Circle -->
  <circle cx="50" cy="50" r="40" fill="#ff3b30" stroke="#00ff88" stroke-width="4" />
  <!-- Star Vector -->
  <polygon points="50,20 61,42 85,42 66,57 73,80 50,65 27,80 34,57 15,42 39,42" fill="#ffd700" />
</svg>

<p style="font-size:0.8rem; color:#a5f3fc;">Scalable vector graphics render crisp at any zoom!</p>

LIVE VISUAL PREVIEW:

LESSON 10 • CAPSTONE WEBPAGE BUILDER

Winet's HTML5 Boss Challenge! 🏆

Test your HTML knowledge or build a full profile webpage live in the scratchpad!

Question 1 of 5 Score: 0

🚀 Full HTML Profile Webpage Sandbox

HTML CODE:

<!-- Full Profile Card -->
<div style="font-family:sans-serif; text-align:center; padding:15px;">
  <img src="https://api.dicebear.com/7.x/bottts/svg?seed=WinetDev" style="width:70px; height:70px; border-radius:50%; border:2px solid #ff3b30;">
  
  <h3 style="margin:5px 0; color:#00f2fe;">Winet Explains Graduate</h3>
  <p style="font-size:0.8rem; color:#cbd5e1;">Certified HTML5 Web Developer 🎉</p>
  
  <a href="https://github.com" target="_blank" style="display:inline-block; background:#00ff88; color:#000; padding:6px 14px; border-radius:6px; font-weight:bold; text-decoration:none; margin-top:8px;">View Portfolio ↗</a>
</div>

LIVE VISUAL PREVIEW:

Anatomy of HTML5 Tags

🏷️ What is an HTML Tag & Element?

📄 Standard Document Boilerplate

🎓 Winet's Presenter Notes:

Headings & Text Formatting

✍️ Essential Text Tags

🎓 Winet's Presenter Notes:

` tag per page for the main title. Use `

` for major sections and `

` for sub-sections!

Lists & Structured Content

📋 3 Types of HTML Lists

1. Unordered List `<ul>`

2. Ordered List `<ol>`

3. Description List `<dl>`

🎓 Winet's Presenter Notes:

Links & Web Navigation

🔗 Anchor Attributes (`href` & `target`)

🎓 Winet's Presenter Notes:

Images, Audio & Video

🖼️ Image & Media Elements

🎓 Winet's Presenter Notes:

HTML5 Semantic Layout

🏗️ Semantic Page Layout Tags

🎓 Winet's Presenter Notes:

Forms, Inputs & Labels

📝 Essential Form Controls

🎓 Winet's Presenter Notes:

HTML Tables & Data Grids

📊 Table Tags & Attributes

🎓 Winet's Presenter Notes:

iFrames, SVG & Canvas

🎨 Advanced HTML5 Graphics

🎓 Winet's Presenter Notes:

Winet's HTML5 Boss Challenge! 🏆

🎓 Winet's Presenter Notes:

📑 Winet Explains HTML5 - Slide Directory

Anatomy of HTML5 Tags

🏷️ What is an HTML Tag & Element?

📄 Standard Document Boilerplate

🎓 Winet's Presenter Notes:

Headings & Text Formatting

✍️ Essential Text Tags

🎓 Winet's Presenter Notes:

` tag per page for the main title. Use `

` for major sections and `

` for sub-sections!

Lists & Structured Content

📋 3 Types of HTML Lists

1. Unordered List <ul>

2. Ordered List <ol>

3. Description List <dl>

🎓 Winet's Presenter Notes:

Links & Web Navigation

🔗 Anchor Attributes (`href` & `target`)

🎓 Winet's Presenter Notes:

Images, Audio & Video

🖼️ Image & Media Elements

🎓 Winet's Presenter Notes:

HTML5 Semantic Layout

🏗️ Semantic Page Layout Tags

🎓 Winet's Presenter Notes:

Forms, Inputs & Labels

📝 Essential Form Controls

🎓 Winet's Presenter Notes:

HTML Tables & Data Grids

📊 Table Tags & Attributes

🎓 Winet's Presenter Notes:

iFrames, SVG & Canvas

🎨 Advanced HTML5 Graphics

🎓 Winet's Presenter Notes:

Winet's HTML5 Boss Challenge! 🏆

🎓 Winet's Presenter Notes:

📑 Winet Explains HTML5 - Slide Directory

1. Unordered List `<ul>`

2. Ordered List `<ol>`

3. Description List `<dl>`