- 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. - 검색로봇 또는 스크린 리더 등의 기계가 쉽게 해석하고 분석할 수 있도록 만들어진 태그이다. - Semantic 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다. - HTML 요소는 non-semantic 요소(div, span 등)와 semantic 요소(form, table, img 등)로 구분된다.
Semantic Tag의 구조
● Semantic Tag의 일반적인 구조
적용 전
적용 후
Semantic Tag
설명
<header>
- Header(머리말) 지정 - 문서 내 소개 및 내비게이션 메뉴 모음 - 주로 <form>, <nav> Tag 사용
<nav>
- 문서 내 내비게이션 요소들(메뉴 등) - 단독으로 사용하거나 <header>, <footer>, <aside> 내에서 사용
<section>
- 문서 및 애플리케이션 특정 영역 표시, h1~h6와 함께 사용 - <section> 안에 여러 개의 <aricle>을 넣어 contents의 내용 표현
댓글