HTML heading 태그 h1부터 h6까지 순서 정리

HTML heading 태그 h1부터 h6까지 순서에서 먼저 볼 부분

heading 태그는 글자 크기보다 문서의 목차 구조를 만드는 역할이 중요합니다. h1부터 순서대로 내려가면 페이지 의미가 더 선명해집니다.

h1부터 h6까지의 태그는 단순히 글자를 크게 만드는 도구가 아닙니다. 검색엔진, 브라우저, 화면 읽기 도구가 페이지 구조를 이해하는 데 사용하는 제목 체계입니다.

한 페이지의 대표 제목은 보통 h1 하나로 잡고, 큰 구역은 h2, 그 안의 세부 주제는 h3처럼 내려가는 방식이 자연스럽습니다.

디자인 때문에 h3가 더 예뻐 보여서 h1 대신 쓰는 것은 좋지 않습니다. 글자 크기와 스타일은 CSS로 조절하고, heading 태그는 의미에 맞게 고르는 편이 안전합니다.

제목 순서가 안정되면 글을 읽는 사람도 현재 위치를 이해하기 쉽습니다. 긴 튜토리얼이나 가이드 글일수록 제목 구조가 콘텐츠 품질에 큰 영향을 줍니다.

제목 구조 예시

<main>
  <h1>JavaScript 입문 가이드</h1>
  <section>
    <h2>변수 이해하기</h2>
    <h3>const와 let의 차이</h3>
  </section>
</main>

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

HTML 글은 화면에 보이는 모양보다 문서가 어떤 의미로 읽히는지를 먼저 봅니다.

브라우저 개발자 도구의 Elements 탭에서 실제 태그 구조가 예상대로 만들어졌는지 확인하면 오류를 줄일 수 있습니다.

검색엔진과 보조 기술은 태그의 의미를 참고하므로, 단순히 div로 감싸기보다 상황에 맞는 태그를 선택하는 습관이 좋습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 페이지 대표 제목을 h1으로 두기
• 큰 구역은 h2부터 나누기
• 크기 조절은 CSS로 처리하기
• h2 다음 세부 항목은 h3로 내려가기