head 요소와 문서 정보

개념 이해하기

head에는 title, meta, link, style, script처럼 문서 자체를 설명하는 정보가 들어갑니다. header는 body 안에서 보이는 머리말 영역이므로 이름은 비슷하지만 역할이 완전히 다릅니다. 실습실은 body 안의 코드를 바로 실행하므로, 이 예제에서는 실제 head를 바꾸는 대신 head와 header의 역할을 화면에 비교합니다.

예제는 dl을 비교표처럼 써서 dt에 요소 이름을, dd에 그 역할을 적었습니다. 요소 이름은 <와 > 엔티티로 적었기 때문에 실제 head나 header가 만들어지지 않고 code 안의 글자로만 표시됩니다. CSS가 dd의 기본 왼쪽 들여쓰기를 margin: 6px 0 0으로 없애서 설명이 용어 바로 아래에 붙습니다.

파서는 head 안에서 화면에 보일 요소를 만나면 그 자리에서 head를 닫고 body를 시작합니다. 그래서 head에 실수로 p를 넣으면 그 뒤에 있던 meta나 link가 body 안으로 들어가 트리가 의도와 달라집니다. 문서 하나에 head는 하나뿐이지만 header는 article이나 section마다 따로 둘 수 있습니다.