HTML head/body 구조
head는 문서를 설명하고 body는 사용자가 보는 내용을 담는다. 둘을 구분해야 메타 정보와 화면 구조가 섞이지 않는다.
| 영역 | 담는 내용 | 사용 예 | 주의점 |
|---|---|---|---|
| head | 문서 제목과 메타데이터 | title, meta charset, viewport | 보이는 제목 h1을 넣지 않음 |
| resource | 스타일과 외부 파일 연결 | link stylesheet, preload | 불필요한 차단 리소스 주의 |
| script | 동작 코드 연결 | defer, module | 렌더링을 막는 위치인지 확인 |
| body | 화면에 표시되는 콘텐츠 | header, main, footer | 의미 없는 중첩 div 남발 |
| flow | 브라우저의 파싱 순서 | head 준비 후 body 렌더 | 메타 정보와 콘텐츠 역할 혼동 |
head/body 구분은 “보이는가”보다 문서를 설명하는 정보인지, 화면 콘텐츠인지로 판단한다.