본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

제목 요소

최초 작성일
최종 수정일
이번 시간에는...
HTML 문서에서 제목을 나타내는 h 요소들(h1~h6)을 살펴봅니다. 이 h 태그, 헤드라인 테그들을 통해 검색엔진과 접근성 향상을 위한 문서의 구조화, 문서 개요가 어떻게 이루어 지는 지 살펴 봅니다.

이제 본격적으로 body 요소에 들어가는 요소들을 알아 보겠습니다. 그 중 첫 시작은 바로 헤드라인(Headline) 요소입니다. 이 요소는 제목들을 나타내는 요소로써, 모든 글에서 제목들이 매우 중요하듯, 웹 페이지의 콘텐츠 내용에 있어서 매우 중요한 요소입니다. 참고로 헤드라인 요소들은 다 블록(block) 요소입니다.

헤드라인 요소, h1, h2, h3 ...

헤드라인 요소는 아래와 같이 사용합니다.

h1은 '헤드라인(Headline) 1'을 줄여 만든 것입니다. 헤드라인은 h1부터 시작해서 h6까지 쓸 수 있으며, 숫자가 높아질 수록 보다 하위 제목이 됩니다. 실제로 이 태그를 사용하고 웹 브라우저로 확인해 보면 글씨 크기가 h1이 제일 크고, 숫자가 높아질 수록 작아집니다.

제가 처음 HTML 서적을 접했을 때에, 서적에서 이 헤드라인 요소들을 단지 글씨 크기 정도로만 다뤘기 때문에, 이런 요소가 대체 왜 굳이 있나 싶어 아예 사용하지 않았습니다. 이러한 이유 때문인지 실제 현업에 있는 사람들 중에도 이 헤드라인 요소에 대해서 잘 모르고 사용하지 않는 분들도 종종 있었습니다.

헤드라인과 문서개요

하지만, 이 헤드라인 요소는 웹 페이지에서 매우 중요한 요소입니다. 해당 웹 페이지에 대한 개요를 이 헤드라인 요소를 기준으로 파악하기 때문입니다. 예를 들어 다음과 같은 글이 있다고 봅시다. 전에 'HTML 소개' 강의에서 썼던 내용입니다.

HTML

역사

개발
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.
~ 중략 ~
버너스리의 개인적인 기록에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.

최초 규격
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
출처 : 위키피디아

위의 글의 개요를 만들어 봅시다.

  • HTML
    • 역사
      • 개발
      • 최초 규격

우선 가장 먼저 가장 큰 제목은 분명 'HTML' 일 것입니다.

그 다음 '역사'가 다음 제목이고요, 그 '역사' 아래에 각각 '개발''최초 규격'이 있습니다.

그럼 이것을 헤드라인 요소들로 대입해 보겠습니다.

가장 큰 제목 'HTML'h1 요소가 되겠습니다. 그 다음 '역사'h2 요소가 되고, '개발''최초 규격'h3 요소가 됩니다. 이런 식으로 h6까지니까 총 6단계까지 제목을 쓸 수 있습니다.

이번에는 반대로 마크 업이 된 것을 가지고 개요를 유추해 보겠습니다. 아래의 코드를 보고 개요를 짜보세요.

답은 이렇습니다.

  • 마크업
    • HTML 요소
      • HTML 요소의 일반적인 형태
      • HTML 요소의 가장 보편적인 형태
    • 데이터 형식
    • 문서 형식 선언
  • 시맨틱 웹
  • 전송

그럼 또 다른 마크 업을 보고서 개요를 만들어 보죠, 위와 같은 내용이지만, h 숫자를 바꿔보도록 하겠습니다.

숫자를 뒤죽박죽 넣었습니다. 위는 어떻게 될까요?

아래와 같이 보여집니다.

      • h3. 마크업
  • h1. HTML 요소
      • h3. HTML 요소의 가장 일반적인 형태
    • h2. HTML 요소의 가장 보편적인 형태
      • h3. 데이터 형식
          • h5. 문서 형식 선언
  • h1. 시맨틱 웹
            • h6. 전송

여기서 볼 수 있듯이, 헤드라인 요소는 하위 번호는 이전 상위 번호에 종속됩니다. 만약 h1 다음에 온 h2 는 그 전의 h1의 종속된 내용이죠, 하지만 만약 h3 다음에 h2가 온다면, 앞의 h3와는 별개로 새로운 섹션이 시작되는 것입니다. 또한 위의 코드는 순서를 순차적으로 안 쓰고 h1 다음에 h2가 아닌 바로 h6을 넣어 줬는데요, 일단은 이렇게 해도 h6가 h1에 종속되는 것은 변함이 없습니다만, 최대한 순차적으로 체계적으로 작성해 주는 것이 좋습니다.

검색엔진은 여러분의 웹 페이지를 방문하고서 페이지의 컨텐츠를 인식할 때에 이 개요를 통해서 어떠한 내용이 중요하고 어떠한 내용이 페이지에서 덜 중요한 내용 인지를 파악합니다. 그렇기 때문에, 여러분은 웹 페이지를 제작 시에 가장 중요한 제목 부분에 h1 요소를 사용하시기 바랍니다.

예를 들어 신문 기사라면 신문 제목에 h1요소를 쓸 것이고, 쇼핑몰의 상품 페이지라면 상품 명에다 사용할 것 입니다. 지난 title 요소와 비슷합니다. 보통 title 요소와 h1 요소의 내용은 비슷하게 들어갑니다.

물론 글씨 크기가 크게 보여서 안 쓰고 싶으실지 모르겠지만, 외형적인 부분은 css로 모두 작업을 하기 때문에 마크 업에 있어서는 정말 순수한 의미 만을 염두 해두고 작업하시기 바랍니다.

요점 정리
  • HTML 문서는 h 요소를 통해서 문서 개요를 구조화
  • h1에서 h6로 갈 수록 맥락의 단계는 세부로 내려감
  • 숫자가 낮은 h요소는 앞에 자신보다 높은 h 요소의 하위 제목이 됨
  • h1은 페이지의 가장 중요한 제목을 사용

이 글이 유용하셨다면 친구들에게 공유 해주세요.