시맨틱 태그

시맨틱 태그

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.

<div>나 <span>과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, <form>, <table>, <article> 등 의미가 있는 태그는 내용을 명확하게 정의한다.

종류

<section>	<section> 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다.
<header>	<header> 태그는 소개 컨텐츠 및 네비게이션 링크를 포함한 섹션입니다.
<nav>	<nav> 태그는 네비게이션 링크를 정의합니다.
<article>	<article> 태그는 문서내에 독립적인 컨텐츠를 정의합니다.
<footer>	<footer> 태그는 사이트 푸터부분을 정의합니다.
<aside>	<aside> 태그는 문서내에 사이드 컨텐츠를 정의합니다.
<main>	<main> 태그는 웹 문서의 주요 콘텐츠 영역을 설정합니다.

HTML5에 의미가 변경된 태그

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