ข้อมูลอ้างอิงHTML

HTML โดยตัวอักษร HTML ตามหมวดหมู่ รองรับ HTML Browser แอตทริบิวต์ HTML HTML Global Attributes เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ ชุดอักขระ HTML HTML Doctypes การเข้ารหัส URL HTML รหัสภาษา HTML รหัสประเทศ HTML ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด


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 เริ่มต้น

ไม่มี.