Semantics : 의미론, 의미
시맨틱이란 의미론, 의미란 뜻의로 시맨틱 태그(Semantics Tag)는 의미있는 태그라는 말이다.
우리는 흔히 html을 작성할 때 div와 span같은 의미없는 태그를 주로 사용하곤 한다.
하지만 다른 사람이 봤을 때 그 의미를 유추하기가 쉽지 않다. 시맨틱 태그를 이용하면 태그의 명확한 의미를 전달할 수 있다. 시맨틱 태그를 사용하면 좋은점과 대표적인 시맨틱 태그를 알아보자.
시맨틱 태그를 사용하면 좋은점
-
검색 엔진은 시맨틱 태그를 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다. 단지 div와 span으로 점칠되어있는 웹보다 제목은 h1, 중요한 내용은 em, strong 태그로 감싸면 키워드를 검색했을 때 더 상위에 노출될 수 있습니다.
-
시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 시맨틱 태그를 기준으로 사용할 수 있습니다.
-
의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다. div로만 이루어져 내가 원하는 내용을 찾을때보다 시맨틱 태그를 이용하면 훨씬 빠르게 원하는 결과를 얻을 수 있습니다.
-
개발자에게 태그 안에 채워질 데이터 유형을 제안합니다. 명확한 내용을 제시함으로써 데이터를 공유하고 재사용 할 수 있습니다.
시맨틱 태그의 종류
| 태그명 | 설명 |
|---|---|
| article | 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용합니다. |
| header | 웹의 처음 부분에 사용되어 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. |
| main | 주요 콘텐츠 영역은 웹의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다. |
| section | 웹의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. |
| aside | 웹의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. |
| footer | 사이트의 바닥부분으로 제작자, 저작권 정보, 관련 문서 등의 내용을 담습니다. |
| hgroup | 문서의 제목과 부제목들을 나타낼때 사용합니다. |
| nav | 웹 페이지의 메뉴, 네이게이션바를 만들때 사용합니다 |
| mark | 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다. |
| time | 시간의 특정 지점 또는 구간을 나타냅니다. |
| details | "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. |
| em | 강조되는 텍스트에 사용된다. 보통 브라우저에선 이탤릭(Italic)체로 표현된다. |
| strong | 강조되는 텍스트에 사용된다. 보통 브라우저에선 볼드(bold)체로 표현된다 |
참고자료 출처
https://developer.mozilla.org/ko/docs/Glossary/Semantics
https://coding-factory.tistory.com/883
