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">
<meta
name="viewport" content="width=device-width, initial-scale=1.0">
</head>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แท็ ก<meta>
กำหนดข้อมูลเมตาเกี่ยวกับเอกสาร HTML Metadata คือข้อมูล (ข้อมูล) เกี่ยวกับข้อมูล
<meta>
แท็กจะอยู่ภายในองค์ประกอบ <head> เสมอ และมักใช้เพื่อระบุชุดอักขระ คำอธิบายหน้า คำสำคัญ ผู้เขียนเอกสาร และการตั้งค่าวิวพอร์ต
ข้อมูลเมตาจะไม่ปรากฏบนหน้า แต่สามารถแยกวิเคราะห์ด้วยเครื่องได้
เบราว์เซอร์ใช้ข้อมูลเมตา (วิธีแสดงเนื้อหาหรือหน้าโหลดซ้ำ) เครื่องมือค้นหา (คำหลัก) และบริการเว็บอื่นๆ
มีวิธีให้นักออกแบบเว็บไซต์ควบคุมวิวพอร์ต (พื้นที่ที่ผู้ใช้มองเห็นได้ของหน้าเว็บ) ผ่าน<meta>
แท็ก (ดูตัวอย่าง "การตั้งค่าวิวพอร์ต" ด้านล่าง)
รองรับเบราว์เซอร์
Element | |||||
---|---|---|---|---|---|
<meta> | Yes | Yes | Yes | Yes | Yes |
คุณลักษณะ
Attribute | Value | Description |
---|---|---|
charset | character_set | Specifies the character encoding for the HTML document |
content | text | Specifies the value associated with the http-equiv or name attribute |
http-equiv | content-security-policy content-type default-style refresh |
Provides an HTTP header for the information/value of the content attribute |
name | application-name author description generator keywords viewport |
Specifies a name for the metadata |
คุณสมบัติสากล
แท็ ก<meta>
ยังสนับสนุน Global Attributes ในHTML
ตัวอย่างเพิ่มเติม
กำหนดคำหลักสำหรับเครื่องมือค้นหา:
<meta name="keywords" content="HTML, CSS, JavaScript">
กำหนดคำอธิบายของหน้าเว็บของคุณ:
<meta name="description" content="Free Web tutorials for
HTML and CSS">
กำหนดผู้เขียนหน้า:
<meta name="author" content="John Doe">
รีเฟรชเอกสารทุกๆ 30 วินาที:
<meta http-equiv="refresh" content="30">
การตั้งค่าวิวพอร์ตเพื่อทำให้เว็บไซต์ของคุณดูดีบนทุกอุปกรณ์:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
การตั้งค่าวิวพอร์ต
วิวพอร์ตคือพื้นที่ที่ผู้ใช้มองเห็นได้ของหน้าเว็บ มันแตกต่างกันไปตามอุปกรณ์ - บนโทรศัพท์มือถือจะเล็กกว่าบนหน้าจอคอมพิวเตอร์
คุณควรรวม<meta>
องค์ประกอบต่อไปนี้ในหน้าเว็บทั้งหมดของคุณ:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ซึ่งจะให้คำแนะนำเบราว์เซอร์เกี่ยวกับวิธีการควบคุมขนาดและขนาดของหน้า
ส่วนwidth=device-width
กำหนดความกว้างของหน้าตามความกว้างหน้าจอของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)
ส่วนนี้initial-scale=1.0
กำหนดระดับการซูมเริ่มต้นเมื่อเบราว์เซอร์โหลดหน้าเว็บเป็นครั้งแรก
ต่อไปนี้คือตัวอย่างของหน้าเว็บ ที่ ไม่มีเมตาแท็กของวิวพอร์ต และหน้าเว็บเดียวกันกับเมตาแท็กของวิวพอร์ต:
เคล็ดลับ:หากคุณกำลังเรียกดูหน้านี้ด้วยโทรศัพท์หรือแท็บเล็ต คุณสามารถคลิกลิงก์สองลิงก์ด้านล่างเพื่อดูความแตกต่าง
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิวพอร์ตได้ในResponsive Web Design - The Viewport Tutorial
หน้าที่เกี่ยวข้อง
กวดวิชา HTML: HTML Head
การอ้างอิง HTML DOM: Meta Object
การตั้งค่า CSS เริ่มต้น
ไม่มี.