HTML - The Head Element
องค์ประกอบ HTML <head>เป็นคอนเทนเนอร์สำหรับองค์ประกอบต่อไปนี้:
<title>, <style>,
<meta>, <link>, , <script>และ<base>
HTML <head> องค์ประกอบ
องค์ประกอบ<head>นี้เป็นคอนเทนเนอร์สำหรับข้อมูลเมตา (ข้อมูลเกี่ยวกับข้อมูล) และวางไว้ระหว่าง<html>แท็กและ<body>แท็ก
ข้อมูลเมตา HTML เป็นข้อมูลเกี่ยวกับเอกสาร HTML ไม่แสดงข้อมูลเมตา
โดยทั่วไปข้อมูลเมตาจะกำหนดชื่อเอกสาร ชุดอักขระ ลักษณะ สคริปต์ และข้อมูลเมตาอื่นๆ
HTML <title> องค์ประกอบ
องค์ประกอบ<title>กำหนดชื่อเรื่องของเอกสาร ชื่อเรื่องต้องเป็นข้อความเท่านั้น และแสดงในแถบชื่อเรื่องของเบราว์เซอร์หรือในแท็บของหน้า
จำเป็นต้อง มี<title>องค์ประกอบในเอกสาร HTML!
เนื้อหาของหน้าชื่อมีความสำคัญมากสำหรับการเพิ่มประสิทธิภาพกลไกค้นหา (SEO)! อัลกอริทึมของเครื่องมือค้นหาใช้ชื่อหน้าเพื่อตัดสินใจลำดับเมื่อแสดงรายการหน้าในผลการค้นหา
องค์ประกอบ<title>:
- กำหนดชื่อในแถบเครื่องมือเบราว์เซอร์
- ให้ชื่อเรื่องสำหรับหน้าเมื่อมีการเพิ่มในรายการโปรด
- แสดงชื่อเรื่องของหน้าในเครื่องมือค้นหาผลลัพธ์
ดังนั้น พยายามทำให้ชื่อเรื่องถูกต้องและมีความหมายมากที่สุด!
เอกสาร HTML อย่างง่าย:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <style> องค์ประกอบ
องค์ประกอบ<style>นี้ใช้เพื่อกำหนดข้อมูลรูปแบบสำหรับหน้า HTML หน้าเดียว:
ตัวอย่าง
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
HTML <link> องค์ประกอบ
องค์ประกอบ<link>กำหนดความสัมพันธ์ระหว่างเอกสารปัจจุบันและทรัพยากรภายนอก
แท็ ก<link>
นี้มักใช้เพื่อลิงก์ไปยังสไตล์ชีตภายนอก:
ตัวอย่าง
<link rel="stylesheet" href="mystyle.css">
เคล็ดลับ:หากต้องการเรียนรู้เกี่ยวกับ CSS ทั้งหมด โปรดไปที่ บทช่วย สอน CSSของ เรา
HTML <meta> องค์ประกอบ
โดย<meta>ทั่วไป องค์ประกอบนี้ใช้เพื่อระบุชุดอักขระ คำอธิบายหน้า คีย์เวิร์ด ผู้เขียนเอกสาร และการตั้งค่าวิวพอร์ต
ข้อมูลเมตาจะไม่ปรากฏบนหน้า แต่ถูกใช้โดยเบราว์เซอร์ (วิธีแสดงเนื้อหาหรือหน้าโหลดซ้ำ) โดยเครื่องมือค้นหา (คำหลัก) และบริการเว็บอื่นๆ
ตัวอย่าง
กำหนดชุดอักขระที่ใช้:
<meta charset="UTF-8">
กำหนดคำหลักสำหรับเครื่องมือค้นหา:
<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">
การตั้งค่าวิวพอร์ตเพื่อทำให้เว็บไซต์ของคุณดูดีบนทุกอุปกรณ์:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ตัวอย่าง<meta>แท็ก:
ตัวอย่าง
<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>องค์ประกอบต่อไปนี้ในหน้าเว็บทั้งหมดของคุณ:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ซึ่งจะให้คำแนะนำเบราว์เซอร์เกี่ยวกับวิธีการควบคุมขนาดและขนาดของหน้า
ส่วนwidth=device-widthกำหนดความกว้างของหน้าตามความกว้างหน้าจอของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)
ส่วนนี้initial-scale=1.0กำหนดระดับการซูมเริ่มต้นเมื่อเบราว์เซอร์โหลดหน้าเว็บเป็นครั้งแรก
ต่อไปนี้คือตัวอย่างของหน้าเว็บ ที่ ไม่มีเมตาแท็กของวิวพอร์ต และหน้าเว็บเดียวกันกับเมตาแท็กของวิวพอร์ต:
เคล็ดลับ:หากคุณกำลังเรียกดูหน้านี้ด้วยโทรศัพท์หรือแท็บเล็ต คุณสามารถคลิกลิงก์สองลิงก์ด้านล่างเพื่อดูความแตกต่าง
HTML <script> องค์ประกอบ
องค์ประกอบ<script>นี้ใช้เพื่อกำหนด JavaScript ฝั่งไคลเอ็นต์
JavaScript ต่อไปนี้เขียนว่า "สวัสดี JavaScript!" เป็นองค์ประกอบ HTML ที่มี id="demo":
ตัวอย่าง
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
เคล็ดลับ:หากต้องการเรียนรู้ทั้งหมดเกี่ยวกับ JavaScript โปรดไปที่ บทช่วย สอน JavaScriptของ เรา
HTML <base> องค์ประกอบ
องค์ประกอบ<base>ระบุ URL ฐานและ/หรือเป้าหมายสำหรับ URL ที่เกี่ยวข้องทั้งหมดในหน้า
แท็ ก<base>ต้องมีแอตทริบิวต์ href หรือแอตทริบิวต์เป้าหมาย หรือทั้งสองอย่าง
ในเอกสาร มีได้เพียง<base>
องค์ประกอบเดียวเท่านั้น!
ตัวอย่าง
ระบุ URL เริ่มต้นและเป้าหมายเริ่มต้นสำหรับลิงก์ทั้งหมดบนหน้าเว็บ:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
สรุปบท
- องค์ประกอบ
<head>นี้เป็นคอนเทนเนอร์สำหรับข้อมูลเมตา (ข้อมูลเกี่ยวกับข้อมูล) - องค์ประกอบ
<head>ถูกวางไว้ระหว่าง<html>แท็กและ<body>แท็ก - จำเป็นต้อง มี
<title>องค์ประกอบและกำหนดชื่อเรื่องของเอกสาร - องค์ประกอบ
<style>นี้ใช้เพื่อกำหนดข้อมูลรูปแบบสำหรับเอกสารเดียว - แท็ ก
<link>นี้มักใช้เพื่อลิงก์ไปยังสไตล์ชีตภายนอก - องค์ประกอบ
<meta>นี้มักใช้เพื่อระบุชุดอักขระ คำอธิบายหน้า คีย์เวิร์ด ผู้เขียนเอกสาร และการตั้งค่าวิวพอร์ต - องค์ประกอบ
<script>นี้ใช้เพื่อกำหนด JavaScript ฝั่งไคลเอ็นต์ - องค์ประกอบ
<base>ระบุ URL ฐานและ/หรือเป้าหมายสำหรับ URL ที่เกี่ยวข้องทั้งหมดในหน้า
องค์ประกอบส่วนหัว HTML
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา