시맨틱 태그란? (Semantic Tag)
웹 문서의 구조를 설명하고 의미를 부여하기 위해 사용되는 HTML 태그
✨태그의 이름만 보고도 역할이나 위치를 알기 쉽다
일반적인 시맨틱 태그로는 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> 등이 있다.
각각 문서의 헤더, 내비게이션, 본문, 기사, 섹션, 사이드바, 푸터 등을 나타내며, 이를 통해 문서의 구조를 명시적으로 표현할 수 있다.
태그종류🤔
-
<header>(헤더):- 웹 페이지나 섹션의 머리말을 정의하는 시맨틱 태그
- 로고, 제목, 내비게이션 등의 요소를 포함할 수 있으며, 문서의 상단에 위치
* 제목 요소(h1~h6) 포함 / 일반적으로h1 - 로고
-
<nav>(내비게이션):- 웹 페이지의 주요 내비게이션 링크를 그룹화하는 시맨틱 태그
- 사이트의 주요 메뉴나 링크 집합을 감싸고, 사용자에게 사이트 내에서 이동할 수 있는 경로를 제공
-
<main>(본문):- 웹 페이지의 주요 콘텐츠를 감싸는 시맨틱 태그
- 페이지의 핵심 내용이 위치하는 곳으로, 헤더와 푸터 사이의 주요 컨텐츠를 정의
* 문서 내에서 반드시 한 번만 사용
-
<article>(기사):- 독립적으로 구성되거나 재사용 가능한 콘텐츠 블록을 정의하는 시맨틱 태그
- 뉴스 기사, 블로그 글, 포럼 글 등과 같이 독립된 내용의 섹션을 표현
* 제목 요소(h1~h6) 포함
-
<section>(섹션):- 문서의 특정 섹션을 나타내는 시맨틱 태그
- 주로 특정 테마나 주제를 가진 콘텐츠를 그룹화하여 나타냄
* 제목 요소(h1~h6) 포함
-
<aside>(사이드바):- 본문과는 독립적으로 표시되는 부가 정보를 담는 시맨틱 태그
- 주로 광고, 사이드바, 관련 링크 등을 담을 때 사용
-
<footer>(푸터):- 웹 페이지나 섹션의 꼬리말을 정의하는 시맨틱 태그
- 보통 저작권 정보, 연락처, 사이트 링크 등이 위치하며, 문서의 하단에 위치
장점👍
-
의미 전달 강화: 문서의 구조를 명확하게 정의하여 의미를 뚜렷하게 전달함
-
검색 엔진 최적화 (SEO): 검색 엔진이 문서를 더 잘 이해하고 인덱싱할 수 있어 검색 엔진 최적화에 도움이 됨
-
웹 접근성 향상: 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 더 나은 웹 접근성을 제공
-
코드 가독성 및 유지보수 용이성: 코드의 가독성이 향상되고, 웹 페이지의 구조를 이해하기 쉬워져 유지보수가 용이
-
디자인 일관성: 일관된 시맨틱 태그 사용으로 웹 페이지의 디자인과 레이아웃을 일관되게 유지 가능
단점👎
-
브라우저 호환성: 일부 구형 브라우저는 시맨틱 태그를 완전히 지원하지 않을 수 있고, 이는 호환성 문제를 일으킬 수 있음
-
학습 곡선: 초보자들이 시맨틱 태그를 올바르게 사용하는 데에는 학습 곡선이 따를 수 있음, 일부 개발자들은 아직까지 기존의 비시맨틱 태그를 선호할 수 있음
-
추가 코드 길이: 비시맨틱 태그에 비해 시맨틱 태그는 더 많은 코드를 필요로 할 수 있음, 이는 파일 크기를 증가시키고 다운로드 시간을 늘릴 수 있음
-
모든 상황에 부합하지 않음: 모든 웹 페이지에 시맨틱 태그가 적합하지 않을 수 있음, 특정한 경우에는 간단한 비시맨틱 마크업이 더 효과적일 수 있음
