Introduction to HTML
Introduction to HTML
🎯 After reading this lesson
After finishing this lesson, you will be able to confidently do the following three things.
- ▸✅ Semantic tags (header/main/article/footer) + SEO impact
- ▸✅ The role of DOCTYPE, meta, and viewport
- ▸✅ Accessibility basics (alt, aria, tabindex)
Keep the learning goals as a checklist and close the lesson once you can answer all of them.
What is HTML — *the skeleton of the web*
The core in one line
HTML (HyperText Markup Language) = a markup language that expresses the content and structure of a web page. It was created by Tim Berners-Lee in 1989 and remains the foundation of the web to this day.
Why is it called markup?
Markup = a way of annotating content. Just like highlighting headings and important parts with a red pen on paper, HTML assigns meaning to text using tags.
<h1> = "this is a level-1 heading", <p> = "this is a paragraph", <a> = "this is a link" — meaning is explicitly declared.
The real value of HTML — semantics
Old HTML was dominated by <div> and <span> tags. The visual result looked the same, but machines (search engines, screen readers, AI) had no idea what it meant.
HTML5 introduced semantic tags:
- ▸
<article>— standalone article - ▸
<nav>— navigation - ▸
<header>/<footer>— header / footer - ▸
<section>— a meaningful section - ▸
<main>— main content - ▸
<aside>— supplementary information
Using these provides:
- ▸Improved search engine SEO — Google understands the page structure
- ▸Better accessibility — screen readers navigate more effectively
- ▸AI-friendly — Claude and GPT grasp the page meaning more accurately
The most basic structure
- ▸
<!DOCTYPE html>— HTML5 declaration - ▸
<html lang="ko">— Korean-language page (affects screen readers and translation) - ▸
<meta charset="UTF-8">— required to prevent character encoding issues - ▸
<meta viewport>— required for mobile responsiveness - ▸
<title>— browser tab title + search result title
10 commonly used tags
Common beginner mistakes
1. Ignoring semantics: use <header> instead of <div class="header">. A big difference for SEO and accessibility.
2. Missing alt: an image without alt="" is inaccessible to visually impaired users and hurts SEO.
3. Multiple h1 tags: only one h1 per page is recommended (the main heading).
4. Overusing inline styles: use CSS classes instead of <p style="color:red">.
Quick summary
HTML expresses structure and meaning. Actively using semantic tags improves SEO, accessibility, and AI comprehension all at once. Created in 1989, it is still the foundation of every web page.
🖥️ Try it yourself — basic HTML structure
🤖 Try asking AI like this
Knowing the concepts from this lesson lets you give AI specific instructions — not a vague 'fix this', but a request with vocabulary. That's where token savings begin.
- ▸"Refactor this HTML/CSS by applying the HTML introduction concepts"
- ▸"Check this for accessibility and SEO issues related to the HTML introduction"
- ▸"Recreate the same result with Tailwind classes"
Why does this reduce tokens?
Without knowing the concepts, you have to ask 'what does that mean?' after every AI reply. Those follow-up questions eat tokens. Learn the concept once and the conversation ends in one exchange.