Semantic: 의의에 관한, 어의론, 의미론
프로그래밍 언어에서는 "의미론적"이라는 뜻을 가지고 있다.
시맨틱 웹(Semantic Web)
웹페이지에 메타데이터를 부여해서 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하는 것. -https://poiemaweb.com/html5-semantic-web
즉, 컴퓨터가 웹사이트를 단순한 코드의 구성으로 이루어진 것이 아니라 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다.
Non-Semantic 요소인 div (content에 대해 아무런 설명이 없는 태그)를 남발한 코드
header, main, ul, footer 등 Semantic Tag를 사용한 것이 훨씬 더 가독성이 높다는 것을 확인할 수 있다.
코드의 가독성이 높은 것 = 유지보수가 쉬움 = 검색엔진의 효율적인 검색을 도와줌 = 검색 엔진에 쉽게 노출이 됨(SEO)
img vs. div안에 background-image를 넣는 것
1. img태그를 사용 할 경우
타 개발자들이 봐도 아! 얘 이미지구나! 하고 쉽게 알아볼 수 있다.
img=Semantic tag=SEO가 잘 됨.
웹의 주 컨텐츠가 될 때 사용한다.
2. div안에 background-image를 넣을 경우
SEO에 불리해진다.
첨부하는 image가 주 컨텐츠가 아닐 경우에만 사용하는 것이 좋다.
'html, css' 카테고리의 다른 글
| vh / vw 알고 내 반응형 성공시대 시작됐다 (2) | 2021.06.14 |
|---|---|
| 쓸모없는 공백 지우는 법 (0) | 2021.05.25 |