HTML The Head Element

แท็ก <head> ใน HTML เป็นเหมือนคอนเทนเนอร์ไว้ใส่ Element อื่นๆ เช่น <style> <meta> <link> <script> และ <base>

ความหมายของ `<head>`

แท็ก <head> ใช้สำหรับ เก็บข้อมูลเมตา (metadata) หรือ ข้อมูลเกี่ยวกับข้อมูลในหน้าเว็บ (data about data) โดยจะวางไว้ระหว่างแท็ก <html> และ <body>

ข้อมูลเมตาใน HTML จะ ไม่ถูกแสดงบนหน้าเว็บโดยตรง แต่จะบอกถึงรายละเอียดต่าง ๆ เช่น ชื่อเรื่องของเอกสาร (document title) การเข้ารหัสตัวอักษร (character set) รูปแบบการแสดงผล (styles) สคริปต์ (scripts) และข้อมูลอื่น ๆ

องค์ประกอบ `<title>`

แท็ก <title> ใช้ระบุชื่อของหน้า (Page Title) ซึ่งจะแสดงใน แถบชื่อ (Browser Tab) เมื่อบันทึกเป็นรายการโปรด (Bookmark) และผลลัพธ์การค้นหาบน Google

				
					<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

องค์ประกอบ `<style>`

ใช้เขียน CSS ภายในหน้า (Internal CSS) เพื่อกำหนดลักษณะของเว็บเพจ เช่น สีพื้นหลัง ขนาดฟอนต์ สีตัวอักษร ฯลฯ

				
					<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

องค์ประกอบ `<link>`

แท็ก <link> ใช้เชื่อมโยงไฟล์ภายนอก เช่น ไฟล์ CSS, favicon หรือ font

				
					<link rel="stylesheet" href="mystyle.css">

องค์ประกอบ `<meta>`

แท็ก <meta> ใช้เก็บข้อมูลเกี่ยวกับเพจ เช่น ตัวอักษร (Character Set), คำอธิบาย (Page Description), คีย์เวิร์ด (Keywords), ผู้เขียน (author) และ viewport
Metadata จะไม่แสดงผลในหน้าเพจ แต่จะถูกแสดงที่เบราว์เซอร์ Search Engines (Keywords) และ Web Service อื่นๆ

ตัวอย่าง

				
					<!-- 🔤 ระบุชุดอักขระ (Character Set) -->
<meta charset="UTF-8">

<!-- 🧩 ระบุคีย์เวิร์ดให้กับ Search Engine -->
<meta name="keywords" content="HTML, CSS, JavaScript">

<!-- 📝 ระบุคำอธิบายหน้าเว็บเพจ -->
<meta name="description" content="Free Web tutorials">

<!-- 👤 ระบุชื่อผู้เขียนหน้าเพจ -->
<meta name="author" content="John Doe">

<!-- 🔄 รีเฟรชหน้าเอกสารทุกๆ 30 วินาที -->
<meta http-equiv="refresh" content="30">

<!-- 📱 ตั้งค่า viewport ให้เว็บแสดงผลเหมาะกับทุกอุปกรณ์ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

ตัวอย่าง แท็ก <meta>

				
					<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

การตั้งค่า Viewport

Viewport คือ พื้นที่ที่ผู้ชมมองเห็นเว็บ ซึ่งมีขนาดต่างกันในแต่ละอุปกรณ์ การตั้งค่า Viewport ช่วยให้เว็บดูสวยและพอดีในทุกหน้าจอ

				
					<meta name="viewport" content="width=device-width, initial-scale=1.0">

ความหมาย:

width=device-width ปรับขนาดเว็บให้เท่ากับหน้าจออุปกรณ์
initial-scale=1.0 กำหนดระดับการซูมเริ่มต้นเมื่อโหลดหน้าเว็บ

องค์ประกอบ `<script>`

แท็ก <script> ใช้สำหรับฝัง JavaScript ฝั่งไคลเอนต์ เช่น สคริปต์ที่แสดงข้อความ “Hello JavaScript!” ใน element ที่มี id="demo"

				
					<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

องค์ประกอบ `<base>`

แท็ก <base> ใช้สำหรับ กำหนด URL หรือเป้าหมายเริ่มต้น (default target) สำหรับลิงก์ทั้งหมดในหน้า แท็กนี้ต้องมีแอตทริบิวต์อย่างน้อยหนึ่งตัวคือ href หรือ target หรือทั้งสองอย่าง และ ในหนึ่งเอกสารสามารถมี <base> ได้เพียงหนึ่งแท็กเท่านั้น

				
					<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>

สรุป

<head> คือคอนเทนเนอร์สำหรับ Metadata ของเอกสาร
<head> วางอยู่ระหว่างแท็ก <html> และ <body>
<title> ใช้กำหนดชื่อเรื่องของหน้า (จำเป็นต้องมี)
<style> ใช้ระบุสไตล์ภายในเอกสารเดียว
<link> ใช้เชื่อมโยงไฟล์สไตล์ชีตภายนอก
<meta> ใช้กำหนดข้อมูลเมตา เช่น ชุดอักขระ, คำอธิบาย, คีย์เวิร์ด, ผู้เขียน และ viewport
<script> ใช้ฝังหรือเรียกใช้ JavaScript ฝั่งไคลเอนต์
<base> ใช้กำหนด URL หรือ Target พื้นฐานสำหรับลิงก์ทั้งหมดในเพจ

HTML The Head Element

ความหมายของ <head>

องค์ประกอบ <title>

องค์ประกอบ <style>

องค์ประกอบ <link>

องค์ประกอบ <meta>