<TIL 20.05.20> Semantic Tag

시맨틱(Semantic) 태그에서 시맨틱이란 "의미론적인"이라는 뜻이다. HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미 있는 태그를 제공하게 된다.

non-semantic 태그엔 <div> 태그가 있다고 볼 수 있고,  semantic 태그엔 <table>, <article> 등이 있다고 볼 수 있다.

일반적으로 <div> 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없는 반면, <table>, <article> 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다.

 

시멘틱(semantic) 태그의 종류

<header> : 화면 상단에 위치 (로고, 로그인, 회원가입 등)

<section> : 하나의 주제를 그룹화할 때 사용 (뉴스 기사의 제목 등)

<article> : 하나의 주제에 대해서 그 내용에 대해 설명할 때 사용 (뉴스 기사, 블로그 글 등)

<aside> : 보통 광고, 검색 기능, 카테고리 등을 표현

<footer> : 화면 하단에 위치(이메일, 저작권 표시 등)