Semantic Web과 Tag

Semantic Web
-직역으로 의미론적인 웹
(컴퓨터가 사람을 대신하여 정보를 읽고 가공하여 새로운 정보를 처리할 수 있게 만드는 프레임워크이자 기술)

Semantic Tag

• 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명
  non-semantic ex) div span - 자신의 컨텐츠에 대해 아무것도 설명해주지않음
  semantic ex) form table> article - 자신의 컨텐츠에 대해 명확히 정의

  시맨틱 태그 사용하여 코드의 가독성을 높임

  전 - <div class="header"> 
  후 - <header> 뜻이 명확한 태그 제공

 <article> 내용 정의
 <aside> 페이지 콘텐츠를 제외한 콘텐츠 정의 (링크,광고,사이드바표시)
 <details> 사용자가 보거나 숨길 수 있는 추가 세부 정보 정의
 <figcapition> <figure>요소에 대한 캡션을 정의
 <footer> 문서 또는 섹션의 바닥글을 지정 주로 저작권 연락처 등 내용삽입 헤더,섹션,아티클등 다른 레이아웃 사용가능
 <header> 문서 섹션의 머릿글을 지정, 사이트 맨위,왼쪽에 사용하며 헤더안에 <form>태그를 이용 검색창을 넣거나<nav>태그
 이용하여 사이트 메뉴를 넣음
 <main> 문서의 주요 내용을 지정
 <mark> 강조표시된 텍스트 정의 형광펜 칠한것처럼 노란색으로 표시
 <nav> 네비게이션 링크 정의, 같은 사이트 내의 링크나 다른사이트로 링크들의 모음이다.
 <section> 헤더 푸터와 함께 문서의 구역을 정의, 섹션안에 섹션을 넣기도 가능하고 아티클을 이용해 내용을 넣는다.
 <time> 날짜/시간을 정의한다.

 <address> 웹페이지 저작가의 이름이나 제작자의 웹페이지 피드백을 위한 이메일,연락처를 넣는 주소
 (우편물 주소는 <p> 사용)


 div를 사용하는것 보다 img를 사용하는것이 코드의 가독성을 높이고 어떤 컨텐츠인지 빠르고 명확한 파악 가능