[HTML] 시맨틱 태그(Semantic Tag)를 사용해야 하는 이유

MOONJUNG·2022년 8월 16일
0

HTML

목록 보기
1/1
post-thumbnail

시멘틱 웹이 생겨난 배경

우리는 우리가 모르는 정보가 있을 때 자연스럽게 인터넷에 모르는 것들을 검색해서 해답을 찾는다. 하지만 방대한 데이터 속에서 필요한 정보를 찾기란 쉽지 않다. 검색엔진은 키워드 중심으로 정보를 탐색하기 때문에 원하는정보를 얻기 위해서는 사용자가 직접 개입해야하는 부분은 불가피하다. 이러한 문제를 해결하기 위해서 나온 웹기술이 바로 시맨틱 웹이다.

시맨틱 웹(Semantic Web)

웹페이지에 메타데이터(metadata)를 부여하여, 해당 웹페이지가 어떤 페이지 인지 시맨틱 태그만으로도 알려줄 수 있다.

시맨틱 태그(Semantic Tag)

HTML5에서 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소를 말한다.
기존의 태그의 형태와 동일하지만 검색엔진 로봇이 웹페이지를 크롤링할 때 이 요소를 보고 키워드 정보를 파악하게 된다.

HTML 요소 크게 2가지로 구분

  1. non-semantic 요소 : div, span 등
    • content에 대해 어떤 설명도 해주지 않는다.
  2. semantic 요소 : input, img 등
    • content의 의미를 명확히 설명해 준다.
    • header, nav, section, article, footer 이러한 태그들은 웹사이트의 구조를 코드를 보면 바로 파악할 수 있다.

시맨틱 웹을 사용하면 좋은 점

  1. 검색엔진 최적화
  2. 코드의 가독성↑
  3. 유지보수 용이

시맨틱 웹 관점에서 img 태그를 쓰는 것이 div 태그에 background-image 속성 추가한 것보다 이런 면에서 좋다
1. img태그가 시맨틱 태그이므로 검색 엔진 최적화
2. 스크린리더가 이미지로 알기 때문에 웹 표준 접근성에 좋다
3. css가 아닌 html에서 이미지로 처리하기 때문에 상대적으로 로딩이 빠르다

profile
뜨거운 열정으로 꿈을 실현하는 프론트엔드 개발자 장문정

0개의 댓글