[TIL] 0613

html heading 태그의 올바른 사용법에 대해 공부했다.
가장 중요한 규칙으로 아래 4개를 뽑아봤다.

1. 페이지당 한개의 h1을 사용
2. 논리적 구성의 목적이 아닌 경우의 사용 지양(강조 등)
3. h요소의 순서를 지켜 사용
4. 섹셔닝 엘리먼트에 필수로 사용

내가 잘못생각했던 점

1. 로고에 무조건 h1을 사용해야한다는 것.
   처음 마크업을 배웠을 때 로고는 무조건 h1으로 작성해야한다고 배워서 그냥 그거에 따라서 사용했다.
   하지만 올바른 사용법을 찾아보니 페이지 당 1개를 써야하고, 그 페이지를 나타내는 가장 제목이 되는 부분에 써야한다는 것을 알았다. logo는 모든 페이지에 있을 텐데 어떻게 페이지 당 한개만 써야한다는 걸까?라는 의문점이 들었다. 서치해보니 무분별하게 logo에 h1을 사용하는 것은 시맨틱하지 않다는 것을 알았다. 정보를 제공받는 입장에서 logo는 매 페이지에서 알려줘야 할 만큼 중요한 정보가 아니기 때문이다.

2. heading태그 구조의 범위를 한 페이지가 아닌 내가 임의로 설정함
   h1~h6의 구조 단위는 페이지여야하는데 내 마음대로 범위를 지정해서 사용했다.
   (ex-하나의 컨텐츠 아이템의 제목으로 h1을 사용) 그래서 한페이지에 엄청나게 많은 h1이 쓰였다.

간과하고 있었지만 heading태그는 매우 매우 중요하다는 것을 알게됐다. js나 리액트로 개발을 할 때 기능 구현에만 집중하는 것보다 가독성, 유지보수를 신경써서 개발해야하는 것처럼 마크업을 할 때에도 웹페이지만 구현하는것에만 초점을 맞추면 안되고, 사용자가 어떻게 정보를 소비할지를 우선적으로 생각해가면서 기계와 사람 모두 읽기 좋게 작성해야한다는 것을 느꼈다.