HTML 문서 구조를 이루는 html, head, body 태그


HTML 문서 제목과 내용

HTML 문서 구조는 Word 같은 일반 문서 처럼 제목을 나타내는 <h1> 태그와 내용을 구성하는 <p> 태그로 구성됩니다.

인간이 보는 문서는 대부분 제목과 내용으로 구성됩니다.


단지 내용의 종류가 이미지, 링크, 표, 게임, 동영상, 음성 파일 등의 차이가 있을 수 있습니다.

<h1>HTML 기본 문서 구조</h1>
  <p>HTML 기본 문서 구조는 제목을 나타내는 h1 태그와 내용을 나타내는 p 태그로 구성됩니다.</p>

HTML <body> 태그

Word 문서달리 HTML 문서는 제목과 내용으로 작성된 문서의 데이터는 <body> 태그 사이에 위치해야 한다는 점입니다.

<body>
  <h1>BODY 태그의 쓰임새</h1>
    <p>h1 태그의 제목과 p 태그의 내용은 body 태그 사이에 위치합니다.</p>
</body>

<html> 태그

<body> 태그로 감싸진 HTML 문서는 <html> 태그 사이에 위치합니다.

<html>
  <body>
    <h1>html 태그의 쓰임새</h1>
      <p>body 태그로 감싸진 문서는 다시 한 번 html 열고 닫는 태그로 감쌉니다.</p>
  </body>
</html>


<head> 태그

<head> 태그는 <body>태그에 적힌 데이터를 컴퓨터에게 효과적으로 전달하기 위한 요약 등의 기능을 합니다.

HTML 문서는 컴퓨터와 인간 사이의 매개체를 하는 언어이기 때문입니다.

<head> 태그는 <html> 태그와 <body> 태그 사이에 삽입됩니다.

<html>
  <head>
    <meta charset = "UTF-8">
    <title>head의 의미</title>
  </head>
  <body>
    <h1>head 태그의 쓰임새</h1>
      <p>head 태그는 body 태그의 데이터를 컴퓨터에게 요약 설명하는 기능을 합니다.</p>
  </body>
</html>

<!DOCTYPE html>

<html> 태그로 둘러싸인 HTML 문서의 맨 상단에는 <!DOCTYPE html> 이라는 빈 태그(Empty Tag)가 관용적으로 삽입됩니다.

HTML 문서에서 삽입된 복잡한 부가 기능 등을 모두 제거하면 아래와 같은 기본 구조를 벗어나지 않습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>DOCTYPE 선언의 의미</title>
  </head>
  <body>
    <h1>!DOCTYPE 쓰임새</h1>
      <p>html 열고 닫는 태그로 감싸진 HTML 문서의 맨 앞에는 관용적으로 !DOCTYPE HTML 이라는 태그를 삽입합니다.</p>
  </body>
</html>