HTML 시맨틱 태그

시맨틱 태그

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.

<div>나 <span>과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, <form>, <table>, <article> 등 의미가 있는 태그는 내용을 명확하게 정의한다.

종류

<section> <section> 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다.
<header> <header> 태그는 소개 컨텐츠 및 네비게이션 링크를 포함한 섹션입니다.
<nav> <nav> 태그는 네비게이션 링크를 정의합니다.
<article> <article> 태그는 문서내에 독립적인 컨텐츠를 정의합니다.
<footer> <footer> 태그는 사이트 푸터부분을 정의합니다.
<aside> <aside> 태그는 문서내에 사이드 컨텐츠를 정의합니다.
<main> <main> 태그는 웹 문서의 주요 콘텐츠 영역을 설정합니다.

HTML5에 없어진 태그

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

HTML5에 의미가 변경된 태그

<a> <a> 태그는 HTML4에서는 href="#" 또는 href="javascript:;"로 지정해야 널 링크로 사용할 수 있었지만 HTML5에서는 href 속성 없이 사용해도 널 링크로 사용 가능
<address> <address> 태그는 HTML4에서는 이름이나 이메일 주소, 전화번호 등 제작자에 대한 정보를 표시할 때 사용하였지만, HTML5에서는 실제 우편물 주소를 표시
<b> <b> 태그는 HTML4에서는 텍스트를 진하게 표시할 때 사용하였지만, HTML5에서는 텍스트를 진하게 표시할뿐 아니라, 제품 소개서 안의 제품명, 요약문서 안의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시하려고 할 때 사용
<hr> <hr> 태그는 HTML4에서는 가로줄을 표시할 때 사용하였지만, HTML5에서는 단락 단위로 주제를 바꾸려고 할 때 사용
<i> <i> 태그는 HTML4에서는 텍스트를 기울어지게 표시할 때 사용하였지만, HTML5에서는 텍스트를 기울어지게 표시할 뿐 아니라, 중요한 정보가 들어 있지 않은 주변 콘텐츠로부터 텍스트를 따로 표시할 때 사용
<menu> <menu> 태그는 HTML4에서는 태그를 사용하지 않도록 권고하였으나, HTML5에서는 실제 문서 메뉴 정보를 제공하는데 사용
<small> <small> 태그는 HTML4에서는 작은 글자로 표시할 때 사용하였지만, HTML5에서는 세부 주석이나 법적 인쇄문서에서 작은 인쇄 정보를 표시할 때 사용
<strong> <strong> 태그는 HTML4에서는 글자를 강조할 때 사용하였지만, HTML5에서는 단순히 진하게 표시하는 것보다 중요한 정보를 표시할 때 사용