พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน head Tag

<head> tag ใน HTML5 ใช้สำหรับเก็บข้อมูลที่เกี่ยวข้องกับ metadata ของเว็บเพจ เช่น ชื่อเว็บเพจ การเชื่อมโยงไปยังไฟล์ CSS, JavaScript, ไอคอน, และข้อมูลอื่นๆ ที่ไม่แสดงผลบนหน้าเว็บโดยตรง แต่จะเป็นข้อมูลที่สำคัญสำหรับการทำงานของเบราว์เซอร์และการแสดงผลเว็บเพจอย่างเหมาะสม

โครงสร้างทั่วไปของ <head>

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการใช้ head tag</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <!-- เนื้อหาของเว็บเพจ -->
</body>
</html>

ตัวอย่างการใช้งาน <head> tag และองค์ประกอบต่างๆ

<title>

  • ใช้สำหรับกำหนดชื่อของเว็บเพจที่จะปรากฏบนแท็บเบราว์เซอร์
  • ชื่อควรอธิบายหน้าเว็บเพจและควรมีความหมายที่ชัดเจน
HTML
<title>หน้าหลัก - เว็บไซต์ของฉัน</title>

<meta>

  • ใช้สำหรับเก็บข้อมูลเพิ่มเติมเกี่ยวกับเว็บเพจ เช่น charset, คำอธิบาย, คำสำคัญสำหรับ SEO, ข้อมูลของผู้เขียน เป็นต้น

ตัวอย่าง

กำหนด character encoding

HTML
<meta charset="UTF-8">

การกำหนดคำอธิบายเว็บเพจ

HTML
<meta name="description" content="เว็บไซต์สำหรับเรียนรู้การเขียนโค้ด HTML5">

การกำหนด viewport สำหรับการทำงานกับ responsive design

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

<link>

  • ใช้เชื่อมโยงไฟล์ภายนอก เช่น ไฟล์ CSS, ฟอนต์ หรือไอคอนต่างๆ

ตัวอย่าง

การเชื่อมโยงไฟล์ CSS

HTML
<link rel="stylesheet" href="styles.css">

การเชื่อมโยงฟอนต์จาก Google Fonts

HTML
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

การตั้งค่าไอคอน favicon

HTML
<link rel="icon" href="favicon.ico" type="image/x-icon">

<script>

  • ใช้สำหรับการเชื่อมโยงไฟล์ JavaScript หรือการเขียนสคริปต์ที่ฝังไว้ภายใน

ตัวอย่าง

เชื่อมโยงไฟล์ JavaScript ภายนอก

HTML
<script src="script.js"></script>

การใช้งานแบบ async หรือ defer เพื่อควบคุมการโหลด

HTML
<script src="script.js" async></script> <!-- โหลด script แบบไม่บล็อกการแสดงผล -->
<script src="script.js" defer></script> <!-- รอให้ DOM โหลดเสร็จสิ้นก่อน -->

<style>

  • ใช้สำหรับการเขียน CSS ภายในเอกสาร HTML (inline CSS)
  • มักไม่ค่อยใช้ในโค้ดจริง แต่มีประโยชน์ในกรณีที่ต้องการกำหนด CSS แบบเฉพาะหน้าหรือทดลองโค้ด

ตัวอย่าง

HTML
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f4;
    }
</style>

<base>

  • กำหนด URL พื้นฐานสำหรับลิงก์ทั้งหมดในเว็บเพจ
  • ใช้เมื่อมีการเชื่อมโยงลิงก์หรือทรัพยากรที่อยู่ในที่อื่นๆ นอกเหนือจาก URL พื้นฐานของหน้าเว็บเพจ

ตัวอย่าง

HTML
<base href="https://example.com/">

<meta http-equiv>

  • ใช้เพื่อกำหนดค่า HTTP header โดยส่วนมากใช้สำหรับควบคุมการรีเฟรชหรือการเปลี่ยนเส้นทาง

ตัวอย่าง

HTML
<meta http-equiv="refresh" content="30">

การรวมไอคอนโซเชียลมีเดีย และ Open Graph Meta Tags

  • สำหรับการแชร์ลิงก์บนโซเชียลมีเดีย และการปรับแต่งการแสดงผลบนแพลตฟอร์มอย่าง Facebook, Twitter

ตัวอย่าง

HTML
<meta property="og:title" content="เรียนรู้ HTML5">
<meta property="og:description" content="เนื้อหาสำหรับการเรียนรู้การเขียนเว็บด้วย HTML5">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

สรุป

<head> tag ทำหน้าที่เก็บข้อมูลเบื้องหลังเพื่อช่วยในการทำงานของเว็บเพจ โดยมีองค์ประกอบหลายประเภทที่ช่วยในการปรับแต่งและเพิ่มประสิทธิภาพในการแสดงผลเว็บเพจ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ