[HTML 이해하기] 문서의 기본 구조
HTML의 기본 구조
HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 <html>요소로 구분한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML의 기본 문서</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
문서 타입 정의
문서 타입 정의는 보통 DTD(doctype)라고 부른다.
이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 한다.
doctype에는 여러 종류가 있는데, 현재는 위 예시코드처럼 HTML5 버전의 doctype을 주로 많이 사용하고 있다.
doctype을 선언하지 않거나 잘못 선언하게 되면 브라우저는 문서를 비표준 방식으로 이해하기 때문에 꼭 규칙에 맞는 doctype을 선언해주어야 한다.
doctype과 웹 표준에 관해서는 아래 링크를 참조하자.
https://sleepyeyes.tistory.com/23
[HTML] DOCTYPE 종류와 정리
HTML5의 등장으로 웹표준이 이제 정착해가고 있지만 아직도 HTML4.01이나 XHTML1.0을 사용하는 경우도 있기에 정리를 해본다. 왜 이러한 타입이 나뉘어져있는지 알려면 약간의 배경지식이 필요하다.
sleepyeyes.tistory.com
<html> 요소
문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>, <body>태그가 있다.
<html> 태그의 lang 속성은 문서가 어떤 언어로 작성되었는지를 의미한다.
<head> 태그에 위치하는 태그들은 브라우저 화면에 표시되지 않는다.
대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 한다.
<head>의 요소에 대한 간략한 설명은 아래 링크 참조
http://jun.hansung.ac.kr/cwp/htmls/HTML%20head.html
HTML head
HTML HTML 요소 <head> 요소는 모든 헤드 요소를 담는 컨테이너다. <head> 내부의 요소들로는 스크립트와 브라우저에게 스타일 시트가 어디에 있는지를 알려주는 것, 메타정보제공 등이 올 수 있다. 다
jun.hansung.ac.kr
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정한다.
<body> 태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 다루게 되는 태그들의 대부분은 여기에 해당한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML의 기본 문서</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
브라우저로 html파일을 열어본 화면이다.
<head>안에 있는 <title>태그의 내용이 문서의 제목으로 나타난 것을 볼 수 있다.
<body>안에 있는 Hello, HTML이 문서의 내용으로 나타났다.
위 코드는 가장 기본적인 문서 구조로, 보통은 이것보다 더 많은 태그가 들어가게 된다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| [HTML 태그] 앵커 요소 (0) | 2022.12.07 |
|---|---|
| [HTML 태그] 텍스트를 꾸며주는 요소 (0) | 2022.12.07 |
| [HTML 태그] 제목과 단락요소 (0) | 2022.12.07 |
| [HTML 이해하기] HTML 문법 (0) | 2022.12.06 |
| [HTML 이해하기] HTML 소개 (0) | 2022.12.06 |
