시맨틱 태그

 

 

HTML5에서 새롭게 등장한 시멘틱태그 

 

HTML5의 가장 큰 특징은 웹페이지 구조를 만들어주는 태그의 등장입니다.

오늘은 지난번 HTML5의 개념정리 포스팅에 이어 HTML5로 레이아웃을 짜는 방법에 대해 자세히 알아보려고 합니다.

 

 

 

 

 

기존에는 div에 id 또는 class를 주어서 구조를 설계 했죠. 그런데 html5로 넘어오면서 이를 대체할 태그들이 등장했답니다.

쉽게말해서 "div 를 여러갈래로 구조화 시켜서 조금 더 짜임세 있는 코딩을 하자~!" 라는 의도로 파악하시면 좋겠네요.

 

 

 

 

다음으로 새롭게 등장한 태그들부터 하나하나 알아보겠습니다.

 

시맨틱태그	내용
<header>	웹 페이지의 헤더를 만들때 사용합니다. (주로 로고영역)
<footer>	웹 페이지의 하단을 만들때 사용합니다. (주로 카피라이트 영역)
<nav>	웹 페이지의 메뉴를 만들때 사용하고 , 일반적으로 내부에는 <ul>과 <li>를 많이 사용합니다.
<article>	글자가 많이 들어가는 부분을 의미
<section>	여러 중심 내용을 감싸는 공간을 의미
<aside>	페이지 왼쪽이나 오른쪽에 부가적인 내용의 영역입니다. 보통 퀵메뉴나 광고영역으로 많이 씁니다.
<hgroup>	제목<h1>과 부제목<h2>으로 나눠 써야할때 이러한 제목들을 하나로 묶어주는 태그입니다.

 

 

 

그림은 딱 보면 아실테고.. 쓰임정도를 정리해보자면,

 

<hgroup>태그는 그림 [4]번에처럼 본문 내부에 쓰이는데요, 실제로 실무에서는 거의 안쓰게 되더라구요.(개인적인생각)

<aside> 태그는 처음에 익숙하지 않아서 div로 코딩했었는데요, 계속 억지로 쓰다보니까 지금은 은근 자주쓰입니다.

<header>, <article>, <footer>태그는 보통 html문서 하나에 한번밖에 안쓰여요

<section> 태그는 정말 많이 씁니다. (시멘틱 태그중에 가장많이 사용하는듯함)

 

 

HTML5로 짜여진 레이아웃은 처음에 조금 낮설 수 도있느나, TABLE코딩에서 div형식으로 넘어왔듯이 머지않아 HTML5 태그로 구조화하여 코딩하셔야 할 것 같네요.

 

[출처] [HTML5 기초] 새로 추가된 태그를 이용한 레이아웃 설계|작성자 임규성