2022-03-02 HTML_3 (HTML 문서의 구성)

2022. 3. 4. 15:37FE/HTML

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;
> &gt;
" &quot;
' &apos;
& &amp;


의미

lt = less than

gt = greater than

quot = quotation

apos = apostrophe

amp = ampersand

 

특수문자를 사용할 경우 character reference equivalent를 사용하면 된다.

 


HTML comments

HTML 주석 처리하는 방법.

<!— 주석처리할 내용 —>

간단!

'FE > HTML' 카테고리의 다른 글

2022-07-18 HTML_6  (0) 2022.07.18
2022-07-16 HTML_5  (0) 2022.07.17
2022-03-04 HTML_4  (0) 2022.03.04
2022-03-01 HTML_2  (0) 2022.03.01
2022-02-27 HTML_1  (0) 2022.02.28