728x90
HTML 시맨틱 태그: 의미 있는 웹 구조를 위해
안녕하세요, 웹 디자이너 및 개발자 여러분! 오늘은 웹 페이지를 의미 있게 구조화하는데 중요한 역할을 하는 "시맨틱 태그"에 대해 알아보겠습니다.
1. 시맨틱 태그란?
시맨틱 태그는 그 이름처럼 '의미'를 가지는 태그입니다. 전통적인 <div>나 <span>태그는 구조적인 의미를 가지지 않지만, 시맨틱 태그는 웹 페이지의 특정 부분이 어떤 의미를 가지는지를 명확하게 해줍니다.
2. 왜 시맨틱 태그를 사용해야 하는가?
- 검색 엔진 최적화 (SEO): 검색 엔진은 시맨틱 태그를 통해 웹 페이지의 구조와 콘텐츠를 더 잘 이해할 수 있습니다.
- 접근성 향상: 시각 장애인이나 다른 장애를 가진 사용자들은 스크린 리더를 통해 웹 사이트를 탐색합니다. 시맨틱 태그는 이들에게 페이지의 구조를 더 잘 이해할 수 있게 도와줍니다.
- 코드의 가독성: 개발자들이 코드를 더 쉽게 읽고 유지보수할 수 있게 도와줍니다.
3. 주요 시맨틱 태그들
<header>: 웹 페이지나 섹션의 헤더(머릿말) 부분에 사용됩니다. 로고, 타이틀, 네비게이션 등이 포함될 수 있습니다.<nav>: 네비게이션 링크를 포함하는 섹션에 사용됩니다.<main>: 웹 페이지의 주요 콘텐츠를 나타냅니다. 한 페이지에 하나만 존재해야 합니다.<article>: 독립적으로 구분되거나 재사용 가능한 영역을 나타냅니다. 예: 블로그 포스트, 뉴스 스토리 등.<section>: 웹 페이지의 독립적인 섹션을 나타냅니다. 제목이 함께 사용되는 경우가 많습니다.<aside>: 페이지의 주요 콘텐츠와 간접적으로 관련된 부분을 나타냅니다. 예: 사이드바, 광고, 푸터 내의 정보 등.<footer>: 웹 페이지나 섹션의 바닥글에 사용됩니다. 저작권 정보, 관련 문서 링크 등이 포함될 수 있습니다.
4. 사용 예시
<!DOCTYPE html>
<html>
<head>
<title>시맨틱 태그 예제</title>
</head>
<body>
<header>
<h1>나의 블로그</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">블로그</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>블로그 포스트 제목</h2>
<p>블로그 내용...</p>
</article>
<aside>
<h3>관련 포스트</h3>
<!-- 관련 포스트 리스트 -->
</aside>
</main>
<footer>
<p>Copyright 2023. 나의 블로그.</p>
</footer>
</body>
</html>나의 블로그
블로그 포스트 제목
블로그 내용...
마치며
시맨틱 태그는 웹 페이지의 의미와 구조를 향상시키는 중요한 도구입니다. 앞으로 웹 페이지를 제작할 때, 이 태그들을 적극적으로 활용하여 의미 있는 페이지를 만들어보세요! 다음 포스팅에서는 시맨틱 웹의 더 깊은 세계를 함께 탐험해보겠습니다. 🌐
