TIL027 Semantic Web과 Semantic Tag

1. 정의와 필요성

1) 정의

Semantic: 의미의, 의미론적인
Semantic 요소: 의미있는, 의미론적인 요소

2) Semantic 요소의 필요성

• 정보의 홍수와도 같은 현대 사회에서 웹사이트는 검색엔진에의 노출이 매우 중요하다!
• 검색엔진은 로봇이라는 프로그램을 이용하여 매일 전세계의 웹사이트 정보를 수집하고, 검색사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만들어준다.
• 이 인텍스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데, 이것이 결국 웹사이트의 HTML코드이다!
• 즉, 검색엔진은 HTML코드만으로 그 의미를 인지해야하는데, 이때 시멘틱 요소를 해석하게 된다.

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

• 위 두 코드는 같은 결과물을 내보이지만, 1행의 요소는 아무런 의미도 가지고 있지 않다.
• 그러나 2행의 요소는 제목(header) 중 가장 상위 레벨이라는 의미를 내포하고 있어 개발자가 의도한 요소의 의미가 명확히 드러난다.
• 이는 결국 코드의 가독성을 높이고 유지보수를 쉽게 한다.
• 또한 검색엔진은 <h1>요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 가능성이 높다.
• 즉, semantic tag란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 일을 한다.

2. Semantic tag

1) HTML 요소의 두가지 타입

2) Semantic tag

• HTML5에서 새롭게 추가된 시맨틱 태그는 아래와 같다.
  
• 위와 같은 semantic tag에 의해 컴퓨터가 HTML요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 semantic web이 실현될 수 있다!

<article> Element

• <article> 요소는 독립적인 자체적으로 만족되는 내용을 지정한다.
• 글/기사(article)는 그자체로 의미를 가질 수 있어야 하며, 웹 사이트의 나머지 부분과는 독립적으로 배포 할 수 있어야한다.

<nav> Element

• 탐색 링크(navigation links)의 집합을 정의한다.

<aside> Element

• 주요 내용을 제외한 내용의 정의하며 사이드 바 등에 배치된다.
• aside 컨텐츠는 주변 컨텐츠와 관련되어 있어야 한다.

<header> Element

• 문서 또는 섹션 헤더를 지정합니다.
• <header> 요소는 소개 내용에 대한 컨테이너로 사용되어야 한다.

<footer> Element

• 문서나 구역의 바닥 글을 지정합니다.
• <footer> 요소는 포함하는 요소에 대한 정보를 포함해야합니다.
• 바닥글(footer)은 일반적으로 등 문서의 작성자, 저작권 정보, 이용 약관에 대한 링크, 연락처 정보를 포함한다.