กำหนดค่าใน <head>


Element: <head>

Element <head> คือ Tag ที่ไว้บรรจุ Metadata (เกี่ยวกับข้อมูลของเว็บ) จะอยู่ระหว่าง Tag <html> และ <body>

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

Metadata โดยปกติแล้วประกอบด้วย หัวเรื่อง (Title) ประเภทตัวอักษร (Character Set) โค้ด CSS และ JavaScript และข้อมูล meta อื่นๆ

Element ที่เราจะเห็นใน <head> คือ <title> <style> <meta> <link> <script> และ <base>


Element: <title>

Element <title> ระบุหัวเรื่องของหน้าเว็บ ซึ่งเป็นสิ่งจำเป็นสำหรับหน้าเว็บ HTML อย่างมาก

  • จะแสดงบนแทปของเบราว์เซอร์
  • จะแสดงเป็นชื่อหน้าเว็บเมื่อถูกบันทึกเป็น Favorite
  • จะแสดงเป็นชื่อหน้าเว็บใน Search Engine

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Element: <style>

Element <style> ใช้ในการระบุโค้ด CSS เพื่อตกแต่งหน้าเว็บนั้นเพียงหน้าเดียว

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Element: <link>

Element <link> ใช้ในการใส่ลิงก์ไฟล์ CSS เพื่อเชื่อมเอาโค้ด CSS มาใช้ในเพจ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Element: <meta>

Element <meta> ใช้ระบุว่า จะใช้ Character Set อะไร คำอธิบายหน้าเว็บ คีย์เวิร์ด ผู้เขียน และอื่นๆ

Metadata ถูกใช้งานโดยเบราว์เซอร์ (แสดงเนื้อหาอย่างไร) โดย Search Engine (คีย์เวิร์ด) และพวก Web Services ต่างๆ

ระบุรูปแบบตัวอักษร (Character Set) ที่ใช้


                        
                    

คำอธิบายหน้าเว็บ


                        
                    

ใส่คีย์เวิร์ด (Keywords) ให้ Search Engine


                        
                    

ระบุผู้เขียน


                        
                    

ระบุให้บอทของ Search Engine ทำการสร้าง Index และเก็บข้อมูลเกี่ยวกับเว็บไซต์ของเรา ค่าที่ใส่ได้มี index หรือ noindex ตามด้วยคอมม่าและ follow หรือ nofollow


                        
                    

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

width=device-width เป็นตัวบอกว่าให้ความกว้างของหน้าเว็บแปรผันตามขนาดของหน้าจออุปกรณ์

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


                        
                    

สั่งให้ refresh หน้า ทุกๆ กี่นาที ตามตัวอย่างนี้ คือ 30 วินาที


                        
                    

ตัวอย่าง <meta>

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Element: <script>

Element <script> ใช้ในการใส่ลิงก์ไฟล์ JavaScript เพื่อเชื่อมเอาโค้ด JavaScript มาใช้ในเพจ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Element: <base>

Element <base> ใช้ในการระบุ URL เริ่มต้นของหน้าเว็บ เพื่อเป็นจุดเริ่มต้นของ Relative Link ทั้งหมดในหน้าเว็บนั้นๆ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ลืมระบุ <html> <head> และ <body> ได้ไหม ?

ในมาตรฐานของ HTML5 <html> <head> และ <body> สามารถละเว้นได้ โค้ดก็ยังสามารถใช้ได้อยู่

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Element ใน <head>

Tagอธิบาย
<head>ระบุข้อมูลเกี่ยวกับหน้าเว็บ
<title>ใส่หัวเรื่องหน้าเว็บ
<style>ใส่โค้ด CSS
<link>ลิงก์ไฟล์ CSS
<meta>ใส่ข้อมูล metadata เกี่ยวกับหน้าเว็บ
<script>ใส่โค้ด JavaScript หรือลิงก์ไฟล์ JavaScript
<base>ใส่ URL เริ่มต้นของหน้าเว็บนั้นๆ