ความรู้เบื้องต้นเกี่ยวกับโครงสร้าง HTML: องค์ประกอบพื้นฐานและไวยากรณ์

โครงสร้าง HTML มีบทบาทสำคัญในการสร้างหน้าเว็บ กำหนดวิธีการจัดระเบียบเนื้อหาและแสดงบนเว็บเพจ นี่คือการแนะนำโครงสร้าง HTML พื้นฐาน:

1. `Doctype`

Doctype(ประกาศประเภทเอกสาร) กำหนดเวอร์ชัน HTML ที่หน้าเว็บใช้ ควรวางไว้ที่จุดเริ่มต้นของไฟล์ HTML

2. แท็ก html

แท็ก html เป็นองค์ประกอบรูทของไฟล์ HTML ทุกไฟล์ สรุปเนื้อหาทั้งหมดของหน้าเว็บ

3. `head` แท็ก

แท็กส่วนหัวประกอบด้วยข้อมูลเกี่ยวกับหน้าเว็บที่ไม่ได้แสดงบนเบราว์เซอร์โดยตรง นี่คือที่ซึ่งกำหนดชื่อเรื่องของเพจ เมตาแท็ก ลิงก์ไปยังไฟล์ CSS และ JavaScript และองค์ประกอบอื่นๆ อีกมากมาย

4. `body` แท็ก

แท็ก body มีเนื้อหาทั้งหมดที่แสดงบนหน้าเว็บ นี่คือส่วนที่กำหนดองค์ประกอบต่างๆ เช่น ข้อความ รูปภาพ วิดีโอ ลิงก์ และส่วนประกอบส่วนต่อประสานผู้ใช้อื่นๆ

5. แท็กที่ซ้อนกัน

HTML ใช้โครงสร้างแบบลำดับชั้นพร้อมแท็กเปิดและแท็กปิด แท็กลูกจะอยู่ภายในแท็กหลัก ตัวอย่างเช่น แท็ก p(ย่อหน้า) สามารถมีแท็กช่วง(ข้อความในบรรทัด) แท็กที่แข็งแกร่ง(ข้อความตัวหนา) และแท็กอื่นๆ อีกมากมาย

6. แท็กทั่วไป

HTML มีแท็กมากมายสำหรับจัดรูปแบบและแสดงเนื้อหา ตัวอย่างเช่น แท็ก h1-h6(ส่วนหัว), แท็ก p(ย่อหน้า), แท็ก img(รูปภาพ), แท็ก(ลิงก์) และอื่นๆ อีกมากมาย

นี่คือตัวอย่างโครงสร้างหน้า HTML ที่สมบูรณ์:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

ในตัวอย่างข้างต้น เรามีหน้า HTML ที่สมบูรณ์ซึ่งมีองค์ประกอบหลัก เช่น doctype แท็ html ก head แท็ก และ body แท็ก ในส่วนหัว เรากำหนดชื่อหน้า ไฟล์ CSS และ JavaScript ที่จะใช้ ส่วนเนื้อหาประกอบด้วยองค์ประกอบต่างๆ เช่น ส่วนหัว ส่วนหลัก และส่วนท้าย เพื่อแสดงเนื้อหาของหน้าเว็บ

ด้วยการใช้โครงสร้าง HTML ที่ถูกต้อง คุณสามารถสร้างหน้าเว็บที่มีการจัดระเบียบอย่างดี อ่านได้ และโต้ตอบได้

โพสต์ก่อนหน้า

รู้เบื้องต้นเกี่ยวกับ HTML และไวยากรณ์พื้นฐาน: คู่มือสำหรับผู้เริ่มต้น

โพสต์ถัดไป