[HTML] Semantic Web, Semantic Tags

sourmix·2022년 4월 27일
0

wecode

목록 보기
1/3
post-thumbnail

🍕Semantics

🍷시맨틱 웹의 등장

의미론적 문법이 없는 시기에 웹은 div의 천국이었다.

문서를 보기만 해도 의미를 짐작할 수 있는 것이 시맨틱이다. 데이터가 방대해지고 불필요한 정보가 많아지자 컴퓨터가 이해할 수 있는 메타데이터의 중요성이 커졌다. 해결을 위해 시맨틱 웹이 등장했고 의미기반 검색을 통한 데이터 추출·가공을 용이하게 만들었다.

HTML elements reference MDN 문서를 참고하면 다양한 semantic 태그들에 대해 확인할 수 있다.

🍴시맨틱 태그의 이점

구글 같은 크롤러 프로그램에게 유효하다. 보통 네비게이션과 링크를 먼저 찾고 그것들을 수집한 후 그 페이지를 방문하고 그 과정을 계속 반복하는 전략을 쓴다. 마크업에서 의미 있는 태그를 사용하면 크롤러가 코드를 더 쉽게 알아보고 다른 어플리케이션 또는 코드와 더 잘 융합된다.

스크린 리더를 쓰는 사람들에게 접근성이 좋아진다. 만약 네비게이션을 찾아 빨리 메뉴 이동을 하고 싶으면 <nav>를 찾으면 되지만 div로만 이루어진 웹은 하나하나 다 읽어봐야한다.

작성자를 포함해서 다른 사람들이 마크업 문서를 보기만 해도 무슨 의미인지 짐작이 간다. 따라서 유지보수가 쉬워진다.

🍑<img>와 background-image

<img>

  • 태그에서 image라는 의미를 내포하고 있기 때문에 alt 속성을 이용해 크롤러가 무엇에 관련된 이미지인지 좀 더 정확하게 찾을 수 있다. 이미지 자체가 문서에서 떨어뜨릴 수 없는 의미를 가질 때 사용한다.
  • alt는 메타데이터가 되어 검색 엔진에 노출된다. 웹페이지를 노출시키고 싶을 때 사용한다.

background-image

  • HTML 문서 내에서는 아무 의미도 가지지 않기 때문에 CSS로 글씨의 배경을 깔거나 하는 단순 디자인 용도로 사용한다.
  • 프린트할 때 배경 제거가 가능해 잉크 낭비를 막을 수 있다.

참고자료

https://www.udemy.com/course/the-web-developer-bootcamp-2021-korea/
https://nomadcoders.co/kokoa-clone/lectures/1762
https://velog.io/@wdelight_c/Semantic-Web-Semantic-Tags

0개의 댓글