본문 바로가기
Study/HTML + CSS

HTML 문서 기본구조

by arthur_noh 2022. 4. 23.

코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title test</title>
  </head>

  <body>
    body content
  </body>
</html>

결과

태그 설명

<!DOCTYPE html>
문서의 첫 유형을 지정하는 단일 태그이다.
이때 문서 유형이란 웹 브라우저에게 "이 문서는 HTML 형식이다"라는 메시지를 전달하는 것과 같다.
현재 표준으로 사용되고 있는 HTML 을 사용하기 위해 적어주는 타입이 html 이다.

 

 

<html> </html>
문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다.

 

<head> </head>

웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아야 할 정보들이 이 태그 안에 들어간다.

<meta charset="utf-8"> 
문자 인코딩 및 문서 키워드 등에 대한 요약정보를 기입하는 단일태그이다. 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.

<title> </title>
문서의 제목을 나타낸다. 콘텐츠는 브라우저 탭에 표시된다.

 

 

<body> </body>
실제 브라우저 화면에 표시될 내용을 입력하는 태그이다.
여기에는 다음과 같은 유형의 태그들이 포함될 수 있다.

- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그

기본 문서 구조를 통해 확인했듯, 태그안에 태그를 포함시키는 방식으로 콘텐츠를 다양하게 구성할 수 있다.

 

'Study > HTML + CSS' 카테고리의 다른 글

[CSS] rem, em 차이  (0) 2022.04.23
HTML 기본 지식  (0) 2022.04.23