พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน Head Element

<head> element ใน HTML5 เป็นส่วนที่ใช้ในการเก็บข้อมูลเมตาและองค์ประกอบต่าง ๆ ที่ไม่แสดงบนหน้าจอโดยตรง แต่มีผลต่อการทำงานของหน้าเว็บ เช่น การกำหนดข้อมูลที่เกี่ยวข้องกับ SEO, การเรียกใช้ไฟล์ CSS, การตั้งค่าไอคอน เป็นต้น

องค์ประกอบใน <head> ที่ใช้ได้ใน HTML5

<title>

กำหนดชื่อของหน้าเว็บ ซึ่งจะแสดงบนแถบเบราว์เซอร์หรือแท็บ

HTML
<head>
    <title>My Website</title>
</head>

<meta>

ใช้สำหรับกำหนดข้อมูลเมตาที่เกี่ยวกับหน้าเว็บ เช่น charset, description, keywords, viewport

– กำหนด charset (การเข้ารหัสตัวอักษร)

HTML
<head>
    <meta charset="UTF-8">
</head>

– กำหนด description สำหรับ SEO

HTML
<head>
    <meta name="description" content="This is an example of a description for SEO purposes.">
</head>

– กำหนด keywords สำหรับ SEO (แม้ว่าจะไม่ถูกใช้งานมากนักในปัจจุบัน)

HTML
<head>
    <meta name="keywords" content="HTML5, Head, SEO, Web Development">
</head>

– กำหนด viewport สำหรับการแสดงผลบนมือถือ

HTML
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<link>

ใช้สำหรับเชื่อมโยงไฟล์ CSS, ไอคอน, และไฟล์อื่น ๆ ที่เกี่ยวข้อง

– เชื่อมโยงไฟล์ CSS

HTML
<head>
    <link rel="stylesheet" href="styles.css">
</head>

– ตั้งค่าไอคอน

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

– เชื่อมโยงฟอนต์จากภายนอก (เช่น Google Fonts)

HTML
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>

<script>

ใช้ในการเชื่อมโยงหรือกำหนดสคริปต์ JavaScript ที่ใช้ในหน้าเว็บ

– เชื่อมโยงไฟล์ JavaScript ภายนอก

HTML
<head>
    <script src="script.js"></script>
</head>

– ใส่โค้ด JavaScript โดยตรง

HTML
<head>
    <script>
        console.log('Hello, World!');
    </script>
</head>

<style>

ใช้สำหรับใส่ CSS ภายในหน้าเว็บ

HTML
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
    </style>
</head>

<base>

ใช้ในการกำหนด URL พื้นฐานสำหรับลิงก์ในหน้าเว็บ

HTML
<head>
    <base href="https://www.example.com/">
</head>

<noscript>

ใช้สำหรับแสดงข้อความหรือเนื้อหาสำรองในกรณีที่เบราว์เซอร์ไม่รองรับ JavaScript

HTML
<head>
    <noscript>
        <style>
            body { display: none; }
        </style>
        <div>
            This website requires JavaScript to function properly. Please enable JavaScript in your browser settings.
        </div>
    </noscript>
</head>

ตัวอย่างการใช้งาน <head> ที่รวมองค์ประกอบทั้งหมด

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is an example of how to use the head element in HTML5.">
    <meta name="keywords" content="HTML5, Head, SEO, Web Development">
    
    <title>Example Head Element</title>
    
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    
    <script src="script.js"></script>
    
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #fff;
        }
    </style>
    
    <noscript>
        <div>
            JavaScript is required for this website to function properly. Please enable JavaScript.
        </div>
    </noscript>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

จากตัวอย่างนี้จะเห็นว่าการใช้ <head> ใน HTML5 นั้นสามารถประยุกต์ใช้งานได้หลากหลาย โดยมีการเชื่อมโยงไฟล์ CSS, ฟอนต์จากภายนอก, ไฟล์ JavaScript และยังสามารถกำหนดข้อมูลสำหรับ SEO และการแสดงผลบนอุปกรณ์ต่าง ๆ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ