HTML 시맨틱 태그

시맨틱 태그

시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. 즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. HTML5 이전의 태그와 비교 하자면 HTML5부터는 <div>태그로 클래스나 아이디를 선언하는것이 아닌 미리 정의된 시맨틱 태그를 사용한다는 차이점이 있다. 시맨틱 태그를 사용하게 되면 유지보수에 용이해지고 웹 접근성이 향상되는 등의 이점이 있다.

종류

태그명 설명
<section> <section> 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다.
<header> <header> 태그는 페이지의 제목과 같은 소개 내용을 나타낼 때 사용합니다.
<nav> <nav> 태그는 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 나타낼 때 사용합니다.
<aside> <aside> 태그는 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현할 때 사용합니다. 사이드바 또는 콜아웃 상자로 사용됩니다.
<main> <main> 태그는 문서의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낼 때 사용합니다.
<article> <article> 태그는 그 자체로 의미가 있는 웹사이트의 부분이며, 독립적으로 배포 또는 재사용되도록 의도 된 문서를 나타낼 때 사용합니다.
<footer> <footer> 태그는 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서를 나타낼 때 사용합니다.
<adderss> <adderss> 태그는 콘텐츠의 작성자나 사이트 소유자의 정보등을 부가적으로 담는 영역을 나타낼 때 사용합니다.
<hgroup> <hgroup> 태그는 제목과 관련된 부제목을 나타낼 때 사용합니다.
<details> <details> 태그는 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타낼 때 사용합니다.
<figure> <figure> 태그는 이미지, 다이어그램, 사진 등 독립적인 콘텐츠 정의를 나타낼 때 사용합니다.
<figcaption> <figcaption> 태그는 <figure> 요소의 설명, 캡션(caption)을 나타낼 때 사용합니다.
<mark> <mark> 태그는 현재 맥락에 관련이 깊거나 중요한 부분 강조를 나타낼 때 사용합니다.
<time> <time> 태그는 시간의 특정 지점 또는 구간을 나타낼 때 사용합니다.

HTML5에 없어진 태그

  • <acronym> : <abbr>로 대체
  • <applet> : <embed>로 대체
  • <basefont> : 지원중단
  • <big> : 지원중단
  • <center> : 지원중단
  • <dir> : <ul>로 대체
  • <font> : 지원중단
  • <frame> : 지원중단
  • <frameset> : 지원중단
  • <noframes> : 지원중단
  • <strike> : <del> 또는 <s>로 대체
  • <tt> : 지원중단

HTML5에 의미가 변경된 태그

태그 변경 전 변경 후
<a> href=”#”, href=”javascript:;”로 null link(널링크) 사용 href 속성없이 사용하면 바로 null link(널링크)로 사용
<adress> 이름, 이메일주소, 전화번호 등 제작자에 대한 정보 표시 실제 우편 주소를 표시
<b> 텍스트를 진하게 내용이 중요하지는 않지만 진하게 표시할 때 사용
<hr> 단순한 가로줄 표시 단락 단위로 주제 변경 시 사용
<i> 텍스트 기울어지게 표시 텍스트를 기울어지게 할 뿐 아니라, 중요한 정보가 들어있지 않은 주변 요소로부터 텍스트를 따로 표시할때 사용
<menu> 사용하지 않도록 권고 실제 문서 메뉴 정보를 제공하는데 사용
<small> 작은 글자로 표시 세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시할 때 사용
<strong> 글자 강조 단순히 글자를 강조하는 것보다 중요한 내용을 표시할 때 사용