แท็กที่ใช้ในส่วนหัว
บทความนี้อธิบายแท็กที่ใช้ในส่วนหัว
อธิบายแท็กที่ใช้ในส่วนหัว เช่น <link>, <script>, <style>
YouTube Video
แท็กที่ใช้ในส่วนหัว
แท็ก <title>
1<title>Document Title</title>- แท็ก
<title>กำหนดชื่อเรื่องของเอกสาร ชื่อเรื่องนี้จะแสดงในแท็บของเบราว์เซอร์และใช้ในบุ๊กมาร์กและผลการค้นหา
แท็ก <link>
- แท็ก
<link>ใช้เพื่อเชื่อมโยงแหล่งข้อมูลภายนอกกับเอกสารปัจจุบัน โดยทั่วไปใช้เพื่อเชื่อมโยงไฟล์ CSS ภายนอก แต่ยังสามารถใช้สำหรับไอคอนและแหล่งข้อมูลภายนอกอื่นๆ ได้เช่นกัน
แอตทริบิวต์ rel ของแท็ก <link>
แอตทริบิวต์ rel ใช้เพื่อระบุความสัมพันธ์ระหว่างแหล่งข้อมูลที่เชื่อมโยงและเอกสารปัจจุบันในแท็ก <link> มีค่าหลายประเภทสำหรับแอตทริบิวต์ rel แต่ที่นี่จะอธิบายเฉพาะค่าเหล่านี้ที่มีความสำคัญและใช้งานบ่อย
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheetใช้เพื่อเชื่อมโยงสไตล์ชีทภายนอก
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon"กำหนดไอคอนที่แสดงในแท็บของเบราว์เซอร์หรือที่บุ๊กมาร์ก โดยการกำหนดไอคอนที่ถูกต้อง การสร้างแบรนด์และการจดจำของเว็บไซต์จะดีขึ้น
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preloadใช้เพื่อโหลดแหล่งข้อมูลล่วงหน้าก่อนการเริ่มการแสดงผลหน้า มีประโยชน์อย่างยิ่งสำหรับแหล่งข้อมูลที่การเวลาเป็นสิ่งสำคัญ เช่น ฟอนต์หรือรูปภาพขนาดใหญ่ สิ่งนี้ช่วยปรับปรุงประสิทธิภาพและเพิ่มประสบการณ์ของผู้ใช้
canonical
1<link rel="canonical" href="https://example.com/page.html">canonicalใช้เพื่อแจ้งเครื่องมือค้นหาเกี่ยวกับเวอร์ชันปกติของหน้า ในกรณีที่มีเนื้อหาซ้ำ การระบุ URL เดิมช่วยรวมคะแนนการจัดอันดับในเครื่องมือค้นหาจากมุมมองของ SEO และช่วยให้แน่ใจว่าเนื้อหาถูกจัดทำดัชนีอย่างถูกต้อง
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternateใช้เพื่อระบุหน้าที่มีภาษาหรือรูปแบบที่แตกต่างกันให้กับเครื่องมือค้นหาและเบราว์เซอร์ ในเว็บไซต์หลายภาษา คุณสามารถระบุ URL สำหรับเวอร์ชั่นภาษาของแต่ละภาษาร่วมกับการใช้แอตทริบิวต์hreflangเพื่อมอบหน้าในภาษาที่เหมาะสมแก่ผู้ใช้
manifest
1<link rel="manifest" href="/manifest.json">manifestให้เบราว์เซอร์มีไฟล์ manifest ที่ประกอบด้วยข้อมูลการกำหนดค่าสำหรับ PWA (Progressive Web App) ไฟล์นี้มีข้อมูล เช่น ไอคอนแอป สีของธีม และโหมดการแสดงผล ซึ่งช่วยในการติดตั้งและใช้งาน PWA บนอุปกรณ์มือถือ
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- เมื่ออ้างอิงถึงทรัพยากรภายนอก การแก้ไข DNS ของโดเมนล่วงหน้าสามารถช่วยเพิ่มความเร็วในการโหลดหน้าเว็บ สิ่งนี้มีประสิทธิภาพเป็นพิเศษสำหรับหน้าเว็บที่มีทรัพยากรภายนอกเป็นจำนวนมากหรือเมื่อต้องการประสบการณ์ผู้ใช้ที่รวดเร็ว
แท็ก <style>
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style>- แท็ก
<style>ใช้ในการกำหนดแผ่นสไตล์ภายใน มันถูกใช้เพื่อใช้สไตล์ CSS กับองค์ประกอบบนหน้า ทำให้คุณสามารถเขียน CSS โดยไม่ต้องใช้ไฟล์ภายนอก
แท็ก <script>
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script>- แท็ก
<script>ใช้ในการฝังโค้ด JavaScript ในเอกสาร HTML คุณยังสามารถลิงก์ไฟล์ JavaScript ภายนอก เพื่อควบคุมพฤติกรรมการทำงานที่เปลี่ยนแปลงได้ของหน้า ใช้แอตทริบิวต์srcเพื่อระบุไฟล์สคริปต์
แอตทริบิวต์ async และ defer
แท็ก <script> รองรับแอตทริบิวต์สองตัวคือ async และ defer ซึ่งส่งผลต่อเวลาการโหลดและการทำงานของสคริปต์ โดยปกติ สคริปต์จะถูกประมวลผลตามลำดับโดยเบราว์เซอร์ แต่การใช้แอตทริบิวต์เหล่านี้สามารถปรับปรุงประสิทธิภาพและประสบการณ์การโหลดหน้าเว็บ
แอตทริบิวต์ async
1<script src="script.js" async></script>- การใช้แอตทริบิวต์
asyncช่วยให้สคริปต์ถูกโหลดแบบอะซิงโครนัส เบราว์เซอร์จะโหลดสคริปต์คู่ขนานกับทรัพยากรอื่นและเรียกใช้ทันทีเมื่อการโหลดเสร็จสิ้น asyncเหมาะสำหรับสคริปต์ที่เป็นอิสระและใช้เมื่อสคริปต์ไม่ขึ้นอยู่กับการโหลดของสคริปต์อื่นหรือ DOM
แอตทริบิวต์ defer
1<script src="script.js" defer></script>- การใช้แอตทริบิวต์
deferช่วยให้สคริปต์ถูกโหลดแบบอะซิงโครนัสแต่จะรันหลังจากการประมวลผล HTML เสร็จสิ้น การรันสคริปต์จะไม่ขัดขวางการแสดงผลของหน้า ซึ่งช่วยเพิ่มประสบการณ์ของผู้ใช้ deferมีประสิทธิภาพเมื่อสคริปต์ต้องถูกรันหลังจากที่ DOM โหลดเสร็จสมบูรณ์แล้ว ตัวอย่างเช่น มันเหมาะสมเมื่อคุณต้องการให้สคริปต์รันหลังจากที่เลย์เอาต์และองค์ประกอบทั้งหมดของหน้าโหลดเสร็จแล้ว
นโยบาย CORS และแอตทริบิวต์ crossorigin
เมื่อโหลดสคริปต์ภายนอก อาจมีการจำกัดความปลอดภัยตามนโยบาย Same-Origin Policy ในกรณีดังกล่าว สามารถใช้แอตทริบิวต์ crossorigin เพื่ออนุญาตการแชร์ทรัพยากร
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>แอตทริบิวต์ crossorigin สามารถตั้งค่าได้ดังนี้:
anonymous: ส่งคำขอโดยไม่รวมข้อมูลสิทธิ์use-credentials: ส่งคำขอโดยรวมข้อมูลสิทธิ์
แอตทริบิวต์ type
แท็ก <script> สามารถใช้แอตทริบิวต์ type เพื่อระบุประเภทของสคริปต์ โดยค่าเริ่มต้นจะใช้ JavaScript แต่คุณยังสามารถระบุประเภทของสคริปต์ที่เฉพาะเจาะจงได้ (เช่น JavaScript แบบโมดูลหรือภาษาเทมเพลต)
โมดูล JavaScript
1<script type="module" src="module.js"></script>-
ตั้งแต่ ECMAScript 2015 (ES6) ได้มีการแนะนำโมดูล JavaScript ซึ่งช่วยให้โค้ดสามารถแบ่งออกเป็นโมดูลต่าง ๆ เพื่อเพิ่มความสามารถในการนำกลับมาใช้ใหม่ โดยการระบุ
type="module"คุณสามารถจัดการสคริปต์เป็นโมดูลได้ -
โมดูลสามารถแบ่งออกเป็นโมดูลอื่นได้โดยใช้
importและexport
สคริปต์ที่ไม่ใช่ JavaScript
1<script type="application/ld+json">
2{
3 "@context": "https://schema.org",
4 "@type": "Organization",
5 "name": "Example Inc.",
6 "url": "https://www.example.com"
7}
8</script>- สคริปต์ที่ไม่ใช่ JavaScript ก็สามารถระบุภายในแท็ก
<script>ได้ ตัวอย่างเช่น ใช้type="application/ld+json"เมื่ออธิบายข้อมูลที่มีโครงสร้างเช่น JSON-LD ในที่นี้ JSON-LD เป็นรูปแบบในการโครงสร้างข้อมูลบนหน้าเว็บ ทำให้เครื่องมือค้นหาและแอปพลิเคชันอื่น ๆ สามารถเข้าใจข้อมูลได้อย่างลึกซึ้งยิ่งขึ้น
หมายเหตุเกี่ยวกับการใช้แท็ก <script>
- ลำดับของสคริปต์: ไลบรารีที่สคริปต์ขึ้นอยู่ต้องถูกโหลดก่อนสคริปต์ที่ขึ้นอยู่ ตัวอย่างเช่น สคริปต์ที่ใช้ jQuery ต้องถูกโหลดหลังจาก jQuery เอง
- การเพิ่มประสิทธิภาพ: เพื่อหลีกเลี่ยงผลกระทบต่อความเร็วในการโหลดหน้า ควรโหลดสคริปต์เมื่อจำเป็น และหลีกเลี่ยงการรันสคริปต์ที่ไม่จำเป็น
- มาตรการความปลอดภัย: เมื่อใช้สคริปต์จากภายนอก ควรมั่นใจว่าถูกโหลดจากแหล่งที่เชื่อถือได้ เพื่อป้องกันการฝังสคริปต์ที่เป็นอันตราย
แท็ก <base>
1<base href="https://example.com/">- แท็ก
<base>จะกำหนดฐาน URL สำหรับ URL แบบสัมพัทธ์ทั้งหมดในเอกสาร URL ที่ระบุในแอตทริบิวต์hrefจะกลายเป็นฐานสำหรับเส้นทางสัมพัทธ์ในลิงก์และรูปภาพ โดยทั่วไปมักจะใช้เพียงครั้งเดียวต่อหน้า
แท็ก <noscript>
1<noscript>Your browser does not support JavaScript!</noscript>- แท็ก
<noscript>จะกำหนดเนื้อหาที่แสดงเมื่อ JavaScript ถูกปิดใช้งานในบราว์เซอร์ มันถูกใช้เพื่อให้เนื้อหาทางเลือกสำหรับสภาพแวดล้อมที่ไม่รองรับ JavaScript
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย