HTML Head 태그와 title, meta, style 태그의 기능


HTML Head

<head> 태그는 <body> 태그 상단에 위치하며, <head> 태그로 표현합니다.

<head> 태그는 <body> 태그를 설명합니다. <head> 태그는 <body> 태그를 검색엔진 같은 외부 컴퓨터에 설명하는 것이 주요 목적인 태그입니다.


<body> 태그 사이의 데이터는 내용을 사람에게 전달하는 것이 목적입니다. <head> 태그 사이의 값은 <body>의 데이터를 컴퓨터에게 설명하기 위한 태그입니다.

<html>
  <head>
    <title>head의 정의</title>
    <meta charset = "UTF-8">
  </head>
  <body>
    <h1></h1>
      <p></p>
  </body>
</html>

<title> 태그

<title> 태그는 <body> 태그의 제목을 컴퓨터에게 전달합니다.

<html>
  <head>
    <title>컴퓨터에 전달하는 제목</title>
  </head>
  <body>
    <h1></h1>
      <p></p>
  </body>
</html>

<style> 태그

style은 속성과 태그 두 가지 용도로 사용됩니다. 태그 뒤의  style 속성은 개별 태그의 글자 서식 변경, 색 변경 등에 사용됩니다.

하지만 가장 많이 사용되는 용도는 <style> 태그로써의 역할입니다. <head> 사이에 삽입됩니다.

<head> 태그 사이에서 <style> 태그 사이에 적용된 값들을 CSS라고 부릅니다.

<html>
  <head>
    <style>
      h1 {
        color: red;
      }
      p {
        font-family: 궁서체;
      }
    </style>
  </head>
  <body>
    <h1>글씨색이 빨강으로 변합니다.</h1>
      <p>글씨체가 궁서체로 변합니다.</p>
  </body>
</html>


<meta> 태그

<meta> 태그는 문자의 표시 방법, 문서의 내용 요약 등을 컴퓨터에게 전달합니다.

<meta charset>

charset은 character set의 약자입니다. 문자 셋팅이라는 의미입니다.

전세계에는 여러 언어들을 컴퓨터 코드로 원활하게 변환하기 위해서 UTF-8과 같은 속성 값을 사용합니다.

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1></h1>
      <p></p>
  </body>
</html>

<meta name=”description”>

description 값은 <body> 태그 사이의 본문을 요약하는 역할을 합니다. description 뒤에 적힌 설명은 컴퓨터와 사람에게 모두 중요한 역할을 합니다.

description 뒤에 적힌 설명은 검색 엔진에서 검색을 했을 경우 사이트 마다 나오는 요약 설명에 해당합니다. 검색 엔진은 description에 적힌 요약을 먼저 보고 문서를 분류합니다.

사람은 검색 결과에서 사이트의 요약문을 보고, 해당 사이트에 접속할지 결정합니다. description 값은 웹브라우저에서 보이지 않습니다.

<html>
  <head>
    <meta name="description" content="UFO의 진실과 관련된 내용을 살펴봅니다.">
  </head>
  <body>
    <h1></h1>
      <p></p>
  </body>
</html>