[HTML] HTML 기본 문서 구조 :: Whatever can happen will happen

ABOUT ME

-

인스타그램

Today: -

Yesterday: -

Total: -

[HTML] HTML 기본 문서 구조

🌐 FrontEnd/HTML & CSS 2022. 5. 6. 16:59

HTML 기본 문서 구조

1. 태그

태그는 소문자로 씁니다.
- 예) <img src="사진.jpg">

여는 태그와 닫는 태그를 정확히 입력합니다. (닫는 태그가 없는 태그도 있습니다)
적당히 들여씁니다.
태그는 속성과 함께 사용됩니다.
- 예) <img src="사진.jpg" width="150" height="160">

인코딩 방식은 utf-8 로 합니다.
- 예) <meta charset="utf-8">

2. HTML 문서 기본 구조

(1) <!DOCTYPE> - 문서 유형을 지정하는 선언문

웹 브라우저에게 '이제부터 처리할 문서는 HTML 문서이고, 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라' 라고 명시해 주는 것입니다.
기본형 : <!DOCTYPE html> 또는 <!doctype html> -> 현재 문서가 HTML5 언어로 작성됨을 알려줍니다.

(2) <html> ~ </html> - 웹 문서의 시작과 끝을 알리는 태그

실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그입니다.
lang 이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있습니다.
- 예) <html lang="ko">

<html> 태그와 </html 태그 사이에는 문서 정보를 지정하는 <head> 부분과 실제 화면에 보이는 문서 내용을 입력하는 <body> 태그가 포함됩니다.

(3) <head> ~ </head> - 브라우저에게 정보를 주는 태그

웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들을 입력해두는 곳입니다.
<title> 태그 : 브라우저의 제목 표시줄에 표시되는 내용을 지정합니다.
- 예) <title> 문서 제목 </title>

<meta> 태그 : 문자 인코딩 방법 및 문서의 키워드와 요약 정보를 지정합니다.
- 예) <meta charset="utf-8">

<link> 태그 : 문서에서 사용할 외부 파일들의 링크를 연결합니다.
- 예) <link rel="stylesheet" href="mail.css">

(4) <body> ~ </body> 태그 - 실제 브라우저에 표시될 내용

실제 브라우저에 표시될 내용을 입력하는 곳입니다.
대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용됩니다.

'🌐 FrontEnd > HTML & CSS' 카테고리의 다른 글

[HTML] 폼 관련 태그와 예제 - 1 (0)	2022.05.15
[HTML] 이미지와 하이퍼링크 관련 태그와 예제 (0)	2022.05.09
[HTML] 텍스트 관련 태그와 예제 - 2 (0)	2022.05.08
[HTML] HTML 특수문자 사용법 (0)	2022.05.07
[HTML] 텍스트 관련 태그와 예제 - 1 (0)	2022.05.07

관련글 관련글 더보기

댓글

인기포스트

ABOUT ME

LINK

ADMIN

티스토리툴바