[HTML] Semantic Web과 Semantic Tag

검색엔진은 로봇(robot)이라는 프로그램을 이용하여 인터넷상의 모든 웹사이트 정보를 크롤링한다. 이 과정에서 HTML 코드를 이용해 의미를 인지하고 검색 시에 키워드에 해당하는 인덱스를 제공한다. HTML은 컴퓨터가 인지가능한 메타데이터와 사람이 이해가능한 문장이 섞여있어 시맨틱 요소(Semantic element)를 해석한다.

Semantic Web은 ‘의미론적인 웹’이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미

non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

Semantic tag는
시맨틱 웹에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag

semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.

Semantic tag 종류

<header>	페이지 상단이나 섹션의 머리말
<nav>	문서의 네비게이션, 메뉴 항목을 정의
<section>	문서의 구획들을 정의
<article>	본문
<aside>	글의 주제와 간접적으로만 연관된 부분을 나타냄
<details>	추가적인 정보를 사용자가 숨기거나 보일 수 있게함
<summary>	부모요소인 details 요소의 내용에 대한 요약이나 캡션등을 나타냄
<figure>	사진, 다이어그램 등과 같은 부가적인 요소를 정의
<main>	문서의 주가 되는 컨텐츠 정의
<mark>	하이라이트 또는 참조와 같은 표시를 필요로 하는 문자를 정의
<time>	날짜, 시간을 정의
<img>	이미지
<video>	비디오(영상)
<audio>	사운드(소리)

Question !

Q. "사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 
<img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

div 태그 이용하는 경우 (이미지가 깨져도 화면상에 표시 X)

• 페이지 프린트시 이미지가 나오지 않게 할 때
• 배경을 채우는 용도로 사용할 때
• 단순히 디자인(꾸미는)을 위한 용도일때

img 태그 이용하는 경우

• 의미가 내포된 이미지일 때
• 이미지가 보이지 않으면 alt로 그 정보를 대신할 수 있다.