DOCTYPE에 대하여 설명하시오
meta 태그에 대해서 알고 있나요?
meta 태그의 요소에 대해서 아는대로 말해보세요
doctype은 html5에서 웹 브라우저의 표준모드를 활성화 하기 위하여 사용합니다.
html living standard부터 doctype이 간소화 되었습니다.
doctype을 선언하지 않으면 quirks mode라는 하위호환성 모드로 진입합니다.
doctype은 <html> 태그 전에 사용하여야 합니다.
html5 이전 버전에서 사용하던 doctype 입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
</html><!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
</html>이렇게 명시해주는 이유는 브라우저가 컨텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 제공하기 위해 사용합니다.
html5 가 표준이 되면서 아래와 같이 변경되었습니다.
html5 버전부터는 아래와 같이 doctype을 선언합니다.
<!DOCTYPE html>
<html>
</html>
이러한 doctype을 선언하지 않으면 브라우저에서는 하위호환성 모드로 마크업을 표현할 수도 있습니다.
브라우저에는 하위 호환성 모드, 표준모드, 거의 표준모드 와 같은 모드들이 존재하는데
(하위 호환 모드는 오래된 브라우저에서를 위하여 렌더링 하고자 할때 사용됩니다.)
이렇게 되면 의도한 것과는 다르게 컨텐츠가 화면에 표시될 수도 있습니다.
웹 페이지를 표준모드로 렌더링 하기 위해서는 doctype을 선언해주어야 합니다.
표준모드로 렌더링 하여 모든 웹 브라우저에서 같은 레이아웃으로 제공될 수 있도록 해야합니다.
html5에서는 SGML과 호환될 수 없으므로 문서 형식 정의를 제공할 필요는 없습니다.(이전의 html에서 dtd를 통해 문서의 형식 정의를 제공하던 것과 같이 할 필요가 없어졌다.)
html5 에서 DOCTYPE의 유일한 목적은 표준모드를 활성화하기 위함입니다.
meta 태그는 해당 문서 혹은 application의 metadata를 담기 위한 요소입니다.
metadata는 데이터를 설명해주기 위한 데이터로 알고 있습니다.
대표적으로 charset, viewport, description, facebook에서의 open graph 요소가 있습니다.
<!-- charset, 문자 인코딩을 어떻게 할 것인지 결정-->
<!-- utf-8, 전세계 언어의 대부분을 지원 -->
<!-- DB의 charset과 맞춰서 선언해주는 것이 가장 바람직-->
<meta charset="utf-8">
<!-- viewport, 모바일, 태플릿 pc에서 화면을 어떻게 노출시킬지 알려주기 위하여 사용 -->
<!-- 해당 meta tag가 없으면 모바일 브라우저에서 이상하게 렌더링 됨 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO에 대한 도움을 주는 metadata -->
<meta name="description" content="웹 사이트에 대한 정보">
<!-- facebook -->
<!-- open graph protocol -->
<meta property="og:title" content="metadata element">
<meta property="og:description" content="metadata element">
<meta property="og:url" content="metadata element">
<meta property="og:image" content="metadata element">이중에 meta name="description"을 사용하지 않게 되면
크롤러가 웹페이지를 긁어 갈때 body 요소내부에서 의미있는 첫번째 것을 가져가게 됩니다.
메뉴명 혹은 로고가 긁어질 수도 있게 됩니다. 원하던 요소가 검색엔진에 노출되지 않을수 있게 됩니다.
출처 : http://www.tcpschool.com/html-tags/doctype
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
호환 모드와 표준 모드 - HTML: Hypertext Markup Language | MDN
과거 웹 페이지는 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)용의 두 가지 버전으로 만들어졌다. W3C에서 웹 표준을 제정할 당시, 기존
developer.mozilla.org
https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%ED%98%95%EC%8B%9D_%EC%84%A0%EC%96%B8
문서 형식 선언 - 위키백과, 우리 모두의 백과사전
'"문서 형식 선언"(Document Type Declaration) 또는 DOCTYPE이란 어떤 SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것이다. 본래 DTD에 기반한 SGML 도구를 이용해 문서
ko.wikipedia.org
'markup > html' 카테고리의 다른 글
| Html input pattern, setCustomValidity, reportValidity 👍 (0) | 2022.04.01 |
|---|---|
| Html picture tag 🏞 (0) | 2022.03.31 |
| Html button의 type 속성 (0) | 2022.03.19 |
| HTML 시맨틱 마크업 (0) | 2022.03.03 |
| label 태그 (0) | 2022.03.01 |
