Reference/HTML

head 태그는 문서 정보에 해당하는 내용을 설정합니다.

by @webs 2022. 7. 4.

<head>

<head> 태그는 문서 정보에 해당하는 내용을 설정합니다. 웹 문서는 <head> 태그와 <body> 태그로 구성되어 있으며, head 요소에는 문서 정보에 해당되는 내용과 body 요소에는 문서 본문에 해당하는 내용을 작성합니다. head 요소에는 제목과 스크립트, 스타일 시트, 메타 정보 등이 포함되어 있습니다.

특징	설명
요소	블록 요소(Block Element)
닫는 태그	적용
버전	HTML4
시각적 표현	없음
사용성	★★★★★

정의(Definition)

<head> 태그는 문서 정보에 해당하는 내용을 설정합니다.
<head> 태그는 문서 정보에는 제목, 스크립트, 스타일, 메타 정보 등을 포함하고 있습니다.
<head> 태그에는 <title>, <base>, <link>, <style>, <meta>, <script>, <noscript>, <template> 요소만 올 수 있습니다.

문서와 관련된 태그(Document Related Tag)

<html> 태그는 문서의 최상단 요소를 나타냅니다.
<head> 태그는 문서 정보에 해당하는 내용을 설정합니다.
<body> 태그는 문서 본문에 해당하는 내용을 설정합니다.
<base> 태그는 문서의 기본 URL을 설정합니다.
<link> 태그는 문서의 외부 리소스를 설정합니다.
<meta> 태그는 문서의 메타 정보를 설정합니다.
<style> 태그는 문서의 스타일 정보 설정합니다.
<title> 태그는 문서의 제목을 설정합니다.

섹션과 관련된 태그(Section Related Tag)

<main> 태그는 문서의 주요 콘텐츠 섹션을 설정합니다.
<section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
<article> 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다.
<aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.
<header> 태그는 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다.
<nav> 태그는 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
<footer> 태그는 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.
<address> 태그는 문서 관련 연락처 콘텐츠 섹션을 설정합니다.
<h1>~<h6> 태그는 각 섹션의 제목을 설정합니다.

예제1(Sample)

기본 문서 샘플 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

예제2(Sample)

head 요소 안에 올 수 있는 요소 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">    <!-- 메타데이터 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <base href="https://webstoryboy.co.kr/">  <!-- 기본 주소 설정 -->
    <link rel="stylesheet" href="assets/css/style.css">  <!-- 스타일 설정 -->
    <script src="assets/js/style.js"></script>  <!-- 스크립트 설정 -->
</head>
<body>
    
</body>
</html>