Semantic

1. semantic?

semantic의 사전적 의미는 '의미론적인', '의미가 통하는' 이다.

검색 로봇 또는 스크린 리더등의 기계가 쉽게 해석하고 분석 할 수 있도록 만들어진 태그

HTML4에서 <div>와 id 속성을 이용하여 화면을 구성

id의 이름을 정하는 규칙이 없기때문에 문서의 구조를 이애하는데 한계. 웨어러블 장치나 스마트 기기를 이용하여 웹문서를 읽는 데 부적합 구조

해결책으로 HTML5에서는 웹 문서 레이아웃을 표준화하는 semantic tag를 이용

사이트의 제목과 로고, 검색 창 등이 있는 헤더, 여러 내용이 있는 본문, 본문 외 내용을 나타내는 사이드바, 저작권 정보와 제작자 정보를 표시하는 푸터로 이루어져 있다.

브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상

semantic 요소

• header : 헤더 지정
• nav : 문서 간의 네비게이션 지정
• aside : 본문 이외의 내용표시
• section : 본문의 여러 내용을 포함
• article : 본문의 주 내용이 포함
• footer : 제작정보와 저작권 표시등 포함

2. semantic

header - 머릿말 지정

header는 주로 <form> 태그를 사용하여 검색 창을 넣거나 <nav> 태그를 사용하여 사이트의 메뉴를 삽입. 본문에 사용하여 해당 부분의 머리말로도 사용

nav - 문서를 연결하는 navigation link

동일 사이트 내의 문서나 다른 사이트의 문서로 연결하는 링크 모음

<nav>는 단독으로 사용되거나 <header>,<footer>,<aside>내에서 사용

section - 주제별 콘텐츠 영역 표시

<section>은 문맥 흐름 중에서 contents를 주제별로 묶을 때 사용

<section>안에 여러 개의 <article>을 넣어 contents의 내용을 표현

aside - 본문 이외의 내용 표시

일반적으로 사이트의 왼쪽이나 오른쪽 또는 하단에 위치

본문 내용 외에 주변에 표시되는 기타내용을 표현

footer - 제작 정보와 저작권 정보 등 표시

일반적으로 사이트의 하단부에 표현