[HTML] Heading 요소를 디자인(글씨 크기)을 위해서 사용하면 안된다.

HTML Heading 요소(<h1> 등)는 구획, 의미를 생각해서 사용해야 한다

당연히 알고 계신 분이 많을 수도 있는데, 나는 잘 인식하지 못하고 있었다.ㅜㅜ
처음에 HTML 문법을 배울 때 h1을 쓰면 제일 크고 두꺼운 글자가 나오고, h6을 쓰면 작고 얇은 글자가 나오는 것 정도만 기억했다. 그래서 지금까지 구획..보다는 디자인(글씨 크기, 두께 등)을 위해서 이 태그들을 사용할 떄가 많았다. ㅠㅠ

회사에서 한 페이지에 <h1> 태그를 두 개 넣었는데, 코드 리뷰에서 그러면 안된다고 알려주셔서 찾아봤다.

일단 HTML Heading 요소는 <h1>, <h2>, ... , <h6> 등 제목을 나타낸다. 그런데 단순한 제목이 아니다. MDN 문서에 "HTML 요소는 6단계의 구획 제목을 나타냅니다."라고 한다. 구획! 레이아웃! 과 관련있는 제목이다. 이 heading 요소가 페이지 콘텐츠들의 레이아웃을 잡아준다. 스크린 리더를 사용하는 사용자들이나 크롤러가 이런 정보를 이용한다고 한다!

HTML 구획 제목 요소 MDN 문서에서 "글씨 크기를 위해 제목 태그를 사용하지 마세요. ", "페이지 당 하나의 h1만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 h1이 모범 사례로 꼽힙니다. " 라는 문구도 있다!
나는 이것들을 어기고 있었다.ㅠ heading 요소는 쉽고 고려할 게 별로 없다고 생각했는데, 아니었다. 문서를 잘 읽고 사용해야지 !