시맨틱 태그 (Semantic Tag)란?
오늘은 HTML의 시맨틱 태그에 대해서 알아보겠습니다. 저는 회사에서 일을 하거나 개인 프로젝트를 진행 했을 때 시멘틱 태그를 사용하지 않고 div만을 사용했었습니다. 하지만 이번에 시맨틱 태그를 공부하면서 제가 그동안 했었던 코드를 시맨틱 태그로 리팩토링해볼 예정입니다!
시맨틱 태그는 왜 사용해야할까?
검색 엔진 최적화 (SEO)
시맨틱 태그를 사용하면 검색 엔진이 웹 페이지의 내용과 의도를 더 잘 이해할 수 있습니다. 따라서 검색 결과 페이지에서 더 높은 순위를 얻을 수 있고, 웹 사이트의 방문자 수를 늘릴 수 있습니다.
웹 접근성
시맨틱 태그는 웹 사이트의 구조와 내용을 더 명확하게 전달하므로, 시각적 렌더링이 아닌 스크린 리더, 음성 브라우저 등과 같은 보조 기술을 사용하는 사용자들에게 웹 페이지를 더 잘 이해할 수 있도록 도와줍니다. 이는 장애를 가진 사용자들이 웹 사이트에 더 쉽게 접근하고 사용할 수 있도록 돕는 웹 접근성을 향상시키는 데 도움이 됩니다.
코드 유지 보수 및 가독성
시맨틱 태그를 사용하면 문서의 구조가 더 명확해지므로, 코드의 유지 보수가 용이해집니다. 또한, 시맨틱 태그를 사용하면 코드의 가독성이 향상되어 다른 개발자와의 협업이나 자신이 이후에 코드를 수정해야 할 때 훨씬 더 편리합니다.
모바일 및 반응형 웹 디자인
시맨틱 태그는 웹 페이지가 모바일 기기에서도 잘 동작하도록 돕는 데 도움이 됩니다. 반응형 웹 디자인에서도 시맨틱 태그를 사용하면 레이아웃을 더 쉽게 구성할 수 있습니다.
향후 웹 표준과 호환성
시맨틱 태그는 웹 표준을 준수하는 데 도움이 되며, 새로운 브라우저나 기기에서도 더 좋은 호환성을 제공합니다. 웹 표준을 준수하면 다양한 플랫폼과 환경에서 웹 페이지가 더 잘 작동합니다.
주요 시맨틱 태그를 알아보자!
header
웹 페이지나 섹션의 머리말을 나타내며, 로고, 제목, 네비게이션 등의 요소를 포함합니다.
nav
네비게이션 메뉴를 나타내며, 보통 주 메뉴나 링크 목록을 감싸는 데 사용됩니다.
section
일반적인 섹션을 나타내며, 관련 콘텐츠를 그룹화하는 데 사용됩니다.
main
웹 페이지의 주요 컨텐츠를 나타내는데 사용됩니다. 문서당 하나의 main 요소만 사용해야 합니다.
aside
주 콘텐츠와 관련이 있지만 필수적이지 않은 사이드바 콘텐츠를 나타내는 데 사용됩니다.
article
독릭적인 콘텐츠 블록, 뉴스 기사, 블로그 포스트 등을 나타내는데 사용됩니다.
footer
웹 페이지나 섹션의 바닥글을 나타내며, 저작권 정보, 연락처 등을 포함할 수 있습니다.
figure / figcaption
이미지나 삽화와 그림 설명을 연결하여 나타냅니다. figure는 그림이나 삽화를, figcaption은 설명을 담당합니다.
time
날짜, 시간, 시간대 등을 나타내며, 일반 텍스트로 표현하기 어려운 시간 정보를 의미론적으로 전달합니다.
details / summary
접혀진 정보를 표시하고 감출 때 사용됩니다. details는 접혀질 콘텐츠를, summary는 간단한 요약을 나타냅니다.
mark
하이라이트된 텍스트를 나타냅니다. 검색 결과 등에서 특정 키워드를 강조할 때 유용합니다.
blockquote / p
인용문을 나타냅니다. blockquote는 블록 수준 인용문을, p는 인라인 수준 인용문을 나타냅니다.
address
주소 정보를 나타냅니다.
code
소스 코드를 나타냅니다.
pre
서식이 미리 지정된 텍스트를 나타냅니다.
em / strong
강조 텍스트를 나타냅니다.
Reference
