컴퓨터가 정보 자원의 '의미'와 '연관성'을 이해하고 논리적 추론까지 하는 차세대 지능형 웹이다.
웹페이지들에 메타데이터를 부여하여 웹을 거대한 데이터베이스로 구축하고자 하는 발상이다.
- 팀 버너스리가 주창한 웹의 장기적 목표 (W3C)
- 보편적 접근 : 누구든지 웹에 접근
- 시맨틱 웹 : 자원을 최대한 잘 활용
- 신뢰의 웹 : 법적, 상업적, 사회적 이슈를 고려
→ 의미적 연결을 통해 효율적이고 최적화된 정보를 제공하고자 한다.
→ 인간뿐 아니라 컴퓨터도 잘 이해할 수 있는 웹을 만드는 것이 목표이다.
다양하고 많은 정보자원 속에서 검색의 정확도를 높일 수 있다.
→ 검색엔진은 웹사이트 HTML 코드의 시맨틱 요소를 해석한다.
→ SEO (Search Engine Optimization)
코드의 가독성을 높이고 유지보수를 쉽게한다.
→ 개발자가 의도한 요소의 의미를 명확히 드러낸다.
HTML의 시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명한다.
→ 컴퓨터는 HTML 요소의 의미를 해석하고 그것을 활용하여 시맨틱 웹이 실현 될 수 있다.
Non-semantic 요소 : div
, span
등
Semantic 요소 : form
, table
, img
등
header
: 도입부에 해당하는 콘텐츠 (한 문서에 여러 개 존재 가능)
nav
: 문서 사이를 탐색할 수 있는 링크의 집합
main
: 문서의 주요 콘텐츠
section
: 제목이 있으며 문서의 전체적인 내용과 관련
article
: 독립적인 부분 (section안에 포함되어 주내용이 들어간다)
aside
: 페이지 부분 이외의 콘텐츠 (사이드에 위치)
figure
와 figcaption
: 사진이나 비디오 등 독립적인 콘텐츠 정의, 그것의 캡션
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/