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> | 글자 강조 | 단순히 글자를 강조하는 것보다 중요한 내용을 표시할 때 사용 |