**HTML(HyperText Markup Language)**은 꺾쇠괄호(< >) 형태의 **태그(Tag)**를 사용하여 웹 문서의 구조를 서술하는 마크업 언어입니다.
1. HTML5 표준 문서 뼈대
<!DOCTYPE html> <!-- HTML5 문서 선언 -->
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>첫 번째 웹 페이지</title>
</head>
<body>
<h1>안녕하세요! HTML5의 세계에 오신 것을 환영합니다.</h1>
<p>이곳은 본문 내용을 작성하는 구역입니다.</p>
</body>
</html>
<!DOCTYPE html>: 이 문서가 표준 HTML5 형식임을 브라우저에 알리는 선언.<head>: 문서의 제목, 인코딩 설정(UTF-8), 외부 스타일시트 연결 등 문서의 메타데이터 정보가 위치.<body>: 사용자의 눈에 실제로 보이는 모든 웹 콘텐츠가 담기는 구역.
2. 시맨틱 태그 (Semantic Tag)의 종류와 목적
시맨틱(Semantic)이란 **"의미가 있는"**이라는 뜻으로, 단순 <div> 대신 영역의 역할이 명확한 전용 태그를 사용하는 것을 말합니다.
<header>: 웹사이트 상단 영역 (로고, 서브메뉴 등).<nav>: 주요 내비게이션 메뉴 항목 링크 모음.<main>: 페이지의 가장 핵심적인 주요 본문 콘텐츠.<section>: 문서 내의 독립적인 문단/주제별 구역.<article>: 블로그 포스트, 뉴스 기사처럼 그 자체로 독립적인 글.<aside>: 사이드바, 광고, 관련 링크 구역.<footer>: 웹사이트 최하단 영역 (저작권, 사업자 정보, 연락처).
3. 시맨틱 태그 사용 시의 이점
- 검색엔진 최적화 (SEO): 구글이나 네이버 크롤러 로봇이 사이트의 핵심 내용을 더 정확히 파악하여 검색 상위에 반영합니다.
- 웹 접근성 (Accessibility): 시각 장애인용 스크린 리더 프로그램이 웹사이트 구조를 효율적으로 읽어줍니다.
- 코드 가독성 및 유지보수: 수많은
<div>대신 태그 이름만 봐도 해당 구역의 기능을 직관적으로 알 수 있습니다.
4. 자주 묻는 질문 (Q&A)
Q. <section>과 <article>은 어떻게 구분하여 사용해야 하나요?
A. <article>은 해당 부분만 떼어내어 다른 사이트(RSS, 소셜 미디어)에 공유해도 그 자체로 완벽한 포스트가 되는 독립 콘텐츠에 쓰며, <section>은 페이지 안에서 주제별로 구역을 나눌 때 사용합니다.