티스토리 뷰

프론트엔드/HTML

[HTML] ③ HTML 문서 골격 만들기

doeunnkimm 2022. 7. 4. 13:51

골격을 작성하는 것은 문서의 성격과 정보를 정확하게 나타내며 정상적인 페이지 노출에 중요한 역할을 합니다..

 

▶DOCTYPE

<DOCTYPE>은 문서의 타입을 지정합니다.

DOCTYPE은 html로 지정하면 HTML5로 작정된 문서임을 나타냅니다.

모던 브라우저에서는 DOCTYPE을 명시하지 않아도 HTML5로 작성된 문서로 인식하지만 IE9 이전 버전의 브라우저는 다른 형태의 문서로 인식합니다.

따라서 일관된 렌더링을 위해 DOCTYPE을 반드시 명시하는 것이 중요합니다.

<!DOCTYPE html>

 

 

▶html

<html>태그는 문서의 루트 지점을 명시하는 태그입니다.

이 태그를 작성할 때는 lang 속성을 해당 서비스 국가에 맞게 넣는 것이 중요합니다.

lang 속성을 지정해 이 문서의 언어가 스크린 리더 등의 장치에서 일관되게 판단되도록 해야 합니다.

다국어를 지원하는 서비스라면 언어가 변경될 때 lang 속성 또한 함께 변경해야 합니다.

<!DOCTYPE html>
<html lang="ko">
	<!-- lang 속성에 한국 언어 식별자 "ko" 할당 -->
</html>

 

 

▶head

<head> 태그는 문서의 제목과 문서의 인코딩 형식 등을 지정합니다. 자주 사용되는 중요한 요소들을 함께 살펴보겠습니다.

 

▷title

<title> 요소는 문서의 이름(제목)을 나타냅니다.

문서당 한 개의 제목 요소가 있어야 하며 사용자 북마크나 검색 엔진에서 식별하는 기준으로 사용됩니다.

<!DOCTYPE html>
<html lang="ko">
	<head>
    	<title>문서의 제목입니다.</title>
    </head>
</html>

위 코드의 실행 화면은 다음과 같습니다.

 

▷meta

<meta> 태그에서는 메타 데이터를 다룹니다.

메타 데이터는 '데이터에 대한 데이터', '어떤 목적으로 만들어진 데이터'를 의미하며, 주로 기계가 읽고 이해하는 정보입니다.

<meta> 태그를 통해 인코딩 방식, 뷰포트 지정뿐만 아니라 더 많은 작업을 수행할 수 있습니다.

 

- charset: 문서의 인코딩 방식을 지정합니다. 인코딩 방식을 지정하지 않으면 문자 깨짐 현상이 발생할 수 있습니다.

<head>
	<meta charset="UTF-8" />
</head>

 

- http-equiv: http-equiv와 content 속성을 이용해 IE의 렌더링 사양을 좀 더 세밀하게 조절합니다. X-UA-Compatible 값을 IE=Edge로 지정한다면 렌더링 시 최신 Edge 모드를 사용합니다.

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>

 

 

▷body

<body> 태그에는 문서의 내용이 들어가며 일반적으로 <head> 태그 다음에 작성합니다.

지금까지 살펴본 기본 요소들을 종합하여 간단한 문서의 골격을 작성해 보면 다음과 같습니다.

<!DOCTYPE html>
<hrml lang="ko">
	<head>
		<title>문서의 제목입니다.</title>
    </head>
    <body>
		<!-- 문서의 내용-->
        문서의 내용을 작성해봅시다.
    </body>
</html>

위의 코드를 실행해보면 다음과 같습니다.

 

 

 

여기까지 HTML 문서 골격에 대해 알아봤습니다 :)

728x90
LIST

'프론트엔드 > HTML' 카테고리의 다른 글

[HTML] ⑤ SEO(Search Engine Optimization): 검색엔진최적화  (0) 2022.07.06
[HTML] ④ 시맨틱(Semantic)  (0) 2022.07.04
[HTML] ② HTML 요소 분류하기  (0) 2022.07.03
[HTML] ① HTML 소개  (1) 2022.07.02
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함