HTML Reference

HTML 시멘틱 태그

시멘틱(Semantic) 태그란 의미에 맞게 태그를 작성하는 것을 의미합니다. 의미에 맞게 태그를 작성하여 브라우저나 개발자가 그 태그의 사용의미를 잘 받아들일 수 있도록 코딩하는 것이 중요합니다.

태그명	설명
<article>	<article> 태그는 여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용합니다.
<aside>	<aside> 태그는 콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그, 보통 퀵메뉴나 스크롤탑버튼등에 사용합니다.
<figure>	<figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정합니다.
<figcaption>	<figcaption> 태그는 <figure>태그로 정의한 일러스트레이션, 다이어그램, 사진등의 제목설명등을 작성합니다.
<header>	<header> 태그는 페이지나 일부분의 머리말(헤더)부분을 지정합니다.
<footer>	<footer> 태그는 페이지나 일부분의 꼬리말(푸더)부분을 지정합니다.
<main>	<main> 태그는 페이지의 가장 중요한 메인 부분을 지정합니다.
<nav>	<nav> 태그는 페이지의 네비게이션 부분을 지정합니다.
<section>	<section> 태그는 페이지의 일부분을 지정합니다.

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

태그	변경 전	변경 후
<a>	href="#", href="javascript:;"로 null link(널링크) 사용	href 속성없이 사용하면 바로 null link(널링크)로 사용
<address>	이름, 이메일주소, 전화번호 등 제작자에 대한 정보 표시	사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.
<b>	텍스트를 진하게	내용이 중요하지는 않지만 진하게 표시할 때 사용
<hr>	단순한 가로줄 표시	단락 단위로 주제 변경 시 사용
<i>	텍스트 기울어지게 표시	텍스트를 기울어지게 할 뿐 아니라, 중요한 정보가 들어있지 않은 주변 요소로부터 텍스트를 따로 표시할때 사용
<menu>	사용하지 않도록 권고	실제 문서 메뉴 정보를 제공하는데 사용
<small>	작은 글자로 표시	세부 주석이나 법적 인쇄 문서에서 작은 인쇄 정보를 표시할 때 사용
<strong>	글자 강조	단순히 글자를 강조하는 것보다 중요한 내용을 표시할 때 사용