Is HTML/CSS free to learn?

Yes. Every HTML/CSS lesson on CodeMaster is completely free, with no ads. No login required to read the concept notes.

Can beginners follow HTML/CSS?

Yes. Each lesson goes concept explanation → code example → interactive demo → quick quiz, so you can follow with no prior knowledge.

How long does HTML/CSS take?

Each lesson is about 30–60 minutes. At 1–2 lessons a day you can finish the whole category in roughly 1–2 months.

HTML Structure — The Role of head and body

🎯 After reading this lesson

After reading through this lesson, you will be able to do the following 3 things with confidence.

▸✅ The difference between block and inline
▸✅ Properly connecting form, input, and label
▸✅ The 4 principles of writing img alt text

Keep the learning objectives as a checklist and close the lesson once you can answer all of them.

The Anatomy of an HTML Page

Key Takeaway

Every HTML page is divided into two parts: + . head is meta information that is not visible, while body is the actual visible content.

head — The Back Side of a Page

html

<head>
    <meta charset="UTF-8">                        <!-- Prevents garbled characters -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>                      <!-- Browser tab and search results -->
    <meta name="description" content="Page description">  <!-- Search result preview -->
    <link rel="stylesheet" href="styles.css">     <!-- Link to CSS -->
    <link rel="icon" href="favicon.ico">          <!-- Tab icon -->
    <script src="app.js" defer></script>           <!-- Link to JS -->
</head>

What goes here:

▸Meta information: encoding, viewport, description, OG (social sharing)
▸External file links: CSS, JS, fonts, icons
▸Search Engine Optimization (SEO): title, description, canonical, etc.

Not directly visible to users, but search engines, social networks, and accessibility tools read this information.

body — The Front Side of a Page

html

<body>
    <header>...</header>
    <main>
        <article>Actual content</article>
    </main>
    <footer>...</footer>
</body>

All the content the user actually sees goes here. Structuring meaning with semantic tags (header, main, article, section, aside, footer) is the standard.

5 Essential Elements Often Missed

1. <!DOCTYPE html> — HTML5 declaration. Without it, the browser runs in quirks mode
2. <html lang="ko"> — Declares language. Affects screen readers and translation tools
3. <meta charset="UTF-8"> — 100% prevents garbled characters
4. <meta viewport> — Required for mobile responsiveness
5. <title> — Top SEO priority + browser tab

OG Tags — SNS Share Preview

When sharing links, the preview shown on KakaoTalk and Facebook is determined by OG (Open Graph) tags:

html

<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://.../preview.png">
<meta property="og:url" content="https://example.com">

Important for marketing. Without a preview, click-through rates drop ↓.

Summary

head = invisible meta, body = actual content. Good HTML means writing both without omission, semantically.

The Relationship Between Accessibility (a11y), Semantic HTML, and SEO

What Semantic Tags Actually Change

1. Screen Readers — People Who Browse the Web by Ear, Without Sight

html

<!-- ❌ Meaningless div -->
<div onclick="navigate('/about')">About</div>

<!-- ✅ Semantic -->
<a href="/about">About</a>

NVDA and VoiceOver automatically announce "Link: About". A div click is not read aloud.

2. Keyboard Users — People Who Cannot Use a Mouse

▸<a> and <button> natively support Tab to focus + Enter to activate
▸<div onclick> has no Tab focus. Requires tabindex="0" + role="button" + manually handling keyboard events

3. SEO — Google's Bot Understanding Meaning

html

<main>
    <article>
        <h1>Title</h1>
        <section>
            <h2>Section Title</h2>
            <p>Body text...</p>
        </section>
    </article>
    <aside>Related articles</aside>
</main>

Google can automatically identify where the main content is. SEO score improves.

4 Core ARIA Attributes

role — Assigning Meaning

html

<div role="alert">Save failed</div>
<!-- The screen reader reads it *immediately* (characteristic of the alert role) -->

<div role="button" tabindex="0" onkeydown="if(event.key==='Enter')click()">
    Button
</div>

Semantic tags (<button>) take priority whenever possible. ARIA is only for when there is no alternative.

aria-label — An Invisible Label

html

<!-- A button with only an icon -->
<button aria-label="Open menu">
    <svg>...</svg>
</button>

Communicates the meaning of buttons without visible text. Required for icon buttons and search boxes.

aria-hidden — Hiding from Screen Readers

html

<svg aria-hidden="true">...</svg>   <!-- Decorative icon -->
<span aria-hidden="true">→</span>   <!-- Visual arrow -->

When text information is duplicated, the icon itself is hidden.

aria-describedby — Linking Additional Description

html

<input id="email" aria-describedby="email-hint">
<small id="email-hint">Example: [email protected]</small>

Also reads the hint when the element receives focus.

alt Text — 4 Principles

html

<!-- ❌ Meaningless -->
<img src="chart.png" alt="image">

<!-- ❌ Too detailed -->
<img src="logo.png" alt="A logo with the text CodeMaster in white letters on a red rounded background">

<!-- ✅ Informative -->
<img src="chart.png" alt="Monthly revenue 2025: January 1M ~ December 2.5M">

<!-- ✅ Decorative -->
<img src="divider.png" alt="">    <!-- Empty alt = explicit instruction to ignore -->

Rules:
1. Convey the meaning of the image in text
2. Use alt="" for decorative images (do not omit)
3. Avoid words like "image" or "photo" (screen readers already announce "image")
4. Keep it short and clear

tabindex — Focus Order

html

<div tabindex="0">   <!-- Focusable (natural order) -->
<div tabindex="-1">  <!-- Not focusable (programmatic only) -->
<div tabindex="5">   <!-- ❌ Do not use positive values — breaks natural order -->

Positive tabindex is an anti-pattern. Follow DOM order.

Quick Audit Tools

▸Lighthouse (Chrome DevTools) — Accessibility score
▸axe DevTools extension — Automated diagnostics
▸Use a screen reader directly — Mac VoiceOver (Cmd+F5), Windows NVDA

🤖 Try Asking AI Like This

▸"Convert this div-based button to a semantic button tag and add keyboard accessibility"
▸"Add aria-label to all of these icon buttons"
▸"Rewrite the alt text on this page to be meaning-focused"

HTML Structure — The Role of head and body

HTML Structure — The Role of head and body

🎯 After reading this lesson

The *Anatomy* of an HTML Page

Key Takeaway

head — The Back Side of a Page

body — The Front Side of a Page

5 Essential Elements Often Missed

OG Tags — SNS Share Preview

Summary

The Relationship Between Accessibility (a11y), Semantic HTML, and SEO

What Semantic Tags Actually Change

1. Screen Readers — People Who Browse the Web by Ear, Without Sight

2. Keyboard Users — People Who Cannot Use a Mouse

3. SEO — Google's Bot Understanding Meaning

4 Core ARIA Attributes

role — Assigning Meaning

aria-label — An Invisible Label

aria-hidden — Hiding from Screen Readers

aria-describedby — Linking Additional Description

alt Text — 4 Principles

tabindex — Focus Order

Quick Audit Tools

🤖 Try Asking AI Like This

The Anatomy of an HTML Page