HTML 레퍼런스 북
시맨틱 태그
시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻으로 의미를 가지는 태그가 시맨틱 태그입니다.
즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 됩니다.
종류
| <header> | <header> 태그는 머리말 영역으로 문서 또는 섹션의 헤더를 나타낼 때 사용합니다. |
|---|---|
| <nav> | <header> 태그는 내비게이션를 나타낼 때 사용합니다. |
| <main> | <main> 태그는 문서의 주요 컨텐츠를 나타낼 때 사용합니다. |
| <aside> | <aside> 태그는 사이드에 위치하는 공간을 나타낼 때 사용합니다. |
| <section> | <section> 태그는 주제별 그룹의 컨텐츠 섹션을 나타낼 때 사용합니다. |
| <article> | <article> 태그는 문서 본문 중 독립된 콘텐츠(개별 뉴스 기사, 게시물)를 나타낼 때 사용합니다. |
| <footer> | <footer> 태그는 꼬리말을 나타낼 때 사용합니다. |
| <address> | <address> 태그는 컨텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담을때 사용합니다. |
| <hgroup> | <hgroup> 태그는 제목과 관련된 부제목을 묶을 때 사용합니다. |
| <details> | <details> 태그는 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다. |
| <figure> | <figure> 태그는 이미지, 다이어그램, 사진 등 독립적인 컨텐츠를 정의할 때 사용됩니다. |
| <figcaption> | <figcaption> 태그는 <figure>요소의 설명 캡션(caption)정의합니다. |
| <mark> | <mark> 태그는 현재 맥락에 관련이 깊거나 중요한 부분을 강조합니다. |
| <time> | <time> 태그는 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능을 구현합니다. |
| <summary> | <summary> 태그는 details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다. |
HTML5에 없어진 태그
<basefont>, <big>, <center>, <font>, <frame>, <frameset>,<noframes>, <tt>, <s>, <strike>, <u>, <acronym>, <applet>, <isindex>, <dir>, <noscript>
HTML5에 의미가 변경된 태그
| 태그 | 변경 전 | 변경 후 |
|---|---|---|
| <a> | href="#", href="javascript:;"로 null link(널링크) 사용. | href 속성없이 사용하면 바로 null link(널링크)로 사용 |
| <adress> | 이름, 이메일주소, 전화번호 등 제작자에 대한 정보 표시 | 실제 우편 주소를 표시 |
| <b> | 텍스트를 진하게 | 내용이 중요하지는 않지만 진하게 표시할 때 사용 |
| <hr> | 단순한 가로줄 표시 | 단락 단위로 주제 변경 시 사용 |
| <i> | 텍스트 기울어지게 표시 | 텍스트를 기울어지게 할 뿐 아니라 중요한 정보가 들어있지 않은 주변 요소로부터 텍스트를 따로 표시할 때 사용 |
| <menu> | 사용하지 않도록 권고 | 실제 문서 메뉴 정보를 제공하는데 사용 |
| <small> | 작은 글자로 표시 | 세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시할 때 사용 |
| <strong> | 글자 강조 | 단순히 글자를 강조하는 것 보다 중요한 내용을 표시할 때 사용 |