시멘틱 태그

시멘틱 태그란?

시멘틱(semantic) 태그란 그 이름 자체만으로 의미를 전달할 수 있는 태그다 시맨틱 태그가 아닌 <div>,<span> 등은 그 이름만 들어서는 그 내용이 무엇인지 알 수 없다 . 그러나, 시맨틱 태그는 <header>=두목 <nav>=네비게이션, <img>=그림, 이렇게 이름만 척, 들어도 어림짐작할 수 있다는 게 대단한 장점이라 할 수 있다.

종류

<section>	<section> 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다.
<header>	<header> 태그는 말 그대로 머리말 영역으로 문서 또는 헤더를 나타낸다.
<nav>	<nav> 태그는 내비게이션 즉, 말 그대로 (길을 안내하는)나침반이며 다른 영역,사이트,다른 문서 사이를 탐색할 수 있는 링크의 집합이다
<main>	<main> 태그는 페이지의 주요 콘텐츠를 나타낸다
<article>	<article> 태그는 독립적인 콘텐츠를 지정한다
<aside>	<aside> 태그는 사이드바라고 불르기도 하며, 본문 이외의 내용을 담고 있는 시맨틱 태그입니다. 주로 본문옆에 광고를 달거나 링크들을 이 공간에 넣어 표현합니다.
<footer>	<footer> 태그는 제일 아래에 위치하고 회사소개, 저작권, 약관, 제작정보 등이 들어간다
<figure>	<figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다.
<figcaption>	<figcaption> 태그는 이미지나 다이어그램, 사진과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의하는 <figure> 요소의 캡션(caption)을 정의할 때 사용합니다
<details>	<details> 태그는 사용자가 요청 시 열고 닫을 수 있는 추가 세부 정보를 지정합니다.

HTML5에 없어진 태그

태그	설명	대체수단
applet	자바 애플릿 삽입	embed / object요소 사용
acronym	약어나 이니셜 표시	abbr요소 사용
dir	디렉토리 내용 표시	ul요소 사용
frame	프레임	iframe과 CSS 이용하거나 서버 사이트로 컨텐츠 결합
frameset	프레임 세트	iframe과 CSS 이용하거나 서버 사이트로 컨텐츠 결합
noframes	프레임에 대응하지 않는 브라우저를 위한 컨텐츠	iframe과 CSS 이용하거나 서버 사이트로 컨텐츠 결합
isindex	서버로 송신하는 텍스트 입력란	form과 텍스트 필드의 조합
listing, xmp	내용 그대로 출력	pre 요소나 code 요소를 사용
noembed	embed를 사용할 수 없을 때 대체 요소	폴백이 필요하다면 object 요소 사용
plaintext	내용 그대로 출력	MIME 타입 “text/plain”을 사용
rb	루비 대상 문자열을 지정	루비 대상 문자열은 ruby 요소 안에 직접 기술
basefont	기본 폰트 지정	CSS 사용
big	텍스트 사이즈를 크게 함	CSS 사용
blink	문자를 점멸	CSS 사용
center	내용을 가운데 정렬함	CSS 사용
font	폰트 지정	CSS 사용
marquee	문자를 스크롤	CSS 사용
s	취소선	CSS 사용
spacer	스페이스 삽입	CSS 사용
strike	취소선	CSS 사용
tt	글꼴을 같은 폭으로 표시	CSS 사용
u	텍스트에 밑줄을 그음
bgsound	배경음 삽입	audio 요소를 대신 사용

HTML5에 의미가 변경된 태그

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