사실 프로젝트를 하다보면 HTML 태그를 사용하면서 크게 고민하지 않고 div 태그를 많이 사용했었다ㅠ
이번 기회에 HTML 시맨틱 태그를 다시 한 번 정리해보면서 최대한 div 태그 외에 요소에 적합한 태그를 사용하려고 했다.
Hyper Text Markup Language (Hyper Text (웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어)
포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그
- HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와준다!
- HTML5부터 시맨틱 태그가 등장하게 됨
사진 출처 시맨틱 태그란? - 태그 요소의 종류와 이점
💡 스타일 지정이나 스크립팅 목적으로 필요한 경우를 제외하고는
<div>
와 같은 의미가 없는 요소나 속성을 사용하지 않아야 한다!
<header> | 로고나 제목 등이 포함된 페이지 상단 |
---|---|
<footer> | 저작권이나 연락처, 소셜 미디어 계정 링크가 포함된 하단 |
<main> | 페이지의 주요 콘텐츠를 감쌈 |
<section> | 페이지를 여러 주제나 하위 제목 등 목록을 형성 |
<article> | 독립적인 글을 다루는 데 사용하는 태그(블로그 게시물, 뉴스 기사, 제품 리뷰 등 독립적으로 배포하거나 재사용할 수 있는 독립형 콘텐츠) |
<aside> | 옆에 위치하는 콘텐츠를 담는 태그(페이지 콘텐츠를 제외한 콘텐츠를 정의, 사이드바) |
<details> | 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그(사용자는 버튼을 통해 열고 닫을 수 있음) |
<summary> | <details> 태그의 첫 번째 하위 항목, 보이는 부분을 담당 |
<figure> | 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정 |
<figcaption> | <figure> 요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용 |
<nav> | 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의 |