HTML <head> 태그

정의 및 사용법

<head> 요소는 메타 데이터（데이터에 대한 데이터）의 컨테이너이며, <html> 태그 및 <body> 태그 사이에 위치할 수 있습니다.

메타 데이터는 HTML 문서에 대한 데이터입니다. 메타 데이터는 표시되지 않습니다.

메타 데이터는 문서 제목, 문자 집합, 스타일, 스크립트 및 다른 메타 정보를 정의합니다.

다음 요소는 <head> 요소 내에:

상세 설명

<head> 태그는 문서의 헤더를 정의하며, 모든 헤더 요소의 컨테이너입니다.<head> 요소는 스크립트를 참조할 수 있으며, 브라우저가 스타일 시트를 어디에서 찾을지 지시하거나 메타 정보를 제공할 수 있습니다.

문서의 헤더는 문서의 여러 가지 속성과 정보를 설명합니다. 예를 들어, 문서의 제목, 웹 내 위치 및 다른 문서와의 관계 등을 포함합니다. 대부분의 문서 헤더에 포함된 데이터는 독자에게 실제로 표시되지 않습니다.

모든 HTML 문서는 head 요소를 포함해야 하며, head 요소는 다음을 포함해야 합니다: title 요소.

<title> 태그 문서의 제목을 정의하고, head 부분에서 유일하게 필수적인 요소입니다.

추가로 참조:

HTML 강의:HTML 헤더

HTML DOM 참조서:Head 객체

예제

예제 1

간단하지만 완전한 HTML 문서는 head 부분에 <title> 태그를 포함하고 있습니다：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>문서의 제목</title>
  </head>
  <body>
    <h1>이는 제목입니다</h1>
    <p>이는 문단입니다.</p>
  </body>
</html>

직접 시험해 보세요

예제 2

<base> 태그（페이지에 모든 링크의 기본 URL과 대상을 지정），<head> 내에 위치

<html>
  <head>
    <base href="https://www.codew3c.com/" target="_blank">
  </head>
<body>
  <img src="pic/tree.png" width="150" height="161" alt="Tree">
  <a href="tags/tag_base.asp">HTML base 태그</a>
</body>
</html>

직접 시험해 보세요

예제 3

<style> 태그（페이지에 스타일 정보 추가），<head> 내에 위치

<html>
  <head>
    <style>
      h1 {color:red;}
      p {color:blue;}
    </style>
  </head>
  <body>
    <h1>하나의 제목</h1>
    <p>하나의 구절.</p>
  </body>
</html>

직접 시험해 보세요

예제 4

<link> 태그외부 스타일 시트에 링크된 것, <head> 내에 위치:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>링크 스타일 시트를 사용하여 형식화했습니다.</h1>
    <p>저도 같습니다!</p>
  </body>
</html>

직접 시험해 보세요

전역 속성을 지원합니다

<head> 태그는 또한 HTML의 전역 속성.

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <head> 요소:

head {
  display: none;
}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원