AI와 함께 배우는 HTML 첫걸음 02 | 문서 구조와 메타데이터 완벽 정복 (title · meta · SEO)

안녕하세요, 리베하얀입니다.

HTML을 다룰 때 태그(Tag)와 요소(Element)의 차이를 정확히 알고 계신가요? 그리고 왜 모던 프론트엔드 환경에서는 빈 태그 끝에 슬래시(/)를 닫는 습관을 들여야 할까요?

이번 2편에서는 본격적으로 HTML의 3대 뼈대 구조(html, head, body)를 살펴보고, 브라우저 탭 제목과 검색 노출을 결정짓는 핵심 영역인 문서 메타데이터(Metadata)를 집중적으로 다룹니다.

검색 최적화(SEO)를 위한 title의 올바른 표기 순서부터 구글 검색 설명문([meta name="description"]), 카카오톡 링크 카드(Open Graph), 그리고 실무에서 style과 base 태그 사용을 피해야 하는 이유까지 현업 기준으로 명쾌하게 풀어드립니다.


👉 구독자 단톡방 https://open.kakao.com/o/gOT0rthe


📌 타임라인 (Timeline)
00:00 HTML 기본 구조 & 문법 개요 (태그 vs 요소, 셀프 클로징)
07:44 문서 메타데이터 (Document Metadata) 개요
09:07 title : 브라우저 탭 제목과 올바른 표기 순서 (feat. AI 자동화)
14:15 meta : 검색엔진 최적화(SEO) 및 설명문(description) 관리
19:19 Open Graph : 카카오톡·SNS 공유 시 썸네일 카드 띄우기
22:11 base : 배포 시 절대/상대 경로 이슈와 사용 시 주의점
24:43 style : 실무에서 HTML 문서 내 style 태그를 피하는 이유
26:55 link : CSS 연결, 파비콘(Favicon), 웹 폰트 프리로드(Preload)


💻 실습 안내 & 다운로드 링크

수업 자료 다운로드 코드 (터미널 입력):
npx degit rebehayan/HTMLCSS .

Node.js 공식 다운로드 (LTS 권장): https://nodejs.org/ko/download

MDN Web Docs HTML 요소 참고서: https://developer.mozilla.org/ko/docs/Web/HTML/Element