TIL 16. HTML - Semantic Web, Semantic Tags

문승준·2021년 8월 31일
0

HTML & CSS

목록 보기
3/5
post-thumbnail

시맨틱 웹


시맨틱 웹의 개념

  • 컴퓨터가 정보 자원의 '의미'와 '연관성'을 이해하고 논리적 추론까지 하는 차세대 지능형 웹이다.

  • 웹페이지들에 메타데이터를 부여하여 웹을 거대한 데이터베이스로 구축하고자 하는 발상이다.

  • 팀 버너스리가 주창한 웹의 장기적 목표 (W3C)
  1. 보편적 접근 : 누구든지 웹에 접근
  2. 시맨틱 웹 : 자원을 최대한 잘 활용
  3. 신뢰의 웹 : 법적, 상업적, 사회적 이슈를 고려

→ 의미적 연결을 통해 효율적이고 최적화된 정보를 제공하고자 한다.

→ 인간뿐 아니라 컴퓨터도 잘 이해할 수 있는 웹을 만드는 것이 목표이다.

시맨틱 웹의 필요성

  • 다양하고 많은 정보자원 속에서 검색의 정확도를 높일 수 있다.

    → 검색엔진은 웹사이트 HTML 코드의 시맨틱 요소를 해석한다.
    → SEO (Search Engine Optimization)

  • 코드의 가독성을 높이고 유지보수를 쉽게한다.

    → 개발자가 의도한 요소의 의미를 명확히 드러낸다.


시맨틱 태그


시맨틱 태그와 HTML

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

    → 컴퓨터는 HTML 요소의 의미를 해석하고 그것을 활용하여 시맨틱 웹이 실현 될 수 있다.

  • Non-semantic 요소 : div , span

  • Semantic 요소 : form, table, img

HTML5의 시맨틱 요소

  • header : 도입부에 해당하는 콘텐츠 (한 문서에 여러 개 존재 가능)

  • nav : 문서 사이를 탐색할 수 있는 링크의 집합

  • main : 문서의 주요 콘텐츠

  • section : 제목이 있으며 문서의 전체적인 내용과 관련

  • article : 독립적인 부분 (section안에 포함되어 주내용이 들어간다)

  • aside : 페이지 부분 이외의 콘텐츠 (사이드에 위치)

  • figurefigcaption : 사진이나 비디오 등 독립적인 콘텐츠 정의, 그것의 캡션

  • footer : 사이트 작성자나 저작권 정보, 연락처 등 (한 문서에 여러 개 존재 가능)

  • bdi, mark, details, summary, dialog, menuitem 등등

<img> vs background-image

웹페이지에 이미지를 넣는 두가지 방법의 차이점은 무엇일까?

  • <img> HTML 태그를 사용하면?

    → 시맨틱하다. 검색엔진에게 콘텐츠 의미를 명확히 전달한다.

    alt 속성으로 error 상황에 대처하거나 시각장애인의 접근성을 높일 수 있다.

    → 인쇄가 가능하다.

    → 이미지 자체가 주요 콘텐츠일때 사용한다.

  • background-image CSS 프로퍼티를 사용하면?

    → 시맨틱하지 않다. 의미가 없고 콘텐츠를 꾸며주는 보완적 역할을 할 뿐이다.

    → 다양한 프로퍼티를 활용해 이미지를 손쉽게 변경 및 관리가 가능하다.

    → 인쇄가 불가능하다.

    → 이미지가 단순히 디자인적 요소(ex:배경) 일때 사용한다.

참조목록
https://chlolisher.tistory.com/77
https://poiemaweb.com/css3-background
https://pawelgrzybek.com/image-tag-vs-background-property/

profile
개발자가 될 팔자

0개의 댓글