HTML, CSS | Semantic Tags

xoxobabegirl·2021년 2월 16일
0
post-thumbnail

Semantic

시맨틱(semantic) 태그로 들어가기 전에 시맨틱의 뜻부터 알고 가자. 사전적 의미론 "의미의, 의미론적인"이다. 뜻에서 보듯 의미에 초점이 맞춰져 있다고 볼 수 있다.

Semantic Tag

시맨틱 태그는 개발자, 브라우저에게 정확한 의미를 전달하는 태그이다.

시맨틱 태그가 아닌 div와 span 태그는 태그 자체만으로는 어떤 내용이 들어가는 지 알 수 없다. 하지만 img, table 등 시맨틱 태그는 해당 태그 내용이 어떤 내용이며 어떤 값을 가질지 알 수 있다.

img 태그를 사용하는게 div 태그에 css background-img 속성을 추가하는 것보다 의미를 바로 파악할 수 있다.

div 태그에 css를 사용하여 이미지를 추가할 경우는 이미지가 내용과 관련이 없어 굳이 언급하지 않아도 되거나 이미지의 부분만 사용하고 싶을 경우다. 이 외에도 여러가지 경우가 있을 수 있다.

SEO적 (검색엔진 최적화) 관점에서도 시맨틱 태그가 중요하다. 검색엔진은 HTML 태그를 기반으로 웹사이트를 이해하기 때문에 div, span 태그보다 구조적인 h1, img 태그를 사용하면 검색 엔진 페이지 (SERP) 상위에 랭크할 가능성도 높아진다.

profile
Frontend Developer 👩🏻‍💻👩‍💻

0개의 댓글