시맨틱 태그에는 아주 많은 종류가 있어요.
그 중 이번 글에서는 <h1>과 <header> 에 대해 알아봅시다!
<h1>
태그가 속해있는 섹션의 제목을 나타냅니다.
<section>
<!-- 이 섹션의 주요 키워드는 "제목1"입니다. -->
<h1> 제목1 </h1>
<!--
<p>에 포함되어있는 내용도 <h1>과 같은 섹션으로 묶여있기 때문에
"제목1"에 관한 내용으로 분석되어요.
-->
<p>내용1</p>
<p>내용2</p>
</section>
<h1> 부터 <h6> 까지 있으며, 뒤의 레벨(1~6)는 제목의 위계를 의미해요.
<h1>은 가장 최상위 섹션의 제목,
<h2>는 서브 섹션의 제목,
<h3>는 서브 섹션의 부제목 등의 순서로 사용됩니다.
제목 요소는 하위에 따라오는 내용을 하나의 섹션으로 묶어요.
자신보다 높은 위계의 제목 요소를 만나기 전까지 하나의 섹션으로 구분해요.
<body>
<h1>시맨틱 태그 공부하는 방법</h1>
<h2>학습하기</h2>
<p>MDN에 나와있는 시맨틱 태그 정의를 학습한다.</p>
<h2>예시 찾아보기</h2>
<h2>직접 구현해보기</h2>
<h3>MDN 클론코딩</h3>
</body>
<!-- 위의 코드는 아래의 코드와 동일한 의미를 갖습니다. -->
<body>
<!-- 시맨틱 태그 공부하는 방법 섹션 -->
<h1>시맨틱 태그 공부하는 방법</h1>
<section>
<!-- 학습하기 섹션-->
<h2>학습하기</h2>
<p>MDN에 나와있는 시맨틱 태그 정의를 학습한다.</p>
</section>
<section>
<!-- 예시 찾아보기 섹션-->
<h2>예시 찾아보기</h2>
</section>
<section>
<!-- 직접 구현해보기 섹션 -->
<h2>직접 구현해보기</h2>
<section>
<!-- MDN 클론코딩 섹션 -->
<h3>MDN 클론코딩</h3>
</section>
</section>
</body>
두 개 이상의 <h1>를 사용할 수 있습니다.
여러 개의 최상위 태그가 올 수 있어요.
다만, 최상위 태그가 정말로 동일한 위계(중요도)인지 고려가 필요합니다.
다른 위계라면 다른 레벨을 사용해야합니다.
<!-- ❌ -->
<div>
<!-- 제목1과 부제목2는 위계가 같지 않다. 따라서 구분을 해야한다. -->
<h1> 제목1 </h1>
<h1> 제목2 </h1>
</div>
<!-- ⭕️ -->
<div>
<!-- 제목1과 제목2는 동일한 위계이기 때문에 h1으로 선언해도 괜찮다.. -->
<h1> 제목1 </h1>
<h1> 제목2 </h1>
</div>
위계를 어기면 안됩니다.
레벨의 숫자가 작을수록 더 큰 카테고리를 의미하고,
레벨의 숫자가 클 수록 하위 카테고리를 의미해요.
만약 태그를 사용할 때 역순으로 사용하게 된다면
검색엔진이 페이지를 의도한대로 분석하지 못하게 되어요.
<!-- ❌ -->
<h3>예제</h3>
<section>
<h2>예제1</h2>
<h2>예제2</h2>
<!-- h3의 하위섹션에 h2이 왔다. -->
</section>
<!-- ⭕️ -->
<h2>예제</h2>
<section>
<h3>예제1</h3>
<h3>예제2</h3>
<!-- h2의 하위섹션에 h3이 왔다. -->
</section>
위계를 건너뛰면 안됩니다.
<h1> 부터 <h6>까지 건너뛰는 순서없이 순서대로 사용해야 합니다.
만약 순서를 건너뛴다면 검색엔진이 페이지를 분석할 때 혼란을 야기할 수 있어요.
<!-- ❌ -->
<body>
<h3>예제</h3>
<h5>고려사항</h5> <!-- h4태그 없이 h5가 왔다 -->
</body>
<!-- ⭕️ -->
<body>
<h1>예제</h1>
<h2>고려사항</h2>
</body><header>
제목, 로고 등 페이지의 소개 및 탐색에 도움을 주는 콘텐츠를 포함합니다.
일반적으로 제목 요소 (<h1> ~ <h6>)를 포함하지만 필수는 아닙니다.
<header>
<h1>Shelly log</h1>
<p> 반갑습니다!! </p>
<img src="images/shelly_logo.jpg">
</header>
<header>는 섹션을 구분하는 용도가 아닙니다.
<h1>태그를 사용하면 그 하위의 내용은 하나의 섹션으로 인식되었습니다.
이것이 섹션을 구분한다는 의미예요!
하지만 <header>는 여러 태그들을 감싸고 있긴 하지만,
섹션을 구분하는 역할을 하진 않습니다.
<main>
<header>
<h1>Shelly Log</h1>
<h2>소개글</h2>
<p>포기할 수 없는 경험을 주고싶은 개발자 Shelly 입니다.</p>
<h2>사용 기술</h2>
</header>
<p>React + Typescript</p>
</main>
<!-- 위의 코드와 아래 코드는 동일한 의미로 간주됩니다.-->
<main>
<!-- Shelly Log 색션-->
<h1>Shelly Log</h1>
<section>
<!-- 소개글 섹션-->
<h2>소개글</h2>
<p>포기할 수 없는 경험을 주고싶은 개발자 Shelly 입니다.</p>
</section>
<section>
<!-- 사용기술 섹션 -->
<h2>사용 기술</h2>
<p>React + Typescript</p>
</section>
</main>
<header> 하위에는 <header>, <footer> 태그가 올 수 없습니다.
<!-- ❌ -->
<main>
<header>
<header>중첩된 header는 올 수 없습니다.</header>
<footer>header 내부에 footer가 올 수 없습니다.</footer>
</header>
</main>추천글
[HTML] 시맨틱 태그(Semantic Tag) 가볍게 알아보기
시맨틱 태그 설명 시맨틱 태그란 의미 있는 태그를 뜻합니다. 평소에 어떻게 마크업을 작성하시나요?만약 아래와 같은 페이지를 구현한다고 할 때, 어떻게 마크업 하실 건가요? div만 사용한
shelly-log.tistory.com
'개발 > HTML' 카테고리의 다른 글
| [CSS] Stacking Context 쌓임 맥락 쉽게 이해하기 (0) | 2025.03.09 |
|---|---|
| [HTML] 시맨틱 태그(Semantic Tag) : section, article, div 차이 (0) | 2024.07.07 |
| [HTML] 시맨틱 태그(Semantic Tag)로 좋은 사이트 만드는 방법 (2) | 2024.07.03 |
