สอน HTML เบื้องต้น EP.2 - โครงสร้างของ HTML

Mac

21/07/2025

สำหรับคนที่มาอ่าน Blog นี้เป็น Blog แรก เราขอแนะนำให้อ่านบทความที่อยู่ในหัวข้อ อยากเป็น Frontend Developer ต้องรู้อะไรบ้าง? ก่อนนะครับเป็นหนึ่งใน Series Road to Frontend ที่จะช่วยให้คุณมีความรู้พื้นฐานที่จำเป็นสำหรับการเริ่มต้นเรียนรู้การพัฒนาเว็บไซต์

โครงสร้างพื้นฐานของ HTML Document

HTML Document ประกอบด้วยส่วนหลักๆ ดังนี้:

<!DOCTYPE html>
<html lang="th">
<head>
    <!-- Metadata ต่างๆ อยู่ที่นี่ -->
</head>
<body>
    <!-- เนื้อหาที่ผู้ใช้จะเห็นอยู่ที่นี่ -->
</body>
</html>

ส่วนประกอบที่จำเป็นสำหรับทุก HTML Document

1. `<!DOCTYPE html>`

DOCTYPE เป็นส่วนแรกสุดที่ต้องมีในทุก HTML Document

<!DOCTYPE html>

ทำไมต้องมี DOCTYPE?

บอกให้ Browser รู้ว่าเอกสารนี้เป็น HTML5
ป้องกันการทำงานในโหมด “Quirks Mode” ที่อาจทำให้การแสดงผลผิดเพี้ยน
ทำให้ Browser ใช้ Standards Mode ในการแสดงผล

สำคัญ: ต้องวางไว้บรรทัดแรกสุด ก่อนแท็ก HTML อื่นๆ ทั้งหมด

2. `<html>` Element

HTML Element คือ Root Element ของทั้งเอกสาร

<html lang="th">
    <!-- เนื้อหาทั้งหมดอยู่ข้างใน -->
</html>

Attribute สำคัญ: `lang`

lang="th" = ระบุว่าเนื้อหาหลักเป็นภาษาไทย
lang="en" = ระบุว่าเนื้อหาหลักเป็นภาษาอังกฤษ
lang="en-US" = ระบุภาษาอังกฤษ (สหรัฐอเมริกา)

ประโยชน์ของการระบุภาษา:

Screen Reader อ่านเนื้อหาได้ถูกต้อง
Search Engine เข้าใจภาษาของเนื้อหา
Translation Service แปลภาษาได้แม่นยำ
CSS สามารถเลือก Element ตามภาษาได้ (อนาคตจะมีสอนเรื่อง Basic CSS ด้วย)

/* ตัวอย่างการใช้ CSS Selector กับภาษา */
:lang(th) {
    font-family: "Sarabun", sans-serif;
}

:lang(en) {
    font-family: "Arial", sans-serif;
}

3. `<head>` Section

Head Section เป็นส่วนที่เก็บ Metadata (ข้อมูลเกี่ยวกับข้อมูล) ซึ่งไม่แสดงให้ผู้ใช้เห็น แต่สำคัญมากสำหรับ:

Browser
Search Engine
Social Media Platform
Accessibility Tools

ส่วนประกอบสำคัญใน `<head>`

1. Character Encoding (การเข้ารหัสตัวอักษร)

<meta charset="utf-8" />

ทำไมต้องใส่ก่อนทุกอย่าง?

UTF-8 รองรับตัวอักษรทุกภาษาในโลก รวมถึงภาษาไทย
ต้องวางก่อน <title> เพื่อให้ Browser อ่านชื่อเรื่องได้ถูกต้อง
รองรับ Emoji และตัวอักษรพิเศษ

<!-- ✅ ถูกต้อง -->
<head>
    <meta charset="utf-8" />
    <title>เว็บไซต์ของฉัน 🚀</title>
</head>

<!-- ❌ ผิด - charset อยู่หลัง title -->
<head>
    <title>เว็บไซต์ของฉัน 🚀</title>
    <meta charset="utf-8" />
</head>

2. Document Title

<title>ชื่อหน้าเว็บของคุณ</title>

Title ปรากฏตรงไหนบ้าง?

Browser Tab = แสดงเป็นชื่อแท็บ
Search Results = แสดงเป็นหัวข้อผลการค้นหา
Social Media = แสดงเมื่อแชร์ลิงก์
Browser History = แสดงในประวัติการเข้าชม
Bookmarks = แสดงเมื่อบุ๊กมาร์ก

เขียน Title ที่ดี:

<!-- ✅ ดี - ชัดเจน ไม่ยาว -->
<title>สอน HTML เบื้องต้น - DozilHub</title>

<!-- ✅ ดี - มี Brand -->
<title>วิธีทำเค้กช็อกโกแลต | ครัวคุณแม่</title>

<!-- ❌ ไม่ดี - ยาวเกินไป -->
<title>สอน HTML เบื้องต้น EP.2 โครงสร้างของ HTML สำหรับ Frontend Developer ที่อยากเรียนรู้การพัฒนาเว็บไซต์</title>

<!-- ❌ ไม่ดี - ไม่มีความหมาย -->
<title>หน้าแรก</title>

3. Viewport Meta Tag

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

ทำไมต้องมี Viewport?

ทำให้เว็บไซต์ Responsive = ปรับขนาดตามหน้าจอ
ป้องกันการ Zoom ออก = เนื้อหาไม่เล็กจนอ่านไม่ได้
ใช้งานได้ดีบนมือถือ = UX ที่ดี

<!-- ตัวอย่างการตั้งค่า Viewport ต่างๆ -->

<!-- พื้นฐาน - ใช้กันมากที่สุด -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ป้องกันการ Zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- กำหนดระดับ Zoom สูงสุด/ต่ำสุด -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">

4. CSS และ JavaScript Links

เดียว EP หน้าๆ เราจะมาอธิบายเพิ่มเติมนะครับ ตอนนี้รู้คร่าวๆ ก่อน

CSS Stylesheet

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

JavaScript Files

<!-- JavaScript ปกติ -->
<script src="js/app.js"></script>

<!-- JavaScript แบบ Defer (แนะนำ) -->
<script src="js/app.js" defer></script>

<!-- JavaScript แบบ Async -->
<script src="js/analytics.js" async></script>

ความแตกต่างของ defer และ async:

<!-- ⚡ ไม่มี attribute: โหลดและรันทันที (บล็อก HTML) -->
<script src="script.js"></script>

<!-- 🚀 defer: โหลดพร้อมกับ HTML, รันหลังจาก HTML เสร็จ -->
<script src="script.js" defer></script>

<!-- ⚡ async: โหลดพร้อมกับ HTML, รันทันทีที่โหลดเสร็จ -->
<script src="script.js" async></script>

5. Favicon และ Icons

<!-- Favicon พื้นฐาน -->
<link rel="icon" type="image/png" href="/images/favicon.png" />

<!-- Favicon สำหรับ Apple -->
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />

<!-- Favicon หลายขนาด -->
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">

6. Meta Tags สำคัญอื่นๆ

Description สำหรับ SEO

<meta name="description" content="เรียนรู้ HTML เบื้องต้นสำหรับ Frontend Developer ตั้งแต่พื้นฐานจนทำเว็บไซต์ได้">

Keywords (ไม่จำเป็นแล้วใน SEO สมัยใหม่)

<meta name="keywords" content="HTML, Frontend, Web Development, ไทย">

Author

<meta name="author" content="DozilHub">

Robots (ควบคุม Search Engine)

<!-- อนุญาตให้ Index และ Follow links -->
<meta name="robots" content="index, follow">

<!-- ห้าม Index หน้านี้ -->
<meta name="robots" content="noindex, nofollow">

สำหรับเวลาเราโพสต์ Website ลง Social Media เราจะต้องใช้ Open Graph เพื่อบอกว่าบล็อกนี้คืออะไร มีรายละเอียดอะไรบ้าง มีรูปภาพอะไรบ้าง เป็นต้น

<!-- Facebook Open Graph -->
<meta property="og:title" content="สอน HTML เบื้องต้น">
<meta property="og:description" content="เรียนรู้ HTML สำหรับ Frontend Developer">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="สอน HTML เบื้องต้น">
<meta name="twitter:description" content="เรียนรู้ HTML สำหรับ Frontend Developer">
<meta name="twitter:image" content="https://example.com/image.jpg">

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

<!DOCTYPE html>
<html lang="th">
<head>
    <!-- 1. Character Encoding (ต้องมาก่อน) -->
    <meta charset="utf-8">
    
    <!-- 2. Viewport (สำหรับ Responsive) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 3. Title (จำเป็น) -->
    <title>สอน HTML เบื้องต้น - DozilHub</title>
    
    <!-- 4. Meta Tags สำหรับ SEO -->
    <meta name="description" content="เรียนรู้ HTML เบื้องต้นสำหรับ Frontend Developer">
    <meta name="author" content="DozilHub">
    <meta name="robots" content="index, follow">
    
    <!-- 5. Open Graph สำหรับ Social Media -->
    <meta property="og:title" content="สอน HTML เบื้องต้น">
    <meta property="og:description" content="เรียนรู้ HTML สำหรับ Frontend Developer">
    <meta property="og:image" content="https://dozilhub.com/image.jpg">
    <meta property="og:type" content="article">
    
    <!-- 6. Favicon -->
    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    
    <!-- 7. CSS (โหลดก่อน JavaScript) -->
    <link rel="stylesheet" href="css/styles.css">
    
    <!-- 8. JavaScript (ใส่ defer) -->
    <script src="js/app.js" defer></script>
</head>
<body>
    <!-- เนื้อหาที่ผู้ใช้เห็นอยู่ที่นี่ -->
    <h1>ยินดีต้อนรับสู่เว็บไซต์ของเรา</h1>
    <p>เนื้อหาหลักของหน้าเว็บ</p>
</body>
</html>

การใช้ HTML Comments

<!-- นี่คือ Comment ใน HTML -->
<!-- Comments จะไม่แสดงให้ผู้ใช้เห็น -->

<!DOCTYPE html>
<html lang="th">
<head>
    <!-- Meta Tags สำคัญ -->
    <meta charset="utf-8">
    <title>เว็บไซต์ของฉัน</title>
    
    <!-- CSS Files -->
    <link rel="stylesheet" href="css/styles.css">
    
    <!-- JavaScript ที่ยังไม่ใช้ -->
    <!-- <script src="js/unused.js"></script> -->
</head>
<body>
    <!-- เนื้อหาหลัก -->
    <main>
        <h1>หัวข้อหลัก</h1>
    </main>
</body>
</html>

Best Practices สำหรับโครงสร้าง HTML

1. ลำดับการวาง Elements ใน `<head>`

<head>
    <!-- 1. Charset ต้องมาก่อน -->
    <meta charset="utf-8">
    
    <!-- 2. Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 3. Title -->
    <title>ชื่อหน้า</title>
    
    <!-- 4. Meta Tags อื่นๆ -->
    <meta name="description" content="...">
    
    <!-- 5. Open Graph -->
    <meta property="og:title" content="...">
    
    <!-- 6. Favicon -->
    <link rel="icon" href="...">
    
    <!-- 7. CSS -->
    <link rel="stylesheet" href="...">
    
    <!-- 8. JavaScript (ถ้าจำเป็น) -->
    <script src="..." defer></script>
</head>

2. การจัดการ JavaScript

<!-- ❌ ไม่ดี - JavaScript ใน head (บล็อก rendering) -->
<head>
    <script src="heavy-script.js"></script>
</head>

<!-- ✅ ดีกว่า - JavaScript ใน head แต่มี defer -->
<head>
    <script src="heavy-script.js" defer></script>
</head>

<!-- ✅ ดี - JavaScript ก่อนปิด body -->
<body>
    <!-- เนื้อหา -->
    <script src="heavy-script.js"></script>
</body>

<!-- ✅ ดีที่สุด - JavaScript ใน head + defer -->
<head>
    <script src="app.js" defer></script>
</head>

3. การใช้ Language Attributes

<!-- ภาษาหลักของเอกสาร -->
<html lang="th">

<!-- ข้อความที่เป็นภาษาอื่น -->
<p>
    คำว่า <span lang="en">Frontend Developer</span> 
    หมายถึง นักพัฒนาส่วนหน้า
</p>

<!-- ข้อความภาษาฝรั่งเศส -->
<blockquote lang="fr">
    "C'est la vie"
</blockquote>

ข้อควรระวังและข้อผิดพลาดที่พบบ่อย

1. ❌ ลืมใส่ DOCTYPE

<!-- ผิด -->
<html>
<head>...</head>
</html>

<!-- ถูก -->
<!DOCTYPE html>
<html>
<head>...</head>
</html>

2. ❌ Charset ไม่อยู่ในตำแหน่งแรก

<!-- ผิด -->
<head>
    <title>เว็บไซต์</title>
    <meta charset="utf-8">
</head>

<!-- ถูก -->
<head>
    <meta charset="utf-8">
    <title>เว็บไซต์</title>
</head>

3. ❌ ไม่ใส่ Viewport

<!-- ผิด - เว็บไซต์จะไม่ Responsive -->
<head>
    <meta charset="utf-8">
    <title>เว็บไซต์</title>
</head>

<!-- ถูก -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>เว็บไซต์</title>
</head>

4. ❌ Title ที่ไม่เหมาะสม

<!-- ผิด -->
<title>หน้าแรก</title>
<title>ไม่มีชื่อ</title>
<title>Untitled Document</title>

<!-- ถูก -->
<title>บริการรับทำเว็บไซต์ - บริษัท ABC</title>
<title>สูตรอาหารไทย - คลังสูตรอาหาร</title>

สรุป

โครงสร้างของ HTML Document เป็นพื้นฐานสำคัญที่ Frontend Developer ต้องเข้าใจ:

✅ สิ่งที่ต้องมีทุกหน้า:

DOCTYPE = <!DOCTYPE html>
HTML Element with Lang = <html lang="th">
Character Encoding = <meta charset="utf-8">
Viewport = <meta name="viewport" content="width=device-width, initial-scale=1.0">
Title = <title>ชื่อหน้าที่มีความหมาย</title>

🚀 สิ่งที่ควรมี:

Meta Description สำหรับ SEO
Open Graph สำหรับ Social Media
Favicon สำหรับ Browser Tab
CSS และ JavaScript ที่จัดเรียงอย่างเหมาะสม

📚 ประโยชน์ของโครงสร้างที่ดี:

SEO ดีขึ้น = Search Engine เข้าใจเนื้อหาได้ดี
Performance ดีขึ้น = โหลดเร็วขึ้น
Accessibility ดีขึ้น = ใช้งานได้ง่ายสำหรับทุกคน
Social Media Ready = แชร์ลิงก์แล้วสวยงาม

ในบทความต่อไป เราจะเรียนรู้เกี่ยวกับ Semantic HTML เพื่อให้เว็บไซต์มีความหมายและเข้าถึงได้ง่ายมากขึ้นครับ!

#Frontend #Road-To-Frontend #HTML

แหล่งข้อมูลอ้างอิง:

web.dev - Learn HTML