DOCTYPE
Document type의 약자로, 받아온 html 문서의 버전을 표시하여 브라우저가 표현해야 될 내용을 정확하게 표현하도록 선언하는 역할
만약 선언하지 않을 경우 Quirk mode라는 구형 브라우저 지원용 호환 타입으로 document를 표현하기때문에 원치않게 표현될 가능성이 높아진다.
Meta tag
해당 document의 상세정보를 나타내기 위한 태그.
메타 태그는 검색 엔진에 의한 상위노출에 큰 역할을 한다. (메타 태그는 여러개를 설정할 수 있으며 잘 설정할수록 상위 검색으로 올라간다)
메타 테그는 속성 이름인 name과, 항목의 옵션을 지정하는 content로 이루어진다 (name은 http-equiv로 대체가능)
대표적인 값들을 나열하자면
이 외에도
- viewport (반응형 제작을 위해 꼭 필요. device-width로 설정해주는게 좋다)
- publisher
- Filename
등 많은 내용을 담고 있다. 특히, 캐싱과 관련한 컨트롤을 이 메타태그에서 하고있음을 기억한다. ( 즉, 서버가 전송할때부터 해당 정보를 담고 전달 )
시맨틱 태그란
문서에 존재하는 태그들을 의미론적으로 구분하여 작성하는 마크업 방법을 말한다.
Html w3c의 권고안에 따라 표준화된 문서 작성의 기준점이 발표되고, 이에 맞추기 위해 문서의 각 요소들을 의미별로 나누어 설정하도록 권고한다
웹사이트가 브라우저마다 동일한 형태로 보이게 하도록 크로스 브라우징을 커버하기 위한 작업의 기초이다.
예를들어, header 컴포넌트를 작성할 때 그냥 div로 작성하기보다 명확하게
라는 시멘틱 태그를 이용하는 것과 같다
위 사진은 시맨틱 태그로 이루어진 document를 outliner와 같은 구조분해 사이트를 이용해 트리형태로 확인되는 결과물이다.
