시멘틱 태그란?

시멘틱 태그란 무엇이며 사용하는 이유

안녕하세요! 오늘은 시멘틱 태그가 무엇이고 어떻게 사용하는지 그 이유에 대해 설명 해드리도록 하겠습니다.

시멘틱 태그 사용 이유

1. HTML 소스 코드만 보고도 어느 부분인지 쉽게 알 수 있기 때문인데 스크린 리더기 등 몸이 불편한 사람도 사이트의 구조를 소리로 구분할 수 있게 해준다.
   
2. 태그들의 의미가 분명하다면 검색 엔진 입장에서 구분하기가 쉬워진다.
   
3. 코드 가독성 및 유지 보수가 쉬워진다
   

시멘틱 태그 종류

• 메인 루트
  
• 문서 메타 데이터
  
• 섹션 루트
  
• 콘텐츠 섹션
  
• 텍스트 콘텐츠
  

[메인루트]

요소	설명
html	Html 문서의 루트(최상위 요소)를 나타내므로 root 요소라고도 합니다. 다른 모든 요소는 이 요소의 자손이어야 합니다.

[문서 메타 데이터]

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당하는 정보를 가진 다른 파일로 링크할 수도 있습니다.

요소	설명
base	문서의 모든 상대 URL에 사용할 기본 URL을 지정합니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다.
head	제목, 스크립트 및 스타일 시트와 같은 문서에 대한 기계 판독 가능 정보(메타데이터)를 포함합니다
link	현재 문서와 외부 리소스 간의 관계를 지정합니다. 이 요소는 CSS에 연결하는 데 가장 일반적으로 사용되지만 무엇보다도 사이트 아이콘(“favicon” 스타일 아이콘과 홈 화면용 아이콘 및 모바일 장치의 앱)을 설정하는 데도 사용됩니다.
meta	base, link, script, style, title과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
style	문서 또는 문서의 일부에 대한 스타일 정보를 포함합니다. 이 요소를 포함하는 문서의 내용에 적용되는 CSS를 포함합니다
title	browser의 제목 표시줄 또는 페이지의 탭에 표시되는 문서의 제목을 정의합니다. 텍스트만 포함합니다. 요소 내의 태그는 무시됩니다

섹션 루트

요소	설명
body	HTML 문서의 내용을 나타냅니다. 문서에는 이러한 요소가 하나만 있을 수 있습니다.

콘텐츠 섹션

콘텐츠 섹션 요소를 사용하면 문서 콘텐츠를 논리적 조각으로 구성할 수 있습니다. 섹션 요소를 사용하여 머리글 및 바닥글 탐색, 콘텐츠 섹션을 식별하는 머리글 요소를 포함하여 페이지 콘텐츠에 대한 광범위한 개요를 만듭니다.

요소	설명
address	가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다
article	문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.
aside	문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
footer	가장 가까운 섹션 콘텐츠나 섹션 루트의 푸터를 나타냅니다. 푸터는 일반적으로 섹션의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
header	소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
h1,h2,h3,h4,h5,h6	6단계의 구획 제목을 나타냅니다. 구획 단계는 h1이 가장 높고 h6은 가장 낮습니다.
main	문서 body의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
nav	문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
section	HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 section은 제목을 포함하지만, 항상 그런 것은 아닙니다.

텍스트 콘텐츠

HTML 텍스트 콘텐츠를 사용하여 여는 body와 닫는 /body 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있습니다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 접근성과 SEO에 중요합니다.

요소	설명
blockquote	안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. 인용문의 출처 URL은 cite 속성으로, 출처 텍스트는 cite요소로 제공할 수 있습니다.
dd	설명 목록 dl 에서 선행 용어 dt에 대한 설명, 정의 또는 값을 제공합니다.
div	유동 콘텐츠의 일반 컨테이너입니다. CSS를 사용하여 어떤 식으로든 스타일을 지정할 때까지 콘텐츠나 레이아웃에 영향을 미치지 않습니다(예: 스타일이 직접 적용되거나 flexbox와 같은 일종의 레이아웃 모델이 적용됨) 부모 요소.
dl	설명 목록을 나타냅니다. dl은 dt로 표기한 용어와 dd 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.
dt	설명 혹은 정의 리스트에서 용어를 나타냅니다. dl 요소 안에 위치해야 합니다. 보통 dd 요소가 뒤따르지만, 여러 개의 dt 요소를 연속해 배치하면 바로 다음 dd 요소로 한꺼번에 서술할 수 있습니다.
figcaption	부모 figure 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.
figure	독립적인 콘텐츠를 표현합니다. figcaption 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.
hr	이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.
li	목록의 항목을 나타냅니다. 반드시 정렬 목록(ol), 비정렬 목록(ul, 혹은 메뉴(menu)) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타냅니다.
menu	사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.
ol	정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.
p	하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.
pre	미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.
ul	정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.

다음시간에 계속…