HTML <head> คือส่วนสำคัญที่ซ่อนตัวอยู่ในโครงสร้างของทุกหน้าเว็บ มันคือที่เก็บข้อมูลและคำสั่งที่ทำให้เบราว์เซอร์เข้าใจว่าเว็บเพจควรแสดงและทำงานอย่างไร ตั้งแต่การกำหนด Title ของหน้า การเรียกใช้ CSS หรือ JavaScript ไปจนถึงการตั้งค่าข้อมูล Metadata ที่ส่งผลต่อ SEO และการแชร์ผ่านโซเชียล
ในบทความนี้ เราจะพาไปรู้จักกับองค์ประกอบของ <head> และการใช้งานในบริบทของนักพัฒนาเว็บ
HTML <head> คืออะไร?
<head> คือแท็กที่รวบรวมข้อมูลสำคัญของเอกสาร HTML เช่น Title, Meta Tags, หรือไฟล์ทรัพยากรภายนอก มันเป็นส่วนที่ไม่แสดงผลโดยตรงกับผู้ใช้ แต่สำคัญต่อการทำงานของหน้าเว็บ
Tag สำคัญใน <head>
<head>
แท็กนี้คือจุดเริ่มต้นของส่วนข้อมูลใน HTML Document
<head>
<!-- ข้อมูลเกี่ยวกับหน้าเว็บอยู่ที่นี่ -->
</head>
<title>
ใช้กำหนดชื่อของเอกสาร ซึ่งจะแสดงบนแท็บของเบราว์เซอร์
<title>My Awesome Webpage</title>
Tips: ตั้งชื่อให้น่าสนใจและกระชับเพื่อ SEO ที่ดี
<base>
กำหนด URL พื้นฐานสำหรับลิงก์ทั้งหมดในเอกสาร
<base href="https://example.com/" target="_blank">
ผลลัพธ์: ลิงก์ในเอกสารจะถูกต่อท้าย URL นี้โดยอัตโนมัติ
<link>
ใช้เชื่อมต่อกับไฟล์ทรัพยากร เช่น CSS หรือไอคอน
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
Tips: ใส่ลิงก์ไฟล์ CSS ไว้ใน <head> เพื่อเรนเดอร์สไตล์ได้เร็วขึ้น
<meta>
สำหรับข้อมูล Metadata เช่น คำอธิบายภาษา (charset), คำค้นหา (keywords), และ viewport
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is an awesome webpage">
Tips: ใช้ viewport เพื่อปรับหน้าเว็บให้เหมาะสมกับ Mobile
<script>
สำหรับเรียกใช้ JavaScript
<script src="app.js"></script>
Tips: ใส่ defer เพื่อให้ Script โหลดหลังจาก HTML ถูกประมวลผลแล้ว
<style>
ใช้กำหนด CSS ภายในเอกสาร HTML
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</style>
Tips: หลีกเลี่ยงการใช้ CSS ในตัว แยกไฟล์จะดีกว่า
โครงสร้างตัวอย่างของ <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn about HTML Head elements">
<title>HTML Head Elements Guide</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script src="app.js" defer></script>
</head>
<body>
<h1>Welcome to My Webpage</h1>
</body>
</html>
ข้อควรระวัง
- อย่าใช้
<meta>ซ้ำซ้อน การเพิ่ม<meta>หลายค่าเกินไปอาจทำให้ SEO ผิดพลาด - ลำดับไฟล์สำคัญ เรียงลำดับ CSS ก่อน Script เพื่อความเร็วในการเรนเดอร์
- ลดไฟล์ใน
<head>ไฟล์มากเกินไปอาจทำให้หน้าเว็บโหลดช้า
สรุป
HTML <head> เป็นส่วนที่ซ่อนอยู่แต่สำคัญอย่างยิ่งต่อการทำงานของเว็บเพจ การเข้าใจองค์ประกอบต่าง ๆ เช่น <title>, <meta>, <link>, และ <script> จะช่วยให้นักพัฒนาจัดการหน้าเว็บได้ดีขึ้น ทั้งในแง่ SEO, การเรนเดอร์, และประสบการณ์ผู้ใช้