요소의 의미를 명확히 전달하는 시맨틱 태그(Semantic Tags)의 활용법을 정리했다.
이는 웹사이트의 각 부분에 명확한 정의를 부여하는 과정이다.
구조적 마크업 구현
시맨틱 태그를 활용하면 문서 구조를 명확히 파악할 수 있다.
<body>
<!-- 헤더: 사이트 상단 영역 -->
<header>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">블로그</a></li>
</ul>
</nav>
</header>
<!-- 메인: 페이지 핵심 콘텐츠 영역 -->
<main>
<article>
<h2>시맨틱 태그란 무엇인가?</h2>
<p>태그 자체가 의미를 가지는 HTML 요소를 말한다.</p>
</article>
<section>
<h3>사용 이유</h3>
<p>SEO(검색 엔진 최적화)와 웹 접근성 향상에 기여한다.</p>
</section>
</main>
<!-- 푸터: 하단 정보 영역 -->
<footer>
<p>© 2026 Tech Blog. All rights reserved.</p>
</footer>
</body>
시맨틱 태그의 이점
- SEO(검색 엔진 최적화): 검색 엔진이 사이트 콘텐츠를 정확히 파악하여 검색 결과 노출 확률을 높인다.
- 웹 접근성(Accessibility): 스크린 리더가 페이지 구조를 해석하여 정보를 정확히 전달하도록 지원한다.
- 협업 효율성: 코드만으로 문서 구조를 직관적으로 이해할 수 있어 개발 효율이 향상된다.
마크업의 본질
코딩은 화면 구현을 넘어 의미를 정확히 전달하는 과정이다.
무분별한 div 사용을 지양하고 태그 고유의 역할을 고려하여 마크업을 작성해야 한다.
이러한 습관이 웹의 품질을 결정하는 것 같다.
