home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีใช้ HTML <head> Element

เรียนรู้วิธีใช้ HTML <head> element บนเว็บไซต์ของคุณ

HTML <head> element เป็น container สำหรับ metadata (ข้อมูลเกี่ยวกับข้อมูล) ของหน้าเว็บ เช่น page title, styles, และ scripts

เนื้อหาภายใน <head> element จะถูก หลัก อ่านและประมวลผลโดย machines (เช่น browser) ไม่ใช่โดยผู้เยี่ยมชมเว็บไซต์

<head> element ไม่ควรสับสนกับ <header> element ซึ่งมีวัตถุประสงค์ต่างกัน

<head> element วางไว้ข้างใต้ opening <html> tag และข้างบน opening <body> tag:

<!DOCTYPE html>
<html>
<head>
<!-- Contains Metadata primarily for machine processing -->
</head>
<body></body>
</html>

HTML elements ต่อไปนี้สามารถวางภายใน <head> element ได้:

  • <title>
  • <link>
  • <style>
  • <meta>
  • <script>
  • <base>
  • <noscript>

ตัวอย่าง

มาดูตัวอย่างการใช้ <head> element พร้อม metadata elements ที่ใช้บ่อย

The <title> element

<title> element กำหนด title ของ HTML document ซึ่งแสดงในแท็บหน้าของ browser:

<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
</head>
<body></body>
</html>

หากคุณวางเมาส์เหนือแท็บหน้าเว็บไซต์ไหนๆ และค้างไว้ بضعวินาที จะเห็น popup แสดง page title ทั้งหมด

The <style> element

<style> element มีข้อมูล styling สำหรับ HTML document (typography, spacing, colors, animations, ฯลฯ) เขียนใน CSS:

<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<style type="text/css">
body { background-color: red; }
p { font-size: 18px; line-height: 1.5; }
</style>
</head>
<body></body>
</html>

วิธีที่ทันสมัยกว่าในการ apply styles ให้ HTML documents คือ import external CSS stylesheets ด้วย <link> element:

<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<link href="/styles/main.css" rel="stylesheet" />
</head>
<body></body>
</html>

ควรทราบ: หากคุณใช้ทั้ง <style> และ <link> element ใน document เดียวกัน styles จะถูก apply ตามลำดับที่คุณใส่ใน document CSS cascade ดังนั้นสิ่งที่อยู่ล่างสุด (จากบนลงล่าง) จะ override styles ก่อนหน้า หาก address HTML elements เดียวกัน

The <script> element

<script> element ใช้ execute JavaScript 2 วิธี:

  1. Embed JavaScript code โดยตรงใน document (เหมือนกับ <style> element)
  2. Import external JavaScript script files ผ่าน src attribute

Embed JavaScript code โดยตรงใน document:

<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<script>
// Make background color red
document.body.style.backgroundColor = "red"
</script>
</head>
<body></body>
</html>

Import external JavaScript file:

<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<script src="/scripts/main.js"></script>
</head>
<body></body>
</html>