헤딩 태그란 웹 페이지 영역에서 제목 문구를 담당하는 HTML 태그이다.
<aside> 💡 블로그 글의 제목, 뉴스 기사의 제목, 공지사항 글의 제목 등등
</aside>
사용하려는 제목의 용도, 영향력에 따라서 h1부터 h6 태그까지 다양하게 사용할 수 있다. h6 태그까지 있지만, 일반적으로는 h3 혹은 h4 태그 까지만 사용된다. 태그의 숫자가 높아질수록 비중이 점점 작아진다고 생각하면 된다.
| 태그명 | h1 태그 | h2 태그 | h3 태그 |
|---|---|---|---|
| 사용처 | 페이지 대표 제목 | 섹션별 제목 | 섹션 하위 아이템별 제목 |
<h1>네이버 뉴스</h1>
<h2>국내 뉴스</h2>
<h3>올해 2023년, 국내 만나이 도입된다.</h3>
만약 아래의 페이지가 있다고 가정해보자. 아래 페이지에서 각각 h1, h2, h3 태그를 지정한다면, 어느것이 각각 해당될까?
h1 태그: 페이지 대표 제목을 의미, 현재 진행중인 채용공고입니다. 문구가 h1 태그에 해당되는 제목이다.h2 태그: 페이지안에 다양한 섹션으로 나누었을때, 해당 섹션의 제목이 해당된다. 현재 페이지에서는 하나의 분류로 볼 수 있는 권용빈님께 추천해요! 문구와 개발 채용 공고 문구가 h2 태그에 해당되는 제목이다.h3 태그: 섹션 하위에 있는 아이템별 제목이 해당된다. h2 태그 권용빈님께 추천해요! 섹션의 콘텐츠 아이템들의 제목, 즉 지금 한국의 UX 라이터가 꿈꾸는 것, AI로 애니메이션 만들기 문구가 h3 태그에 해당되는 제목이다.
<!DOCTYPE html>
<html>
<body>
<h1>이것은 h1 제목입니다.</h1>
<h2>이것은 h2 제목입니다.</h2>
<h3>이것은 h3 제목입니다.</h3>
<h4>이것은 h4 제목입니다.</h4>
<h5>이것은 h5 제목입니다.</h5>
<h6>이것은 h6 제목입니다.</h6>
</body>
</html>
문단 태그란, 페이지 콘텐츠에서 설명란, 본문 등의 제목의 역할을 하지 않고 설명을 목적으로 작성된 글을 감싸는 태그이다.
네이버 뉴스 웹 페이지를 통해서 예시를 살펴보자.
해당 뉴스 기사에서 제목을 담당하는 문구는 [출근길 인터뷰] 서울공예박물관으로 오세요! 이다. 그리고 뉴스 본문 내용들이 문단 태그로 감싸서 보여주는 영역이다.