HTML 시멘틱 태그

시멘틱 태그

시멘틱(Semantic) 태그란 태그의 이름 자체만으로 태그의 의미를 전달할 수 있는 태그이다. 시멘틱 태그가 아닌 <div>나 <span>와 같은 태그들은 태그만 봐서는 그 안의 내용을 유추할 수 없다. 하지만 시멘틱 태그는 <header> = 헤더파일, <nav> = 내비게이션, <img> = 이미지파일 처럼 이름만 보아도 내용물을 어림짐작할 수 있다.

종류

<header> <header>태그는 말 그대로 머릿말 영역으로 문서 또는 섹션의 헤더를 나타낸다. 하나의 문서 안에 여러 개의 <header> 태그가 올 수 있다. 즉, 헤더란 문서 전체의 헤더일 수도 있고, 특정 섹션의 헤더일 수도 있다. 헤더 부분에 제목태그인 <h1>, <h2> 등이 올 수 있다.
<nav> <nav>태그는 내비게이션, 말 그대로 나침반처럼 사용하는 태그이며 다른 영역이나 사이트, 다른 문서 사이를 탐색할 수 있는 링크들의 집합이다. 주로 메뉴의 링크 위치에 사용된다.
<main> <main> 태그는 문서의 주요 콘텐츠를 나타낸다. 사이드 바, 탐색 링크, 로고, 검색 양식, 저작권 등 문서에 반복되는 콘텐츠를 포함시키면 안된다. 한 페이지에 한 번만 사용 가능하다.
<section> <section>태그는 어느 한 구역을 의미한다. 제목을 갖고 있으면서 문서 전체와 관련이 있는 콘텐츠의 집합을 섹션이라고 한다. 공지사항, 포스트, 댓글도 세션이 될 수 있다. <article> 태그 아래에도 섹션이 올 수 있으며 섹션을 사용할 땐 반드시 heading(<h1>~<h6>)을 가져야 한다.
<article> <article> 태그는 문서 본문 중 독립된 콘텐츠에 사용한다. 뉴스 기사나 블로그 게시물 등 독립적인 콘텐츠에 사용하며 <article> 밑에 <section> 태그가 올 수도 있다.
<aside> <aside> 태그는 사이드 바라고 불리며 사이드에 배치되는 경우가 많다. 아래쪽에 올 수도 있다. <aside> 부분은 CSS를 활용하여 스타일을 지정하고 광고 영역 등으로 활용될 수 있다. 필요하면 사용하지만 반드시 있어야 하는 태그는 아니다.
<footer> <footer> 태그는 말 그대로 꼬리말, 혹은 바닥글이라는 의미이다. 문서의 바닥글을 나타낼 수도 있고 섹션의 꼬릿말을 달 수도 있다. 주로 화면 가장 아래에서 회사 소개, 저작권, 제작 정보, 버젼 등을 표시한다.

HTML5에 없어진 태그

  • <basefont>
  • <big>
  • <center>
  • <fonr>
  • <strike>
  • <tt>
  • <frame>
  • <frameset>
  • <noframes>
  • <acronym>
  • <applet>
  • <isindex>
  • <dir>

HTML5에 의미가 변경된 태그

<a> HTML4에서는 href="#" 또는 href="javascript:;"로 지정해야 널 링크로 사용할 수 있었지만 HTML5에서는 href 속성 없이 사용해도 널 링크로 사용 가능
<address> HTML4에서는 이름이나 이메일 주소, 전화번호 등 제작자에 대한 정보를 표시할 때 사용하였지만, HTML5에서는 실제 우편물 주소를 표시
<b> HTML4에서는 텍스트를 진하게 표시할 때 사용하였지만, HTML5에서는 텍스트를 진하게 표시할뿐 아니라, 제품 소개서 안의 제품명, 요약문서 안의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시하려고 할 때 사용
<hr> HTML4에서는 가로줄을 표시할 때 사용하였지만, HTML5에서는 단락 단위로 주제를 바꾸려고 할 때 사용
<i> HTML4에서는 텍스트를 기울어지게 표시할 때 사용하였지만, HTML5에서는 텍스트를 기울어지게 표시할 뿐 아니라, 중요한 정보가 들어 있지 않은 주변 콘텐츠로부터 텍스트를 따로 표시할 때 사용
<menu> HTML4에서는 <menu>태그를 사용하지 않도록 권고하였으나, HTML5에서는 실제 문서 메뉴 정보를 제공하는데 사용
<small> HTML4에서는 작은 글자로 표시할 때 사용하였지만, HTML5에서는 세부 주석이나 법적 인쇄문서에서 작은 인쇄 정보를 표시할 때 사용
<strong> HTML4에서는 글자를 강조할 때 사용하였지만, HTML5에서는 단순히 진하게 표시하는 것보다 중요한 정보를 표시할 때 사용