Notice
Recent Posts
Recent Comments
«   2025/06   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Today
Total
관리 메뉴

IT CUBE

[HTML] 시맨틱태그의 의미와 종류 본문

Front-End

[HTML] 시맨틱태그의 의미와 종류

CUBE 2021. 9. 29. 23:25

 

 

시맨틱 태그란?

의미를 가지는 태그

즉, 컴퓨터가 HTML 요소의 의미를 보다 명확하게 해석하고 그 데이터를 활용할 수 있도록 하는 태그입니다.

 

 

시맨틱 태그의 종류

 

 

1. header

웹의 상단을 의미합니다.

소개 및 탐색에 도움을 주는 콘텐츠를 나타내고 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.

 

2. nav

내비게이션을 나타내는 태그입니다.

문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구역을 나타냅니다.

자주 쓰이는 예제는 메뉴, 목차, 색인입니다.

 

3. aside

왼쪽 또는 오른쪽 사이드 부분을 나타내는 태그입니다.

문서의 주요 내용과 간접적으로만 연관된 부분을 나타내고 주로 사이드바, 콜 아웃 박스로 표현합니다.

 

4. section

본문의 여러 내용을 나타냅니다.

HTML 문서의 독립적인 구역을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.

 

5. article

마찬가지로 본문의 내용을 나타내지만 section과는 조금 다른 의미를 가집니다.

본문의 주 내용이 들어가고 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해

배포하거나 재사용할 수 있는 구역을 나타냅니다.

 

6. footer

웹의 하단 부분을 나타내는 태그입니다.

작성자, 저작권 정보, 관련 문서등의 내용을 담습니다.