Semantic Web / Semantic Tag

jihyun·2021년 8월 19일
0

TIL

목록 보기
9/17
post-thumbnail

img 태그 vs background image

이미지 넣는 두가지 방법을 공부하기 전, 내가 생각하는 차이?
title과 h1 태그 배우면서 구글이 검색할 때 이런 것으로 거른다고 배운적이 있는 것 같다(?)
비슷한 맥락으로 div는 css에서 주로 모양을 만들기 위해 쓰는 '어떤 의미를 가지고 있지는 않은 태그'니까.. 딱 봐도 이미지라고 자기주장하는 img태그가 더 좋은가? 정도 밖에

  1. 맥락
    img 태그: 단순한 디자인 요소가 아닐 때(콘텐츠와 관련)
    background-image: 단순한 디자인 요소일 때

  2. 접근성
    img 태그: 검색에서 index 필요한 경우 + 로딩도 빠르다.
    background 속성은 index화 하지 못한다.

  3. 퍼포먼스
    img 태그는 html에 속해있어 로딩이 빠르다.
    background 속성은 css에 속해있어 이미지 로드가 느리다.

  4. 프린트
    img 태그는 dafult로 인쇄에 포함된다.
    하지만 background-image를 통해 넣은 이미지는 포함되지 않는다.

=> 이미지로 콘텐츠를 더 잘 이해하게 하고 싶다면 img 태그를 사용하자

semantic

위에서 1번, 2번이 결국 semantic을 의미하는 것 같다.

검색엔진의 크롤러가 웹사이트 정보를 수집하고(크롤링),
인덱서가 키워드를예상하여 검색 키워드에 대응하는 인덱스를 만들어 둔다(인덱싱)

인덱싱을 위해 수집하는 정보는 웹사이트의 HTML 코드이다.

HTML 코드만으로 그 의미를 인지하는데 이때 시맨틱 요소(Semantic element)를 해석한다.

예를 들어 단순히 굵게 만든 텍스트와 h1 태그로 작성한 것은 눈으로 보면 같지만, 의미론적으로 다르다.
h1은 가장 상위 제목을 의미하는 태그. -> 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.-> 코드의 가독성을 높이고 유지보수를 쉽게한다.

시맨틱 태그란
브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

시맨틱 웹이란
웹페이지들에 메타데이터(Metadata)를 부여하여, 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

  • semantic 요소
    form, table, img, header, nav, aside, section, article, footer 등이 있으며 content의 의미를 명확히 설명

  • non-semantic 요소
    div, span 등이 있으며 content에 대하여 설명하지 않는다.

1. 검색 - 소비자가 쉽게 찾을 수 있도록
2. 웹 접근성 - 시각장애인도 접할 수 있게
3. 개발자의 입장에서 가독성, 유지보수 - 명확하게 목적 전달

0개의 댓글