Anatomy of an HTML document
HTML 문서의 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
HTML document의 시작은 <!DOCTYPE html>로 시작한다.
A DOCTYPE is a required preamble. DOCTYPE은 필수적인 서문입니다.
DOCTYPEs are required for legacy reasons.
When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications.
Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.
해당 문서가 html로 작성되었다는 것을 알리기 위해 관용적으로 사용한다.
그렇기에 일정한 결과물을 원한다면 절대 을 빼먹지 말 것.
<html>
<html></html>은 root element로 페이지에 존재하는 모든 콘텐츠를 감싼다.
html은 기본적으로 head와 body로 나뉜다.
<head>
<head></head>는 html에 포함되지만 뷰어에게 보여주는 목적이 아닌 것들을 위한 공간이다.
This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more.
<meta charset=“utf-8”>은 메타데이터를 보여주는 element다.
charset=“utf-8”은 거의 모든 종류의 언어를 커버쳐준다.
There is no reason not to set this, and it can help avoid some problems later.
<title></title>은 해당 사이트가 브라우저 탭에 표시되는 _title_을 설정한다. 사용자가 북마크 시 이 _title_로 저장된다.
<body>
<body></body>는 페이지에 보이는 모든 콘텐츠를 포함한다.
meta
<meta charset="utf-8">
파일의 meta 데이터를 지정.
본문을 utf-8로 취급
whitespace in html
빈칸을 아무리 많이 만들어도 코드를 렌더링할 때 알아서 빈칸 하나로 줄인다.
가독성을 위해서 많은 칸을 띄어도 상관은 없다.
<p>Dogs are silly.</p>
<p>Dogs are
silly.</p>
<!— 위의 둘의 결과물은 같다.—>
Entity references: including special characters in HTML
Entity references are groups of characters used in text as a substitute for a single specific character.
| Literal character | Character reference equivalent |
| < | < |
| > | > |
| “ | “ |
| ‘ | ‘ |
| & | & |
의미
lt = less than
gt = greater than
quot = quotation
apos = apostrophe
amp = ampersand
특수문자를 사용할 경우 character reference equivalent를 사용하면 된다.
HTML comments
HTML 주석 처리하는 방법.
<!— 주석처리할 내용 —>
간단!