HTML - Semantic Web와 Semantic Tags
시맨틱 웹(Semantic Web )
- 의미를 가지는 웹
- 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, “의미”와 “관련성”을 가지는 거대한 데이터베이스로 구축하고자하는 발상
시맨틱 태그 (Semantic Tags)
- 의미를 가지는 태그
- 문서의 구조와 의미를 브라우저와 개발자 모두에게 명확하게 설명하는 것
- 이를 통해 HTML 요소의 의미를 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현 가능
👉🏻 기존의 non-semantic 요소 :
<div>,<span>등- 컨텐츠에 대해 어떠한 설명도 하지 않는다.
👉🏻 semantic 요소 :
<form>,<table>,<article>,<header>등- 컨텐츠를 명확하게 설명한다.
👉🏻 HTML5에서 새롭게 추가된 시맨틱 태그
<header> :헤더를 의미
<nav> : 네비게이션을 의미
<aside> : 사이드에 위치하는 공간을 의미
<section> : 본문의 여러 내용 (article)을 포함하는 공간을 의미
<article> : 본문의 주 내용이 들어가는 공간을 의미
<footer> : 문서 또는 섹션의 바닥글을 지정
✨ 사이트에 이미지 넣는 방법
사이트에 이미지를 넣는 방법은 두가지가 있다. 하나는 <img>태그를 사용하는 것과 또 한가지는 <div> 태그에 background-image 속성을 추가하는 것이다.
두 가지 방법은 웹 브라우저에 나타나는 모습은 동일하다.
다만, <div> 태그에 background-image 속성의 이미지는 검색 엔진에서 크롤링을 하거나 색인을 생성하지 않는다. 단순히 시각화한 페이지에 불과하다.
<img>는 이미지가 검색엔진에서 노출되며, 이미지가 정상적으로 작동하지 않을 경우 <alt>를 통하여 이미지 설명을 첨부할 수 있다.
=> 단순히 ‘장식’으로 사용할 때는 background-image를, 의미있는 글과 함께 이미지가 검색엔진에서 노출되길 원한다면 <img>태그를 사용하는 것이 좋다.