HTML시멘틱 태그

시멘틱 태그

HTML5 이전에는 <div>태그와 <span>태그 등에 Id와 Class를 부여하여 원하는 구역을 나누고 스타일을 지정했다면 HTML5 에서는 의미를 가지고 있는시멘틱 태그를 사용하여 각 구역 별 코드의 가독성을 높이고 웹 표준에 부합하도록 하고 있습니다.

시멘틱 태그의 종류

속성 설명
<section> <section>태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다
<aside> <aside>링크, 광고, 툴바 등 페이지 콘텐츠를 제외한 부분을 정의합니다.
<article> <article>섹션 내의 내용을 정의합니다.
<main> <main>해당 문서의 주요 내용을 지정합니다.
<header> <header>문서나 섹션의 머리글을 지정합니다.
<footer> <footer>문서 또는 섹션의 바닥글을 지정합니다.주로 저작권, 연락처 정보 등 내용이 삽입됩니다.
<nav> <nav>사이트 내의 네비게이션으로 쓸 구역을 지정합니다.
<datalist> <datalist>사용자가 보거나 숨길 수있는 추가 세부 정보를 정의합니다.
<summary> <summary><details> 요소를 위한 눈에 보이는 제목을 정의합니다.
<time> <time>날짜/ 시간을 정의합니다.
<mark> <mark>강조 표시된 텍스트를 정의합니다. 형광펜 처럼 표시됩니다.
<figure> <figure>일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정합니다.
<figcaption> <figcaption><figure>요소에 대한 캡션을 정의합니다.
<hn> <hn>각각의 콘텐츠 영역에 제목을 표시할 때 사용됩니다.
<hgroup> <hgroup>제목과 부제목을 묶는 용도 입니다. 가독성 향상을 위해 사용합니다.
<address> <address>웹페이지 저작자의 이름이나 제작자의 웹페이지, 피드백을 위한 이메일주소 등의 연락처주소를 넣기 위한 태그입니다.

HTML5에서 없어진 태그

HTML5로 넘어오면서 더 이상 사용하지 않는 태그를 지원 종료하고,
디자인과 구조정보의 분리를 지향하기 위해 CSS로 대체 가능한 태그들이 지원 종료 되었습니다.

속성 설명
<align> CSS로 대체 가능하여 지원 종료합니다.
<bgcolor> CSS로 대체 가능하여 지원 종료합니다.
<border> CSS로 대체 가능하여 지원 종료합니다.
<color> CSS로 대체 가능하여 지원 종료합니다.
<hspace> img의 좌우 공간을 지정하는 기능 이었으나 CSS로 대체됩니다.
<vspace> img의 상하 공간을 지정하는 기능. CSS로 대체합니다.
<acronym> <abbr> 태그로 교체되었습니다.
<applet> <embed>태그로 교체되었습니다.
<basefont> CSS로 대체 가능하여 지원 종료합니다.
<big> CSS로 대체 가능하여 지원 종료합니다.
<center> CSS로 대체 가능하여 지원 종료합니다.
<dir> <ul>태그로 대체됩니다.
<font> CSS로 대체 가능하여 지원 종료합니다.
<frame> HTML에서 더 이상 지원하지 않습니다.
<frameset> HTML에서 더 이상 지원하지 않습니다.
<noframes> HTML에서 더 이상 지원하지 않습니다.
<strike> <del>또는 <s>태그로 대체합니다.
<tt> CSS로 대체 가능하여 지원 종료합니다.

HTML5에서 의미가 변경된 태그

속성 설명
<a> href 속성 없이 사용 시 null 링크로 사용합니다.
<address> 실제의 주소 표시합니다.
<b> 중요하지 않지만 진하게 표시합니다.
<hr> 단락 주제 변경 시 사용합니다.
<l> 중요한 정보 기울임꼴로 표시합니다.
<menu> 실제 문서 메뉴 정보를 제공하는데 사용합니다.
<small> 세부 주석이나 법적 인쇄 문서에서 작은 글자 정보 표시합니다.
<strong> 중요한 정보를 진하게 표시합니다.