ข้อมูลอ้างอิงHTML

HTML โดยตัวอักษร HTML ตามหมวดหมู่ รองรับ HTML Browser แอตทริบิวต์ HTML HTML Global Attributes เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ ชุดอักขระ HTML HTML Doctypes การเข้ารหัส URL HTML รหัสภาษา HTML รหัสประเทศ HTML ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด


HTML <head>แท็ก


ตัวอย่าง

เอกสาร HTML อย่างง่ายที่มีแท็ก <title> อยู่ในส่วนหัว:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง


ความหมายและการใช้งาน

องค์ประกอบ<head>นี้เป็นคอนเทนเนอร์สำหรับข้อมูลเมตา (ข้อมูลเกี่ยวกับข้อมูล) และวางไว้ระหว่างแท็ก <html> และแท็ก <body>

ข้อมูลเมตาคือข้อมูลเกี่ยวกับเอกสาร HTML ไม่แสดงข้อมูลเมตา

โดยทั่วไปข้อมูลเมตาจะกำหนดชื่อเอกสาร ชุดอักขระ ลักษณะ สคริปต์ และข้อมูลเมตาอื่นๆ

องค์ประกอบต่อไปนี้สามารถเข้าไปภายใน<head>องค์ประกอบได้:


รองรับเบราว์เซอร์

Element
<head> Yes Yes Yes Yes Yes


คุณสมบัติสากล

แท็ ก<head>ยังสนับสนุน Global Attributes ในHTML


ตัวอย่างเพิ่มเติม

ตัวอย่าง

แท็ ก<base> (ระบุ URL เริ่มต้นและเป้าหมายสำหรับลิงก์ทั้งหมดบนหน้าเว็บ) จะอยู่ภายใน <head>:

<html>
<head>
  <base href="https://www.w3schools.com/" target="_blank">
</head>
<body>

<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>

</body>
</html>

ตัวอย่าง

แท็ ก<style> (เพิ่มข้อมูลรูปแบบให้กับหน้า) เข้าไปภายใน <head>:

<html>
<head>
  <style>
    h1 {color:red;}
    p {color:blue;}
  </style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

ตัวอย่าง

แท็ ก<link> (ลิงก์ไปยังสไตล์ชีตภายนอก) อยู่ภายใน <head>:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>

</body>
</html>

หน้าที่เกี่ยวข้อง

กวดวิชา HTML: HTML Head

การอ้างอิง HTML DOM: Head Object


การตั้งค่า CSS เริ่มต้น

เบราว์เซอร์ส่วนใหญ่จะแสดง<head>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:

head {
  display: none;
}