แท็ก link

แท็ก link เชื่อมต่อไฟล์ CSS ไปยังหน้า HTML นอกจากนี้ link ยังเชื่อมต่อ ไฟล์อื่นๆ บางประเภท เช่น favicon (Favicon คือไอคอนของเว็บไซต์ซึ่ง ปรากฏในแท็บเบราว์เซอร์ มันยังสามารถ เห็นได้ในบางเครื่องมือค้นหาเมื่อค้นหา ตรงข้ามกับเว็บไซต์ ตัวอย่างเช่นใน Yandex)

แท็กนี้มีแอตทริบิวต์จำนวนมากและพวกมัน สามารถรับค่าที่หลากหลายได้ อย่างไรก็ตาม ในชีวิตจริงแทบจะไม่ได้ใช้ทั้งหมดเลย สิ่งที่นิยมที่สุดคือการเชื่อมต่อ CSS และการเพิ่ม favicon

วิธีเชื่อมต่อ CSS:

<link rel="stylesheet" href="style.css">

วิธีเชื่อมต่อ favicon:

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

แท็ก link ไม่ต้องการแท็กปิด

แอตทริบิวต์

แอตทริบิวต์	คำอธิบาย
`href`	เส้นทางไปยังไฟล์ที่ต้องการเชื่อมต่อ
`media`	ประเภทของอุปกรณ์ที่ควรเชื่อมต่อไฟล์ สิ่งที่หมายถึง - คุณสามารถเชื่อมต่อไฟล์ CSS เฉพาะสำหรับหน้าจอขนาดใหญ่ (ค่า `screen`) หรือเฉพาะสำหรับหน้าจอขนาดเล็ก: สำหรับมือถือหรือแท็บเล็ต (ค่า `handheld`) ค่าที่เป็นไปได้: `all`, `braille`, `handheld`, `print`, `screen`, `speech`, `projection`, `tty`, `tv` ดูรายละเอียดเพิ่มเติมด้านล่าง
`rel`	ประเภทของไฟล์ที่เชื่อมต่อ ค่าที่เป็นไปได้: `stylesheet` \| `alternate` ค่า `stylesheet` บ่งชี้ว่าเป็นการเชื่อมต่อไฟล์ CSS ค่า `alternate` ใช้ เช่น สำหรับระบุลิงก์ ไปยังไฟล์ในรูปแบบ XML สำหรับอธิบายฟีดข่าว, การประกาศบทความ
`charset`	การเข้ารหัสของไฟล์ที่เชื่อมต่อ ในปัจจุบันมาตรฐานคือ `utf-8`
`type`	ประเภทข้อมูลของไฟล์ที่เชื่อมต่อ

ค่าของแอตทริบิวต์ media

ใน HTML5 ค่าสามารถระบุเป็น media queries ได้

ค่า	คำอธิบาย
`all`	อุปกรณ์ทั้งหมด
`screen`	จอภาพ
`handheld`	โทรศัพท์, สมาร์ทโฟน, อุปกรณ์ที่มีหน้าจอเล็ก
`braille`	อุปกรณ์ที่ใช้ระบบเบรลล์, ออกแบบมาสำหรับคนตาบอด
`speech`	ตัวสังเคราะห์เสียง, รวมถึงโปรแกรมสำหรับอ่านข้อความออกเสียง รวมถึงเบราว์เซอร์เสียงด้วย
`print`	เครื่องพิมพ์
`projection`	โปรเจคเตอร์
`tty`	เทเลไทป์, เทอร์มินัล, อุปกรณ์พกพาที่มีความสามารถของหน้าจอจำกัด ไม่ควรใช้พิกเซลเป็นหน่วยวัดสำหรับอุปกรณ์เหล่านี้
`tv`	โทรทัศน์ที่สามารถเปิด หน้าเว็บได้ (ก็มีเช่นกัน)

ค่าเริ่มต้น: all

ตัวอย่าง

มาดูโครงสร้างของ หน้า HTML ที่ง่ายที่สุดกัน ซึ่งเราเพิ่ม การเชื่อมต่อไฟล์ CSS และ favicon:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style1.css">
		<link rel="stylesheet" href="style2.css" media="screen">
		<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>

ดูเพิ่มเติม

แท็ก style,
ซึ่งเพิ่ม CSS ลงในหน้าโดยตรง
แอตทริบิวต์ style,
ซึ่งกำหนดสไตล์ให้กับแท็กเฉพาะ