semantic

semantic

semantic의 사전적 의미 : 의미론적인, 의미가 통하는

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

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

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

HTML5에서는 웹문서 레이아웃을 표준화하는 semantic tag를 이용

사이트의 제목과 로고, 검책 창 등이 있는 헤더(header)

여러 내용이 있는 본문(contents : section + articles)

본문 외 내용을 나타내는 사이드바(aside)

저작권 정보와 제작자 정보를 표시하는 푸터(footer)

개발자가 의도한 요소의 의미를 명확히 드러내고 코드의 가독성을 높이고 유지보수를 쉽게 한다.

semantic 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할

semantic 웹이란 웹에 존재하는 수 많은 웹페이지들에 메타데이터(metadata)를 부여

기존의 잡다한 데이터 집합이였던 웹페이지를 의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상

semantic 요소

HTML 요소는 non-semantic 요소, semantic 요소로 구분

• non-semantic 요소 : div, span 등, 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
• semantic 요소 : form, table, img 등, 이들 태그는 content의 의미를 명확히 설명한다.

HTML5에 추가된 semantic tag

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

header - 머리말 지정

header는 주로 <form> 태그를 사용하여 검색 창을 넣거나 <nav> 태그를 사용하여 사이트의 메뉴를 삽입

본문에 사용하여 해당 부분의 머리말로도 사용

nav - 문서를 연결하는 navigation link

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

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

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

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

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

aside - 본문 이외의 내용 표시

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

본문 내용 외에 주변에 표시되는 기타내용을 표현(광고, 링크모음 등...)

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

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