의미론적 문법이 없는 시기에 웹은 div의 천국이었다.
문서를 보기만 해도 의미를 짐작할 수 있는 것이 시맨틱이다. 데이터가 방대해지고 불필요한 정보가 많아지자 컴퓨터가 이해할 수 있는 메타데이터의 중요성이 커졌다. 해결을 위해 시맨틱 웹이 등장했고 의미기반 검색을 통한 데이터 추출·가공을 용이하게 만들었다.
HTML elements reference MDN 문서를 참고하면 다양한 semantic 태그들에 대해 확인할 수 있다.
구글 같은 크롤러 프로그램에게 유효하다. 보통 네비게이션과 링크를 먼저 찾고 그것들을 수집한 후 그 페이지를 방문하고 그 과정을 계속 반복하는 전략을 쓴다. 마크업에서 의미 있는 태그를 사용하면 크롤러가 코드를 더 쉽게 알아보고 다른 어플리케이션 또는 코드와 더 잘 융합된다.
스크린 리더를 쓰는 사람들에게 접근성이 좋아진다. 만약 네비게이션을 찾아 빨리 메뉴 이동을 하고 싶으면 <nav>
를 찾으면 되지만 div로만 이루어진 웹은 하나하나 다 읽어봐야한다.
작성자를 포함해서 다른 사람들이 마크업 문서를 보기만 해도 무슨 의미인지 짐작이 간다. 따라서 유지보수가 쉬워진다.
<img>
와 background-image<img>
참고자료
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