HTML – The Head Element

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

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

<head> Element

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

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

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

<title> Element

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

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

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

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

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

ตัวอย่าง

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

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

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

เนื้อหาขององค์ประกอบเนื้อหาจะแสดงในหน้าต่างเบราว์เซอร์



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

<style> Element

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

ตัวอย่าง 

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

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

</body>
</html>

หัวข้อใหญ่

เนื้อหาบทความ

แท็ก <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>

This is a Heading

This is a paragraph.

<meta> Element

<meta>โดยปกติแท็กนี้จะใช้เพื่อระบุชุดอักขระ(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>

สังเกตได้ว่าข้อมูล meta อยู่ภายในส่วน head element

การตั้งค่า 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

ยกตัวอย่างให้ JavaScripts เขียนว่า “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>
Page Title

My Web Page


A Paragraph


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


<p><img src="https://kb.hostatom.com/wp-content/uploads/2023/02/image.png" width="160" height="145" >สังเกตว่าเราได้ระบุที่อยู่สำหรับรูปภาพเท่านั้น เนื่องจากเราได้ระบุ URL พื้นฐานในส่วนheadแล้วเบราว์เซอร์จะค้นหารูปภาพที่"https://kb.hostatom.com/wp-content/image.png"</p>
<br>
<p><a href="https://kb.hostatom.com/">ศูนย์ความรู้</a>สังเกตว่าลิงก์จะเปิดขึ้นในหน้าต่างใหม่ แม้ว่าจะไม่มีแอตทริบิวต์ target="_blank" ก็ตาม นี่เป็นเพราะtarget attributeของ base element ถูกตั้งค่าเป็น "_blank"
</body>
</html>

สังเกตว่าเราได้ระบุที่อยู่สำหรับรูปภาพเท่านั้น เนื่องจากเราได้ระบุ URL พื้นฐานในส่วนheadแล้วเบราว์เซอร์จะค้นหารูปภาพที่”https://kb.hostatom.com/wp-content/image.png”

ศูนย์ความรู้สังเกตว่าลิงก์จะเปิดขึ้นในหน้าต่างใหม่ แม้ว่าจะไม่มีแอตทริบิวต์ target=”_blank” ก็ตาม นี่เป็นเพราะtarget attributeของ base element ถูกตั้งค่าเป็น “_blank”

สรุปบท

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

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