HTML 소개
HTML 소개
🎯 이 lesson 을 읽고 나면
이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.
- ▸✅ 시맨틱 태그 (header/main/article/footer) + SEO 영향
- ▸✅ DOCTYPE · meta · viewport 의 역할
- ▸✅ 접근성 (alt · aria · tabindex) 기본
학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.
HTML 이 뭐냐 — *웹의 뼈대*
핵심 한 줄
HTML (HyperText Markup Language) = 웹 페이지의 내용과 구조 를 표현하는 마크업 언어. 1989 년 팀 버너스리가 만들었고, 지금까지 웹의 기반.
왜 마크업 인가
마크업 = 내용에 표시를 다는 방식. 종이에 빨간펜으로 제목·중요한 부분 을 표시하듯, HTML 은 텍스트에 태그 로 의미를 부여합니다.
<h1> = "이건 제목 1단계", <p> = "이건 단락", <a> = "이건 링크" — 의미를 명시 합니다.
HTML 의 진짜 가치 — 시맨틱
옛 HTML 은 <div>·<span> 만 도배했습니다. 보기엔 같지만 기계 (검색엔진·스크린리더·AI) 는 이게 뭔지 모름.
HTML5 는 시맨틱 (Semantic, 의미적) 태그를 도입:
- ▸
<article>— 독립된 글 - ▸
<nav>— 네비게이션 - ▸
<header>·<footer>— 머리·꼬리말 - ▸
<section>— 의미 단위 구획 - ▸
<main>— 본문 - ▸
<aside>— 부가 정보
이걸 쓰면:
- ▸검색 엔진 SEO 향상 — Google 이 페이지 구조 이해
- ▸접근성 향상 — 스크린 리더가 잘 읽음
- ▸AI 친화 — Claude·GPT 가 페이지 의미 더 잘 파악
가장 기본 구조
- ▸
<!DOCTYPE html>— HTML5 선언 - ▸
<html lang="ko">— 한국어 페이지 (스크린리더·번역에 영향) - ▸
<meta charset="UTF-8">— 한글 깨짐 방지 필수 - ▸
<meta viewport>— 모바일 반응형 필수 - ▸
<title>— 브라우저 탭 + 검색 결과 제목
자주 쓰는 태그 10가지
흔한 첫 실수
1. 시맨틱 무시: <div class="header"> 대신 <header>. SEO·접근성 큰 차이
2. alt 누락: 이미지에 alt="" 없으면 시각장애인 접근 불가 + SEO 손해
3. h1 여러 개: 페이지당 h1 하나만 권장 (메인 제목)
4. 인라인 스타일 도배: <p style="color:red"> 대신 CSS 클래스 사용
한 번 정리
HTML 은 구조와 의미 를 표현합니다. 시맨틱 태그 를 적극 사용하면 SEO·접근성·AI 친화 모두 향상. 1989년 만들어졌지만 지금도 모든 웹의 기반.
🖥️ 직접 해보기 — HTML 기본 구조
🤖 AI 에게 이렇게 요청해보세요
이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.
- ▸"이 HTML/CSS 에 HTML 소개 개념을 적용해 리팩토링해줘"
- ▸"HTML 소개 와 관련한 접근성·SEO 점검해줘"
- ▸"Tailwind 클래스로 같은 결과 만들어줘"
왜 이게 토큰을 줄이나
개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.