HTML 시맨틱 태그

시맨틱 태그

시맨틱 태그란 그 이름 자체만으로 브라우저나 길 잃은 사람들, 지구상의 원주민, 개발자, 수정자들에게 의미를 전달 할 수 있는 태그다. 태그 이름만 들어도 어림짐작할 수 있는게 큰 장점이다.

시맨틱 태그 종류

<section> <section> 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼때 사용합니다.
<header> <header> 태그는 머리말 영역으로 문서 또는 섹션의 헤더를 나타낼때 사용합니다.
<nav> <nav> 태그는 주로 메뉴를 나타낼때 사용합니다.
<main> <main> 태그는 문서의 주요 컨텐츠를 나타낼때 사용합니다.
<article> <article> 태그는 문서 본문 중 독립된 컨텐츠를 나타낼때 사용합니다.
<aside> <aside> 태그는 사이드바라고 불리며 광고영역등을 나타낼때 사용합니다.
<footer> <footer> 태그는 문서의 바닥글, 섹션의 꼬리말을 나타낼때 사용합니다.

HTML5에 없어진 태그

<basefont> <basefont> 태그는 해당 문서의 모든 텍스트를 위한 기본 색상, 크기, 글꼴 집합(font-family) 등을 정의할 때 사용합니다.
<big> <big> 태그는 글자 크기가 큰 텍스트를 정의할 때 사용합니다.
<center> <center> 태그는 가운데로 정렬되는 텍스트를 정의할 때 사용합니다.
<font> <font> 태그는 텍스트의 폰트(font), 색상 그리고 크기를 정의할 때 사용합니다.
<frame> <frame> 태그는 <frameset> 요소에 포함되는 하나의 프레임(frame)을 정의할 때 사용합니다.
<frameset> <frameset> 태그는 요소에 포함된 각각의 <frame> 요소는 테두리(border)나 스크롤, 크기 재조정 가능 여부 등 서로 다른 속성값을 가질 수 있습니다.
<noframes> <noframes> 태그는 프레임(frame) 기능을 사용하지 않도록 설정했거나, 프레임 기능을 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 때 사용합니다.
<strike> <strike> 태그는 텍스트 한가운데 라인을 추가할 때 사용합니다.
<tt> <tt> 태그는 태그는 텔레타이프 텍스트(teletype text)를 나타낼 때 사용합니다.

HTML5에 의미가 변경된 태그

태그 변경 전 변경 후
<a> href 속성은 필수 href 속성은 필수가 아님 href 속성이 없는 a 요소는 플레이스 홀더로 어떠한 이유로 하이퍼링크를 붙이지 않은 텍스트로 이용할 수 있음
<cite> 인용문의 작성자나 제목을 나타냄 인용문의 제목만 나타냄 작성자난 인용문에는 사용할 수 없음
<address> 문서에 대한 연락처를 나타냄 article 요소 안에 있는 경우는 article의 문서에 대한 연락처를 나타냄 body 요소 안에 있는 경우는 문서에 대한 연락처를 나타냄
<hr> 가로 괘선을 나타냄 단락 단위에서 의미가 바뀌는 부분을 나타냄 일반적으로는 가로 괘선이 표시됨
<dl> 정의 리스트(Defintion List)를 나타냄 기술리스트(Definition List)를 나타냄 정의를 나타내려면 dfn 태그를 함께 사용해야 함 dt 태그는 용어를, dd태그는 그 설명을 나타냄
<b> 굵은 글꼴을 나타냄 키워드나 제품명 등 다른 것과 구별하고 싶은 곳을 나타냄
<i> 문자열을 이탤릭체로 나타냄 마음의 소리나 다른 나라의 언어 등 본문과는 다른 부분을 나타냄
<s> 취소선이 그어진 문자열을 나타냄 정확하지 않았던 내용(관련이 없어진 내용)을 나타냄. 보통은 취소선이 그어진 문자열이 표시됨
<u> 밑줄이 그어진 문자열을 나타냄 고유 명사나 스펠링 미스 등 문장 중에 다른 부분과 명확히 구별하기 어려운곳을 나타냄 보통은 밑줄이 있는 문자열이 표시됨
<small> 문자를 작게 만듦 세목이나 주석을 나타냄