HTML 시맨틱 태그에 대해서
HTML의 기본 구조와 시멘틱 태그
HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 언어로, 태그(tag)들의 조합으로 이루어져 있습니다. 웹 페이지는 주로 구조적인 부분과 내용적인 부분으로 나뉘는데, 시멘틱 태그는 이러한 구조적인 부분을 명확하게 정의하는 역할을 합니다.
HTML 문서의 기본 구조는 다음과 같습니다.
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 웹 페이지의 내용이 여기에 들어갑니다 -->
</body>
</html>
여기서 <head> 태그는 웹 페이지의 메타데이터를 담고 있고, <body> 태그는 실제 콘텐츠를 담고 있습니다. 이러한 기본 구조를 토대로 시멘틱 태그를 사용하여 웹 페이지의 구조를 더욱 명확하게 정의할 수 있습니다.
시멘틱 태그의 역할과 의미
시멘틱 태그는 웹 페이지의 구조를 명확하게 표현하여 검색 엔진이나 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게 웹 페이지의 내용을 더 잘 이해할 수 있도록 도와줍니다. 각각의 시멘틱 태그는 특정한 역할과 의미를 가지고 있습니다.
<header>: 페이지의 머리말을 정의합니다. 주로 로고, 사이트 제목, 네비게이션 메뉴 등을 포함합니다.<nav>: 네비게이션 메뉴를 정의합니다. 사이트의 주요 메뉴를 담습니다.<main>: 웹 페이지의 주요 콘텐츠를 정의합니다. 하나의 페이지에는 한 번만 사용되어야 합니다.<article>: 독립적인 콘텐츠 영역을 정의합니다. 뉴스 기사, 블로그 글 등의 개별 항목에 사용됩니다.<section>: 문서의 구획이나 장을 정의합니다. 주로 제목을 포함하며, 관련된 콘텐츠를 그룹화합니다.<aside>: 주요 콘텐츠와는 관련이 적은 부가 정보를 담습니다. 사이드바에 광고나 연관 링크를 넣는 데 사용됩니다.<footer>: 페이지의 꼬리말을 정의합니다. 주로 저작권 정보, 연락처 정보 등을 담습니다.
웹 접근성과 SEO(Search Engine Optimization)
시멘틱 태그를 사용하면 웹 페이지의 구조를 명확하게 정의할 수 있으므로, 이는 웹 접근성을 향상시키는 데 큰 역할을 합니다. 시각, 청각, 운동, 인지 등의 다양한 장애를 가진 사용자들도 웹 페이지를 이용할 수 있도록 도와줍니다. 또한, 검색 엔진이 웹 페이지를 크롤링하고 색인하는 데도 도움이 되어 SEO에 긍정적인 영향을 미칩니다.
HTML5와 시멘틱 태그
HTML5에서는 시멘틱 태그들이 추가되어 웹 페이지의 구조를 더욱 명확하게 표현할 수 있습니다. 이를 통해 웹 페이지의 의미를 더욱 잘 전달할 수 있으며, 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.
이렇게 시멘틱 태그를 활용하면 웹 페이지를 보다 명확하게 구조화하고, 사용자에게 더 나은 경험을 제공할 수 있습니다.
오늘도 필자의 부족한 글 읽어 주셔서 감사합니다