[웹표준]HTML5 시맨틱(Semantic) 마크업

HTML5 시맨틱(Semantic) 마크업

HTML5의 가장 큰 특징 중 하나인 시맨틱 태그

 

시맨틱(Semantic)은 "의미론적인"이란 뜻을 가진 단어이다.

즉 개발자와 브라우저에게 의미있는 태그를 제공한다고 이해하면 될 것 같다.

 

간단한 예로 <div>는 non-semantic 태그라 볼 수 있고

<table>, <header>, <footer> 등은 semantic 태그라고 볼수 있다.

 

<table>이면 표가 들어 갈 것이고, <nav>는 네비게이션을 의미할 것이라는 것을 유추 할 수 있다.

즉 시맨틱 태그를 보면 태그 자체만 봐도 어떤 의미로 사용 된 태그인지 알 수 있게 된다.

 

이렇게 의미를 가진 태그는 검색엔진이나 그 이외에 기계적인 동작들이 웹페이지를 쉽게 이해 할 수 있게 된다.

사용은 <div>를 사용하듯 사용하면 된다.

 

시멘틱 마크업 작성의 장점

 - 접근성이 좋아짐

 - SEO(Search Engine Optimization)

 - 코드 가독성이 좋아짐

 - 코드와 데이터의 재사용성이 높아짐

<header>

<nav>

<section>

<article>

<article>

<article>

<aside>

<footer>

<header>

<nav>

<section>

<article>

<article>

<article>

<aside>

<footer>

 

 

자주 사용되는 시맨틱 태그의 종류는

 

<header>

 - 페이지에서 머릿말..대부분 페이지의 맨위나 왼쪽에 위치해서 로고나 메뉴등이 들어간다.

 

<nav>

 - 네비게이션 역할을하는 태그로 어디든 사용 가능하나 <header>엔에 사용 하여 홈페이지의 공통 영역으로 지정하는 경우가 많다.

 - <header>,<aside>등 안에 쓰이지 않고 독립적으로 사용 되는 경우도 많이 있다.

 

<section>

 - 주로 컨텐츠 영역을 나타낼때 사용한다. 컨텐츠를 주제별로 묶어서 사용한다.

 - <div class="wrapper">의 개념과 비슷하다고 생각한다. 

 

<article>

 - 실질적인 내용이 들어가야 하는 영역으로 사용된다.

 

<aside>

 - 배너, 사이드바와 같은 영역에 많이 사용된다.

 

<iframe>

 - 외부문서를 삽입할때 사용 된다..

 

<address>

 - 주로 <footer>안에 사용되고 사이트의 제작자 정보, 연락처를 적을 영역에 사용된다.

 

<footer>

 - 페이지의 하단 영역에 사용된다.

 

이외에도 

<details>, <figcaption>, <figure>, <main>, <mark>, <summary>, <time>등등 이 있다.