[HTML] HTML 페이지의 구조 및 태그 알아보기
by 캐떠린HTML 문서 구조
- 태그는 트리구조(계층구조)로 되어있다.(★★★★★)
- 메모리에 로딩된 트리구조 → DOM
HTML 문서 확장자
- *.html
- *.htm
HTML 페이지의 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1. DOCUTYPE
- 문서 유형
- DTD라는 언어로 선언된 선언문
- 이 문서를 읽는 웹 브라우저에게 ‘이 문서는 이런 유형의 문서다.’ 라고 알려주는 역할 ⇒ 때문에 반드시 첫 행에 나와야 한다.
- <!DOCTYPE html>: 이 문서는 HTML5로 작성된 문서입니다.
2. <html> </html>
- 루트 태그
- 문서 전체를 감싸고 있는 역할
- 스스로 하는 일은 없다 → 문서 컨테이너 역할
- 모든 HTML 페이지의 기본 요소로, 모든 태그는 이 html 태그 내부에 작성한다.
html 태그의 속성
- lang: 웹 브라우저 동작에는 영향을 주지 않고, 구글 같은 검색 엔진이 웹 페이지를 탐색할 때 해당 웹 페이지를 어떤 언어로 작성했는지 쉽게 알 수 있도록 도와주는 역할. ex) <html lang="en">
| lang 속성 값 | 언어 |
| ko | 한국어 |
| en | 영어 |
| ja | 일본어 |
| ru | 러시아어 |
| zh | 중국어 |
| de | 독일어 |
3. <head> </head>
- 문서의 머리말 역할
- 브라우저에게 전달할 내용을 작성
- 내부 정보
head 태그 내부에 넣을 수 있는 태그 종류
- meta: 웹 페이지에 추가 정보 전달
- <meta charset="UTF-8">: "브라우저야 이 문서를 UTF-8로 읽으렴"
- title: 페이지 제목 지정
- script: 웹 페이지에 스크립트 추가
- link: 웹 페이지에 다른 파일 추가
- style: 웹 페이지에 스타일 시트 추가
- base: 웹 페이지의 기본 경로 지정
4. <body> </body>
- 문서의 본문 역할
- 사람에게 전달할 내용을 작성 → 출력할 내용을 작성
- 출력 정보
HTML 주석
- 형식: <!-- -->
- 입력 단축키: (Visual Studio Code 기준) Ctrl + /
*글 작성에 참고한 내용: 학원 쌤의 열정적인 수업
'HTML' 카테고리의 다른 글
| [HTML] <head> 태그 (0) | 2024.03.20 |
|---|---|
| [HTML] HTML 언어의 구성 요소 (0) | 2024.03.20 |
| [HTML] 공백문자, 특수문자 :: HTML의 공백 문자 처리 방법 및 특수문자 표기법 (0) | 2024.03.20 |
| [HTML] HTML이란? (0) | 2023.09.20 |
| [HTML] 개발 환경 Setting(Apache Tomcat, Eclipse) (0) | 2023.09.20 |
블로그의 정보
All of My Records
캐떠린