HTML – The Head Element

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

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

<head> Element

<head> Element คือคอนเทนเนอร์สำหรับ Metadata จะอยู่ระหว่าง Tag <html> และ <body>

Metadata เป็นข้อมูลเกี่ยวกับเอกสาร HTML Metadata ไม่แสดงผลในเบราว์เซอร์

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

<title> Element

<title> คือ Tag ใช้ระบุชื่อเรื่องของเอกสาร ชื่อเรื่องต้องเป็นข้อความเท่านั้น และจะแสดงในแถบชื่อเรื่องของเบราว์เซอร์หรือในแท็บของหน้า

Tag <title> นั้นสำคัญมากสำหรับการปรับแต่งเว็บไซต์ให้ติดเสิร์ช เพราะอัลกอริทึมของเครื่องมือค้นหาใช้ชื่อหน้าเว็บเพื่อตัดสินใจลำดับเมื่อแสดงรายการหน้าในผลการค้นหา

แท็ก <title> สามารถ:

  • ระบุหัวเรื่องในแถบของเบราว์เซอร์
  • ระบุชื่อสำหรับหน้าเพจเมื่อเพิ่มไปยังรายการโปรด
  • แสดงชื่อสำหรับหน้าในผลลัพธ์ของ Search Engine เช่น Google

ดังนั้น พยายามตั้งชื่อให้ถูกต้องและมีความเหมาะสมกับเรื่องนั้นๆ มากที่สุด

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>ชื่อเรื่องที่เป็นหัวของเนื้อหานี้</title>
</head>
<body>

<p>เนื้อหาขององค์ประกอบเนื้อหาจะแสดงในหน้าต่างเบราว์เซอร์</p>
<p>เนื้อหาขององค์ประกอบชื่อจะแสดงในแท็บเบราว์เซอร์ในรายการโปรดและในผลลัพธ์ของเครื่องมือค้นหา</p>

</body>
</html>
ลองดูสิ ❱

<style> Element

Tag <style> นี้ใช้กำหนดข้อมูลสไตล์ของหน้าเว็บเพจ เช่น หัวข้อ สีข้อความ สีพื้นหลัง และอื่นๆ

ตัวอย่าง 

<!DOCTYPE html>
<html>
<head>
  <title>ชื่อบทความที่แสดงที่แท็บเบราว์เซอร์</title>
  <style>
    body {background-color: powderblue;}
    h1 {color: red;}
    p {color: blue;}
  </style>
</head>  
<body>

<h1>หัวข้อใหญ่</h1>
<p>เนื้อหาบทความ</p>

<p>เนื้อหาขององค์ประกอบเนื้อหาจะแสดงในหน้าต่างเบราว์เซอร์</p>
<p>เนื้อหาขององค์ประกอบชื่อเรื่องจะแสดงในแท็บเบราว์เซอร์ ในรายการโปรด และในผลการค้นหาของเครื่องมือค้นหา</p>
  
</body>
</html>
ลองดูสิ ❱

Tag <link> ใช้ในการระบุลิงก์ไฟล์ ส่วนใหญ่จะใช้ลิงก์กับไฟล์ข้างนอก

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
</body>
</html>
ลองดูสิ ❱

<meta> Element

<meta> โดยปกติ Tag นี้จะใช้เพื่อระบุชุดอักขระ (Character Set) คำอธิบายหน้า (Page Description) Keywords ชื่อผู้เขียนหน้าเพจและการตั้งค่าวิวพอร์ต

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>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
</head>
<body>

<p>สังเกตได้ว่าข้อมูล meta อยู่ภายในส่วน head Element</p>

</body>
</html>
ลองดูสิ ❱

การตั้งค่า Viewport

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

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

วิธีควบคุมขนาดและมาตราส่วนของหน้า

width=device-width จะกำหนดความกว้างของหน้าตามความกว้างหน้าจอของอุปกรณ์ (ซึ่งจะแตกต่างกันไปตามอุปกรณ์)

initial-scale=1.0 จะตั้งค่าระดับการซูมเริ่มต้นเมื่อเบราว์เซอร์โหลดหน้าเว็บเป็นครั้งแรก

ตัวอย่าง

ตัวอย่างที่ไม่มีแท็ก viewport

ตัวอย่างมีแท็ก viewport

<script> Element

<script> ใช้ในการระบุ  client-side JavaScripts

ยกตัวอย่างให้ JavaScript เขียนว่า “Hello JavaScript!” ข้างใน HTML Element ด้วย id=”demo”

ตัวอย่าง 

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
  }
  </script>
</head>
<body>

<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>
ลองดูสิ ❱

<base> Element

<base> ใช้เพื่อระบุ URL พื้นฐานหรือ URL สำหรับลิงก์ที่เกี่ยวข้องโดยที่ต้องมี href หรือ target Attribute หรือทั้งสองอย่าง

สามารถมีแท็ก <base> หนึ่งแท็กเท่านั้นในเอกสาร

ตัวอย่าง

กำหนด Default URL และ Default Target สำหรับลิงก์ในหน้าเพจ

<!DOCTYPE html>
<html>
<head>
  <base href="https://kb.hostatom.com/" target="_blank">
</head>
<body>

<h1>The base element</h1>

<p><img src="/html/images/img_chania.jpg" width="160" height="145" alt="chania">
 - สังเกตว่าเราได้ระบุที่อยู่สำหรับรูปภาพเท่านั้น เนื่องจากเราได้ระบุ URL พื้นฐานในส่วน head แล้วเบราว์เซอร์จะค้นหารูปภาพที่ "https://kb.hostatom.com/html/images/img_chania.jpg"</p>

<p><a href="category/html/">HTML</a>
 - สังเกตว่าลิงก์จะเปิดขึ้นในหน้าต่างใหม่ แม้ว่าจะไม่มี Attribute target="_blank" ก็ตาม นี่เป็นเพราะ target Attribute ของ base Element ถูกตั้งค่าเป็น "_blank"</p>

</body>
</html>
ลองดูสิ ❱

สรุป

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