HTML - 구조를 나타내는 요소

Semantic Web

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 방식입니다.

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

• semantic 요소
  header, footer, section 등이 있으며 이들 태그는 content의 의미를 명확히 설명합니다.
  

• <header> : 소개 및 탐색에 도움을 주는 내용 ( 제목, 로고, 검색폼, 작성자이름 등)

• <footer> : 가장 가까운 구획 컨텐츠나 구획 루트의 푸터를 나타낸다. 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용

• <nav> : 탐색 구획 요소, 네비게이션을 의미

• <aside> : 별도 구획 요소, 문서의 주요내용과 간접적으로 연관된 부분 (ex 사이드바)

• <article> : 문서,페이지, 에플레케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획 ex) 게시판과 블로그 글, 매거진이나 뉴스 기사

• <section> : 일반 구획 , HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용

• <main> : body의 주요 콘텐츠를 나타냄

<div>

• 플로우 컨텐츠를 위한 통용 컨테이너 (block)
• "순수" 컨테이너로서 아무것도 표현하지 않음

<span>

• 구문 콘텐츠를 위한 인라인 컨테이너