html heading outline - part2

part1에서 헤딩 태그에 대해서 알아보았다.

오늘은 1.영역별 타이틀 지정, 2.조금 더 의미있는 영역 구분과 타이틀 지정에 대해 알아보려고 한다.

 

 

1. 그럼 영역별 타이틀은 어떻게 지정하지?

방법은 아주 간단하다. 영역을 감싸는 최상위 태그 안에서 헤딩태그를 써주면 된다.

아래 이미지를 보면 h1태그로 첫번째 div 영역의 타이틀을 지정해주고,  두번째 div 영역에 h2태그로 타이틀을 지정해주었다.

문서의 아웃라인은 이렇게!

 

위의 예시는 헤딩 태그의 순서에 따라 지정이 되는건지 아니면 태그의 포함관계에 의한 타이틀 지정인지가 살짝 헷갈릴 수 있겠다. 그래서 딱히 그럴 일은 없겠지만 같은 h1태그로 각 영역의 타이틀을 지정해서 아웃라인을 확인하는 테스트를 해보았다.

div를 사용하였을때에는 헤딩태그의 순서에 따라 아웃라인이 지정된다는 것을 확인하였다.

 

 

2. 영역별 타이틀을 지정할 때 조금 더 의미있게 하려면 어떻게 해야하지? 🤔

HTML5에서 제목 지정하는법!

html5부터는 단순히 div태그로 영역을 구분하던 것을 조금 더 의미있게 영역 지정을 할 수 있는 태그들을 추가하였다. 이 태그들은 시멘틱 태그라고 불리며, 시멘틱 태그를 사용함으로써 SEO(검색엔진), 스크린리더 사용자, 개발자들이 웹사이트의 아웃라인를 더 쉽게 파악할 수 있게 되었다.

 

태그의 종류가 많아 다 설명할 수는 없지만 대표적인 몇가지만 정리하겠다.

<header> 헤더 
<footer> 푸터 
<nav> 메뉴 
<main> 본문
<article> 독립적 영역, 플로우 컨텐츠(주로 게시판 등에 사용)
<section> 일반 구획 구분
<aside> 문서와 간접적으로 연관된 별도 구획(사이드 바, 콜아웃 박스)

 

회색표시는 아래와 같으니 참고!

HTML Aside 섹션 요소(<aside>)는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.
HTML Navigational 섹션 요소(<nav>)는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.
HTML Header 섹션 요소(<header>)는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.
HTML Footer 섹션 요소(<footer>)는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.

 

 

 

시멘틱태그를 사용해서 html문서를 작성해보았다. (헤딩태그는 일부러 작성하지 않았다.)

nav, section태그는 제목이 없는 00이라고 아웃라인이 지정되는 것을 볼 수 있다. (html5 outliner에서는 nav도 잡나보다)

반면에 div로 영역을 지정한 경우 아웃라인을 가지고 있지 않다는 것을 확인할 수 있었다.

div로 영역을 지정해주는 것 보다는 조금 더 시멘틱하게 html을 작성하는 것이 중요하다는 것을 명심하자.

 

이제 헤딩태그를 지정해주어 내가 의도한대로 문서의 아웃라인을 지정해주도록 하겠다.

이 테스트에서 두가지의 궁금한 점이 생겼다.

왜 nav와 section에 h1 태그로 타이틀을 지정했는데 아웃라인이 바디의 아래로 들어가는가?

왜 '문서 타이틀 1-2'는 h3태그를 사용했는데 h2태그를 사용한 '문서 타이틀 1-1'과 같은 라인에 있는가?

 

mdn 문서 상에서 아래와 같은 답변을 찾을 수 있었다.

html5의 아웃라인 규칙은 '처음 쓰인 html 제목요소(h1~h6)가 해당 섹션의 제목으로 지정된다'를 기본으로 하지만, section 사용 시 제목 간 계급의 상대적 등급은 오로지 같은 section 안에서만 유효하다.

>> 가장 상위의 section에 붙인 헤딩태그가 최상위 타이틀이 된다!

 

이해가 안될까싶어서 이미지 하나 더 첨부!

 

이렇게 section안에 또 section이 있는 구조가 아니라면

기본적으로 사용했던 헤딩태그 규칙을 따르면 된다.

 

 

 

이 외에도 너무 많은 내용이 있어서 자세한건 MDN 문서 참고하면 좋을 듯하다😃

 

참고: developer.mozilla.org/ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines

HTML 구획과 개요 사용하기 - 웹 개발자 안내서 | MDN