Semantic Markup 사용 가이드 5단계

HTML5 Semantic Markup 사용 가이드 목차

이 가이드는 HTML5 시맨틱 마크업의 중요성을 이해하고, 올바른 태그 사용법을 익혀 웹사이트의 접근성(Accessibility)과 SEO(검색 엔진 최적화)를 향상시키는 5단계 과정을 안내합니다.

• 페이지 1: 웹 문서의 기본 윤곽선(<header>, <footer>) 설정하기
• 페이지 2: 콘텐츠의 종류(<main>, <article>, <section>)에 따른 태그 구분
• 페이지 3: 구조적 요소(<nav>, <aside>)를 활용한 탐색 및 보조 정보 제공
• 페이지 4: 텍스트에 의미 부여(<strong>, <em>) 및 미디어 포함(<figure>)
• 페이지 5: 비시맨틱 태그(<div>, <span>)의 적절한 사용과 ARIA 연동