khdevlog

HTML5 시맨틱(semantic) 태그

🦥 시맨틱 태그의 목적

Semantic tag

  • 시맨틱(Semantic)은 “의미의, 의미론적인”이라는 뜻이다. 즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.
  • 예를 들어 <table>, <article> 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다. <table> 태그 안에는 표가 들어갈 것이고, <article> 태그 안에는 어떤 형태의 글이든 글이 들어갈 것이라는 것 정도는 유추 할수 있다.
  • html 파일을 분석할 때 정확하게 컨텐츠를 식별할 수 있는것도 장점이다.
  • 이렇게 HTML태그의 의미를 명확하게 할 수 있다는 것이 목적이라고 할 수 있겠다.

🦥 시맨틱 태그의 용도

  • 아래 tag 들은 HTML5 에서 새롭게 추가된 대표적인 의미 요소들 이다.
  • <header> 태그는 문서나 특정 섹션(section)의 헤더(header)를 정의할 때 사용한다
  • 헤더(header)는 보통 도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합 등과 같은 정보를 포함한다.
- 하나 이상의 제목 요소(h1 ~ h6)
- 로고(logo)나 아이콘(icon)
- 저자(author) 정보

main

  • <main> 태그는 해당 문서의 <body> 요소(element)의 주 콘텐츠(main content)를 정의할 때 사용한다.
  • 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안된다.
  • 따라서 하나의 문서에는 단 하나의 main 요소만이 존재해야 하며,
  • main 요소는 <article>, <aside>, <footer>, <header>, <nav> 요소의 자손 요소가 되어서는 안된다.
  • <footer> 태그는 문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용한다.
  • 푸터(footer)는 보통 <footer> 요소가 포함되어 있는 문서나 섹션에 대한 아래와 같은 정보를 포함한다.
- 저자(author) 정보
- 저작권 정보
- 연락처
- 사이트맵(sitemap)
- 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
- 연관 페이지 등
  • <nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다.
  • <nav> 요소를 사용하는 일반적인 예로는 다음과 같다.
- 메뉴
- 목차
- 인덱스 등

section

  • <section> 태그는 HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용한다. 요소는 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많다.

article

  • <article> 태그는 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용한다.
  • 또한 article 요소의 내용은 그 자체만으로도 이해가 되어야 한다.
  • 요소에 포함될 수 있는 내용은 아래와 같다.
- 포럼(forum) 포스트
- 블로그 포스트
- 보도 기사
- 논평(comment) 등

aside

  • <aside> 태그는 페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만, 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의할 때 사용한다.

tagmap

Leave a comment

You may also enjoy