크롬 확장프로그램 headingsMap으로 페이지의 헤딩 구조를 확인해보자!

크롬에는 다양한 확장 프로그램이 있다

저번에 넷플릭스에서 사용하면 유용한 크롬 확장 프로그램을 소개했었는데

이번에는 웹페이지를 제작할 때 사용하면 유용한 크롬 확장프로그램 중 하나를 소개하려 한다

웹 페이지를 제작할 때는 페이지의 헤딩 구조를 잘 짜는 것도 중요하다

페이지를 만든 후에 페이지의 헤딩 구조를 맞게 짰는지 일일히 확인하는 것도 일이 된다

그럴 때 크롬 확장프로그램 headingsMap을 사용하면 완전 꿀!!!

(나는 이미 설치해서 삭제 버튼이 노출되고 있음)

크롬 확장프로그램 headingsMap 설치하기

headingsMap을 설치하고 헤딩 구조를 확인를 페이지를 띄운다

나는 예시로 네이버를 띄운 후에 headingMap을 실행시킴

그러면 좌측에 크롬 확장 프로그램 HeadingMap이 뜨면서 현재 페이지의 헤딩 구조가 어떻게 되어있는지 보여준다

텍스트 앞에 쓰여있는 숫자는 heading 몇인지 고로 h1, h2, h3 태그를 표현한 것이다

이렇게 한눈에 보기 편하게 되어 있어서 잘못된 헤딩구조를 쉽게 찾아 볼 수 있다

웹 표준과 웹 접근성을 따져 본다면 페이지의 헤딩 구조는 중요하다

HTML 태그 중 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>는 heading을 지정하기 위해 사용한다

총 6단계로 <h1>이 가장 높고 <h6>이 가장 낮다

HTML heading elements에 대해 자세히 알고 싶다면 아래 링크를 클릭해 읽어보면 좋을 듯!

W3S - HTML heading elements

MDN - HTML heading elements

whatwg - HTML heading elements