HTML은 웹 페이지의 구조를 정의하는 마크업 언어로, 웹 개발의 기초를 형성합니다. 이 글에서는 HTML의 기본 구조와 시맨틱 태그에 대해 상세히 살펴보겠습니다.
HTML 기본 구조
HTML 문서는 다음과 같은 표준 구조를 가집니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<!-- 콘텐츠가 여기에 들어갑니다 -->
</body>
</html>
• <!DOCTYPE html>: 문서가 HTML5 표준을 준수함을 선언합니다.
• <html lang="ko">: 문서의 언어를 한국어로 설정합니다.
• <meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 지정하여 한글이 올바르게 표시되도록 합니다.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 장치에서의 뷰포트 설정을 지정하여 반응형 디자인을 지원합니다.
• <title>: 브라우저 탭이나 검색 엔진 결과에 표시될 문서의 제목을 정의합니다.
시맨틱 태그란?
시맨틱 태그(Semantic Tag)는 HTML 요소에 의미를 부여하여 웹 페이지의 구조와 내용을 명확하게 설명하는 태그입니다. 이러한 태그를 사용하면 브라우저, 검색 엔진, 그리고 개발자가 콘텐츠를 더 잘 이해할 수 있습니다. 예를 들어, <header>, <nav>, <main>, <section>, <article>, <footer> 등이 있습니다. 
주요 시맨틱 태그와 그 역할
<header>
문서나 섹션의 머리말을 정의하며, 로고, 제목, 내비게이션 메뉴 등을 포함할 수 있습니다.
<header>
<h1>내 웹 페이지</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<nav>
내비게이션 링크의 집합을 정의하며, 주로 웹 사이트의 메뉴나 목차에 사용됩니다.
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
<main>
문서의 주요 콘텐츠를 나타내며, 이 요소는 문서 내에서 유일해야 합니다.
<main>
<section>
<h2>주요 콘텐츠 섹션</h2>
<p>여기에 주요 콘텐츠가 들어갑니다.</p>
</section>
</main>
<section>
문서의 일반적인 섹션을 정의하며, 주제를 구분할 때 사용됩니다.
<section>
<h2>섹션 제목</h2>
<p>이것은 섹션의 내용입니다.</p>
</section>
<article>
독립적으로 구분하여 배포하거나 재사용할 수 있는 콘텐츠를 나타내며, 블로그 글, 뉴스 기사 등에 사용됩니다.
<article>
<h2>기사 제목</h2>
<p>이것은 독립적인 기사입니다.</p>
</article>
<aside>
메인 콘텐츠와는 직접적인 연관성은 없지만 보조 정보나 사이드바로서 활용됩니다.
<aside>
<h2>관련 정보</h2>
<p>이것은 보조 정보입니다.</p>
</aside>
<footer>
문서나 섹션의 바닥글을 정의하며, 저작권 정보, 연락처 정보 등을 포함합니다.
<footer>
<p>저작권 © 2025 내 웹 페이지</p>
</footer>
시맨틱 태그의 중요성
접근성 향상
시맨틱 태그를 사용하면 스크린 리더와 같은 보조 기술이 콘텐츠를 더 잘 이해하고 해석할 수 있어, 시각 장애를 가진 사용자들도 더 쉽게 웹 페이지를 탐색할 수 있습니다. 
SEO 개선
검색 엔진이 웹 페이지의 구조와 내용을 더 잘 이해할 수 있어, 검색 결과 순위에 긍정적인 영향을 미칩니다. 시맨틱 태그는 콘텐츠의 중요성을 명확히 하여, 검색 엔진이 올바르게 색인화할 수 있도록 합니다. 
코드 가독성 향상
개발자들이 문서의 구조를 더 쉽게 이해하고 유지보수할 수 있습니다. 시맨틱 태그를 사용하면, 코드가 더 직관적이고 읽기 쉬워져 협업과 유지보수가 용이해집니다. 
결론
시맨틱 태그를 사용하면 웹 페이지의 구조와 의미를 명확하게 정의하여, 접근성, SEO, 그리고 코드 가독성을 크게 향상시킬 수 있습니다.
<header>, <nav>, <main>, <section>, <article>, <footer> 를 적절하게 활용해보세요.