HTML 구조 작성 기준 · 제목 태그를 어떻게 쓰나

HTML 제목 태그는 글자를 크게 만드는 장식이 아니라, 문서의 목차를 기계가 읽을 수 있게 표시하는 구조 태그다. H1은 그 페이지 전체가 무엇에 관한 글인지 한 번 선언하고, H2는 그 아래 큰 단락의 주제를, H3는 특정 H2에 속하는 하위 주제를 나타낸다. 크기와 굵기는 CSS가 정하고 태그는 계층만 정한다. 그래서 실무 기준은 세 줄로 압축된다. 첫째, 페이지당 H1은 하나이고 그 페이지의 주제를 담는다. 둘째, 단계를 건너뛰지 않는다. H2 다음에 H4를 쓰지 않는다. 셋째, H3는 자기가 속한 H2 바로 아래에 놓고 다른 H2의 내용을 담지 않는다. 이 셋을 지키면 화면 낭독기, 검색 엔진 크롤러, AI 답변 생성기가 모두 같은 목차를 읽는다. 셋 중 하나만 무너져도 사람 눈에는 멀쩡한 글이 기계에는 순서가 뒤엉킨 문서로 보인다.

제목 태그는 목차이지 글자 크기가 아니다

가장 흔한 사고는 여기서 시작한다. "이 줄은 좀 커야 하니까 H2로 하자." 편집기에서 H2를 누르면 실제로 글자가 커지니 그렇게 믿게 된다.

하지만 크기는 결과이지 이유가 아니다. 브라우저가 H1을 크게 그리는 건 기본 스타일시트에 그렇게 적혀 있어서일 뿐이고, CSS 한 줄이면 H3를 H1보다 크게 만들 수도 있다. 태그가 진짜로 전달하는 정보는 딱 하나다. "이 줄부터 새 단락이 시작되고, 그 단락은 이 문서 안에서 몇 번째 깊이에 있다."

이 정보를 실제로 소비하는 쪽이 있다. 화면 낭독기 사용자는 제목만 훑어서 원하는 곳으로 건너뛴다. 검색 엔진은 본문을 덩어리로 나눌 때 제목 계층을 경계 후보로 삼는다. AI 답변 도구도 질문에 맞는 덩어리를 골라 인용하는 쪽에 가깝다. 셋 다 CSS를 보지 않는다.

그래서 판단 순서를 뒤집어야 한다. "커야 하니까 제목"이 아니라 "새 주제가 시작되니까 제목"이다. 크기가 필요한데 새 주제는 아니라면, 그건 제목이 아니라 스타일 문제이고 CSS나 strong 태그로 풀 일이다.

태그별로 실제 역할이 무엇인가

문서 구조를 잡을 때 자주 헷갈리는 태그들을 역할 기준으로 정리하면 이렇다.

표에서 첫 줄과 둘째 줄의 관계를 자주 놓친다. title과 H1은 같은 주제를 가리키지만 같은 문장일 필요는 없다. title은 검색 결과와 탭에서 홀로 읽히므로 맥락을 더 담아야 하고, H1은 페이지 안에서 읽히므로 조금 더 짧아도 된다.

H1은 왜 하나로 두는 편이 안전한가

기술적으로는 H1이 여러 개인 문서도 유효하다. HTML 문법 오류가 아니고, 브라우저도 그대로 그린다. 그런데도 하나를 권하는 이유는 문서를 읽는 쪽에 있다.

H1이 두 개라는 건 이 문서에 최상위 주제가 두 개라는 뜻이다. 낭독기 사용자가 목차를 훑으면 "이 페이지는 무엇에 관한 글인가"라는 질문에 답이 두 개로 돌아온다. 문서 자체가 "이 페이지의 주제는 이것"이라는 신호를 한 곳으로 모으지 못하는 셈이다.

현실에서 H1이 늘어나는 경로는 대개 셋이다. 헤더의 로고를 H1으로 감싼 템플릿, 목록 페이지에서 카드 제목마다 H1을 쓴 컴포넌트, 그리고 본문 편집기에서 소제목에 H1을 누른 경우다. 앞의 둘은 템플릿 문제라 한 번 고치면 전 페이지가 함께 낫는다.

예외는 있다. 한 화면에 독립된 문서 여러 개가 나란히 놓이는 구조, 예컨대 카드마다 완결된 글이 들어가는 피드형 레이아웃에서는 각 카드가 자기 제목 계층을 갖는 편이 자연스럽다. 이때도 페이지 자체의 H1은 따로 하나 있는 편이 낫고, 카드 제목은 H2나 H3로 내리면 대부분 해결된다.

과거 HTML 논의에는 section 요소마다 제목 단계가 새로 시작된다는 개념이 있었다. 다만 이 개념대로 동작하는 브라우저나 보조기술은 확인된 적이 없고, 낭독기가 실제로 읽어 주는 건 여전히 H1에서 H6까지의 숫자다. section으로 감쌌으니 안에서 H1을 다시 써도 된다는 판단은 그래서 위험하다.

단계를 건너뛰면 무엇이 깨지나

H2 다음에 바로 H4를 쓰면 화면에는 아무 일도 일어나지 않는다. 글자가 조금 작아질 뿐이다. 깨지는 건 눈에 안 보이는 쪽이다.

화면 낭독기 사용자는 제목 단계를 소리로 듣는다. "제목 수준 2, 발행 전 점검", "제목 수준 4, 링크 확인"이라고 읽히면 사이에 있어야 할 수준 3이 어디로 갔는지 알 수 없다. 내가 지금 어느 단락 안에 있는지 감각이 끊긴다. 목차 위젯이나 문서 개요 도구도 같은 지점에서 이상해진다. 비어 있는 단계를 채우려고 없는 계층을 만들어내거나, 아예 평평하게 늘어놓는다.

기계 추출 쪽에서도 손해가 난다. 본문을 덩어리로 나누는 쪽은 대개 제목 단계를 경계로 삼는다. 단계가 뛰면 어디까지가 한 덩어리인지 판정이 흔들리고, 인용될 때 엉뚱한 범위가 함께 딸려갈 수 있다.

고치는 방법은 단순하다. 건너뛴 자리를 채우거나, 태그를 한 단계 올린다. 크기가 마음에 안 드는 게 이유였다면 CSS에서 그 단계의 크기를 조정한다. 문서 구조를 스타일 때문에 왜곡하는 순간 두 가지를 다 잃는다.

올바른 목차와 망가진 목차는 어떻게 다른가

같은 내용을 두 방식으로 구성해 보면 차이가 분명해진다.

오른쪽 목차를 텍스트만으로 읽으면 무슨 문서인지 알기 어렵다. 왼쪽은 제목만 읽어도 글의 뼈대가 그려진다. 이게 판정 기준이다. 제목만 뽑아서 목록으로 늘어놓았을 때 글의 요약처럼 읽히면 구조가 맞은 것이고, 단어 조각들의 나열로 보이면 어딘가 틀린 것이다.

H3는 어느 H2 아래에 붙이나

규칙 자체는 짧다. H3는 바로 위 H2가 다루는 주제의 부분집합이어야 한다. 그런데 실제로 틀리는 지점은 배치가 아니라 내용이다.

자주 나오는 형태가 이렇다. "가격" H2 아래에 "가격표", "결제 수단", "환불 규정" H3 세 개를 둔다. 앞의 둘은 가격의 하위 항목이 맞지만 환불 규정은 다른 주제에 가깝다. 위치는 규칙을 지켰는데 목차는 이미 어긋났다.

점검 방법이 하나 있다. H3 제목 앞에 "이 H2 중에서"를 붙여 읽어 본다. "가격 중에서 가격표", "가격 중에서 결제 수단"은 말이 되고, "가격 중에서 환불 규정"은 어색하다. 어색하면 그 H3는 다른 H2로 옮기거나 자기가 H2가 되어야 한다.

반대 방향의 실수도 흔하다. H3가 하나뿐인 H2다. 나눌 게 하나밖에 없다면 나눌 이유가 없다. 그 H3는 대개 지워도 되고, 내용은 H2 본문에 흡수된다. 목록이 필요하면 제목이 아니라 리스트를 쓴다.

긴 글에는 제목이 몇 개나 필요한가

정해진 정답은 없다. 다만 판단 기준은 있다. 독자가 스크롤하다 멈췄을 때 "지금 무슨 이야기 중이지"를 되묻게 되면 제목이 부족한 것이다.

작업용 눈금으로는 화면 한두 번 분량마다 제목 하나 정도가 쓸 만하다. 한국어 본문 기준으로 대략 500자에서 800자 사이다. 이건 연구 결과가 아니라 편집 관행이고, 글의 성격에 따라 달라진다. 절차 문서는 더 촘촘해야 하고, 하나의 논지를 밀고 가는 에세이는 더 성겨도 된다.

제목 없는 벽 같은 본문이 실패하는 지점은 두 곳이다. 사람 쪽에서는 진입점이 없다. 이 글이 내 문제를 다루는지 확인하려면 처음부터 읽는 수밖에 없고, 대부분은 그 전에 떠난다. 기계 쪽에서는 인용 단위가 없다. 답변에 쓸 만한 문단이 안에 들어 있어도, 그 문단의 시작과 끝을 무엇으로 자를지 판단할 근거가 없다.

반대로 너무 잘게 쪼갠 글도 실패한다. 두세 문장마다 제목이 붙으면 목차가 본문보다 길어지고, 각 덩어리는 혼자 읽었을 때 아무 정보도 담지 못한다. 제목 하나가 담당하는 내용이 최소한 한 문단은 되어야 한다는 게 실무 하한선이다.

질문형 제목이 AI 답변에 더 잘 걸릴까

이건 확정된 규격이 아니라 구조에서 나오는 추론이다. "질문형 제목을 우대한다"고 밝힌 공개 명세나 공식 문서는 없다. 그래도 그렇게 보는 이유는 설명할 수 있다.

사람이 AI 검색에 입력하는 건 대개 질문이다. "H1 몇 개까지 괜찮아?" 같은 형태다. 우리 글이 실제로 인용되는지는 순위처럼 조회할 수 없어서 직접 물어보고 기록하는 수밖에 없는데, 그 절차는 AI 답변 인용 확인 기준에 정리해 두었다. 문서 안에 "H1 개수"라는 명사구 제목과 "H1은 왜 하나로 두는 편이 안전한가"라는 질문형 제목이 있다면, 질문끼리 형태가 맞는 쪽이 걸릴 가능성이 높다고 보는 게 자연스럽다.

더 중요한 건 그다음이다. 질문형 제목을 달면 글쓴이가 바로 아래 문단에서 답부터 쓰게 된다. 명사구 제목 아래에는 배경 설명이 먼저 오는 경우가 많다. 인용 후보가 되기 쉬운 건 답이 들어 있는 문단이고, 그 문단이 제목 바로 뒤에 있으면 잘라내기 쉬운 덩어리가 된다.

그래서 실용적인 절충안은 이렇다. 전부 질문형으로 만들지 않는다. 목차가 심문처럼 읽힌다. 독자가 실제로 검색창에 칠 법한 문장, 즉 판단이 필요한 대목만 질문형으로 두고 나머지는 명사구로 둔다. 그리고 질문형 제목 아래 첫 문단은 반드시 결론으로 시작한다.

강조하려고 제목 태그를 쓰는 실수

문단 중간에서 한 줄만 눈에 띄게 하려고 H3를 누르는 경우가 있다. 화면에서는 목적을 달성한다. 목차에서는 재앙이다.

낭독기로 목차를 훑는 사용자에게 그 줄은 새 단락의 시작으로 읽힌다. "제목 수준 3, 이 점을 꼭 기억하세요"라고 들리면 뒤에 별도 섹션이 있으리라 기대하는데 실제로는 앞 문단이 이어질 뿐이다.

구분은 간단하다. 그 줄 뒤로 새 주제가 시작되면 제목이고, 앞 내용의 일부를 강조하는 것이면 제목이 아니다. 후자에는 strong 태그, 인용 블록, 배경색을 넣은 박스 같은 수단이 따로 있다.

같은 이유로 제목에 문장 부호를 잔뜩 넣거나 제목 안에 링크를 여러 개 거는 것도 피하는 편이 좋다. 제목은 목차 항목으로 홀로 읽히는 문구다. 앞뒤 맥락 없이 읽었을 때 무슨 내용이 나올지 알 수 있으면 충분하고, 그 이상은 대개 방해가 된다.

제목과 검색 결과에 뜨는 문구는 별개다

제목 구조를 다듬으면 검색 결과 문구도 그대로 따라올 것이라 기대하기 쉬운데, 그렇지 않다.

구글은 검색 결과에 보여줄 설명 문구를 페이지에서 자동으로 고른다고 문서에 밝혀 두고 있다. meta description을 쓸 수도 있고, 질의에 더 맞는다고 판단하면 본문에서 뽑아 쓸 수도 있다. 제목 태그를 잘 짰다고 해서 특정 문장이 스니펫으로 노출되도록 강제할 수는 없다.

그래도 구조는 간접적으로 작용한다. 잘라내기 좋은 덩어리가 많은 문서일수록 골라 쓸 후보 문단이 많다. 제목 바로 아래 문단이 결론부터 담고 있으면 그 문단이 후보가 될 확률이 올라간다. 보장이 아니라 확률의 문제라는 점만 정확히 이해하면 된다.

구글의 검색엔진 최적화 기본 가이드도 제목 태그를 문서의 구조를 나타내는 수단으로 설명한다. 순위를 올리는 장치가 아니라 내용의 구성을 알려주는 표식이라는 관점이 공식 설명 쪽에 더 가깝다.

제목 구조는 어떻게 점검하나

발행 직전에 확인할 항목을 표로 두면 빠뜨리지 않는다.

가장 값싸고 정확한 방법은 다섯째 줄이다. 제목만 복사해서 따로 붙여 놓고 읽어 본다. 도구도 계정도 필요 없고, 구조 문제의 상당수가 이 단계에서 드러난다.

브라우저 개발자 도구를 열 수 있다면 접근성 패널의 문서 개요를 보는 방법도 있다. 낭독기가 실제로 읽는 계층과 가장 가까운 형태로 보여준다. 같은 패널에서 이미지의 대체 텍스트도 함께 드러나므로, alt 태그 작성 기준의 점검 항목을 한 번에 같이 처리하면 두 번 열 일이 없다.

이 규칙을 어디까지 지켜야 하나

모든 페이지에 같은 강도를 적용할 필요는 없다. 우선순위를 나눠 두면 실무가 훨씬 가벼워진다.

긴 글, 즉 안내 문서와 블로그 포스트에서는 위 기준을 전부 지키는 게 맞다. 이런 페이지는 제목 구조가 곧 읽는 경로다.

랜딩 페이지처럼 시각적 구성이 앞서는 화면에서는 H1 하나와 섹션별 H2 정도만 지켜도 대개 충분하다. 디자인상 큰 글자가 필요한 문구는 제목 태그 대신 CSS로 처리하고, 진짜 섹션 제목만 H2로 남긴다.

목록 페이지에서는 카드 제목의 단계를 통일하는 게 핵심이다. 개별 카드가 H1을 갖는 구조만 피하면 나머지는 크게 문제되지 않는다.

여기서 정직하게 말해 둘 부분이 있다. 어느 정도까지 다듬어야 성과가 달라지는지는 사이트 상황에 따라 다르다. 색인 자체가 안 되고 있는 사이트라면 제목 계층보다 먼저 볼 게 있고, 이미 트래픽이 있는 사이트라면 구조 정리가 인용 가능성에 영향을 줄 수 있다. 지금 어느 단계인지 모르는 채로 순서를 정하면 노력의 절반이 새는 셈이다.

자주 묻는 질문

H1이 두 개면 검색 순위가 떨어지나요?

떨어진다고 단정할 근거는 없습니다. H1 개수를 순위 요소로 든 공식 설명은 찾기 어렵고, H1이 여러 개인 페이지도 검색 결과에 잘 나옵니다. 다만 페이지의 주제 신호가 갈라지고, 화면 낭독기 사용자에게는 최상위 주제가 두 개로 들립니다. 순위를 위해서가 아니라 문서가 명확해지기 때문에 하나로 정리하는 편이 좋습니다.

디자인상 H3가 H2보다 커야 하는데 어떻게 하나요?

CSS로 크기를 바꾸면 됩니다. 태그의 단계와 화면에 보이는 크기는 서로 독립적이어서, h3의 글자 크기를 h2보다 크게 지정해도 문서 구조는 그대로 유지됩니다. 크기 때문에 태그 단계를 바꾸는 순간 구조가 왜곡되므로, 이 경우는 항상 CSS 쪽에서 해결하는 것이 맞습니다.

제목에 키워드를 꼭 넣어야 하나요?

억지로 넣을 필요는 없습니다. 제목은 그 섹션이 무슨 내용인지 알려주는 문구이고, 내용을 정확히 설명하다 보면 관련 단어는 자연스럽게 들어갑니다. 모든 H2에 같은 키워드를 반복해 넣으면 목차만 읽었을 때 섹션끼리 구분이 안 되어 오히려 손해입니다.

제목을 몇 개까지 늘려도 되나요?

상한선을 두기보다 각 제목이 실제 단락 하나 이상을 담당하는지로 판단하시면 됩니다. 두세 문장마다 제목이 붙으면 목차가 본문만큼 길어지고 각 덩어리가 혼자서는 아무 정보도 주지 못합니다. 긴 안내 문서라면 H2가 열 개를 넘는 것도 자연스럽습니다.

FAQ 질문은 H2로 해야 하나요, H3로 해야 하나요?

FAQ 전체를 묶는 H2를 하나 두고 개별 질문을 H3로 두는 구성이 일반적입니다. 각 질문이 FAQ 섹션의 하위 항목이라는 관계가 그대로 드러나기 때문입니다. 질문 하나하나가 독립된 큰 섹션 분량이라면 H2로 올릴 수도 있지만, 그때는 FAQ라는 묶음이 필요한지부터 다시 보는 편이 좋습니다.

참고 자료

• 검색엔진 최적화 기본 가이드 — 제목 태그와 문서 구조에 대한 구글의 공식 권장사항
• 검색결과 스니펫 관리하기 — 구글이 페이지에서 검색 결과에 표시할 내용을 고르는 방식