[HTML] 시맨틱 태그(Semantic tag)

HTML & CSS

emmaOH! 2024. 5. 21. 15:32

🌱 정의

시맨틱(semantic): 의미의, 의미론적인

시맨틱 태그는 해당 태그로 감싸진 코드의 '의미'를 나타냅니다.
해당 코드가 어떻게 시각적으로 보여질까? 가 아닌, 해당 코드의 목적이나 역할을 알려줍니다.

- MDN Web Docs

시맨틱 태그는 <div> 태그와 기능은 동일합니다.

그러나 id나 class 속성이 없는 <div> 태그로 감싸진 코드는 어떤 역할을 하는지 알 수 없는 반면,

시맨틱 태그로 감싸진 코드는 웹 페이지에서 어떤 목적을 가지고 쓰였는지 알 수 있습니다.

즉, 태그에 의미를 부여함으로써 웹 사이트의 구조를 쉽게 파악할 수 있게 도와주며

시맨틱 태그를 사용하기 전보다 더 명시적이고 직관적인 구조로 설계할 수 있게 되었습니다.

태그 이름	용도
<header>	사이트의 위쪽에서 로고나 사이트 제목, 메뉴 등을 담고 있는 도입부
<nav>	현재 페이지 내부 또는 다른 외부 페이지로 이동할 수 있는 링크를 담고 있는 영역
<aside>	페이지의 주요 콘텐츠를 제외한 콘텐츠를 정의, 주로 사이드바로 이용되는 영역
<main>	<body> 태그 안에서 주요 콘텐츠를 담고 있는 영역, 페이지 내에서 한 번만 사용 가능
<article>	사이트 안에서 독립적으로 구분하여 배포하거나 재사용할 수 있는 구획
<section>	콘텐츠의 일부분을 나타내는 영역으로, 일반적으로 기본 콘텐츠 내에서 주제별 콘텐츠 그룹을 정의
<figure>	이미지와 그에 대한 설명을 담고 있는 독립적인 콘텐츠 영역
<footer>	가까운 구획의 아래쪽에서 연락처와 저작권 등의 정보를 담고 있는 영역, 페이지 내에서 여러 번 사용 가능

시맨틱 태그는 단순히 의미를 가진 태그로 엄격한 사용법이 존재하는 것은 아닙니다.

따라서 작성하는 사람의 의도에 맞게 적절히 사용하면 됩니다.

검색 엔진 최적화(SEO)!
- 검색 엔진 상에서 보여지는 웹 사이트 순위에 영향을 미칩니다.
- 자세한 메타 데이터와 시맨틱 태그를 사용하면 해당 웹 페이지가 검색 엔진 및 사용자의 눈에 잘 띄게 만들 수 있습니다.
접근성 향상!
- 사용자에게 장벽이 없는 인터넷 환경을 만들기 위한 웹 접근성(A11y)을 높이는 데 기여합니다. (ex. 시각 장애인의 스크린 리더기)
가독성 향상!
- 의미있는 코드 블록을 찾는 데 드는 노력과 시간을 줄여 개발자의 생산성을 향상시킵니다. (다수의 div 블럭 탐색 과정 불필요)
- 콘텐츠의 명확하고 일관된 구조를 만드는 데 도움을 줍니다.

읽어주셔서 감사합니다:)