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

HTML5 Style Guide

Style Guide ใน HTML5 คือการกำหนดรูปแบบและโครงสร้างของการเขียนโค้ด HTML ให้เป็นมาตรฐานเดียวกัน โดยมีจุดประสงค์เพื่อให้โค้ดอ่านง่าย เข้าใจง่าย และง่ายต่อการบำรุงรักษาในระยะยาว อีกทั้งยังช่วยให้หลายคนสามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพเมื่อทำงานเป็นทีม

หลักการของ Style Guide ใน HTML5

โครงสร้างของไฟล์ HTML (HTML Document Structure)

  • ใช้โครงสร้าง HTML ที่ถูกต้องและตามมาตรฐาน โดยเริ่มต้นไฟล์ด้วย <!DOCTYPE html> และระบุ html, head, และ body ให้ชัดเจน

ตัวอย่าง

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างเว็บไซต์</title>
</head>
<body>
    <header>
        <h1>ยินดีต้อนรับสู่เว็บไซต์</h1>
    </header>
    <main>
        <p>เนื้อหาหลักของเว็บไซต์</p>
    </main>
    <footer>
        <p>ลิขสิทธิ์ © 2024</p>
    </footer>
</body>
</html>

การเว้นวรรคและการเยื้อง (Indentation)

  • ใช้การเว้นวรรคหรือเยื้อง (Indentation) เพื่อให้โค้ดอ่านง่ายขึ้น โดยทั่วไปใช้การเยื้อง 2 หรือ 4 ช่องว่างตามที่ทีมตกลง
  • การเยื้องจะช่วยให้โค้ดดูเป็นระเบียบและง่ายต่อการระบุระดับของการซ้อนกันของแท็ก

ตัวอย่าง

HTML
<article>
    <header>
        <h2>หัวข้อบทความ</h2>
    </header>
    <p>เนื้อหาของบทความ</p>
</article>

การตั้งชื่อคลาสและไอดี (Naming Conventions)

  • การตั้งชื่อ class และ id ควรสื่อถึงความหมายที่ชัดเจน และใช้รูปแบบที่คงที่ เช่น การใช้เคส kebab-case หรือ camelCase
  • ใช้ชื่อที่สื่อความหมาย เช่น header-main แทน header1 เพื่อให้เข้าใจหน้าที่ของแต่ละองค์ประกอบได้ง่ายขึ้น

ตัวอย่าง

HTML
<section id="main-content">
    <div class="article-summary">
        <h3>บทสรุปของบทความ</h3>
        <p>รายละเอียดเพิ่มเติม...</p>
    </div>
</section>

การจัดการกับอักขระพิเศษ (HTML Entities)

  • เมื่อเขียนอักขระพิเศษใน HTML ควรใช้การเข้ารหัสแบบ HTML Entities เพื่อหลีกเลี่ยงปัญหาการแสดงผลผิดพลาด เช่น &copy; สำหรับสัญลักษณ์ลิขสิทธิ์ และ &amp; สำหรับสัญลักษณ์แอมเพอร์แซนด์

ตัวอย่าง

HTML
<p>ลิขสิทธิ์ © 2024</p>

องค์ประกอบเชิงความหมาย (Semantic HTML)

  • ใช้แท็ก HTML5 ที่มีความหมายเฉพาะเจาะจง (Semantic Elements) เช่น <article>, <section>, <header>, <footer> แทนการใช้ <div> เพื่อช่วยให้อ่านและเข้าใจโครงสร้างได้ง่ายยิ่งขึ้น และยังช่วยให้ SEO ทำงานได้ดียิ่งขึ้น

ตัวอย่าง

HTML
<article>
    <header>
        <h1>หัวข้อบทความ</h1>
        <p>เขียนโดย: สมชาย สบายใจ</p>
    </header>
    <section>
        <p>เนื้อหาของบทความ</p>
    </section>
</article>

การแสดงความคิดเห็นในโค้ด (Commenting Code)

  • ใส่คอมเมนต์ (Comment) เพื่ออธิบายว่าโค้ดส่วนนั้นทำหน้าที่อะไร เพื่อให้ผู้อ่านเข้าใจได้ง่าย และใช้การใส่คอมเมนต์อย่างมีความหมายและไม่มากเกินไป
  • คอมเมนต์ HTML ใช้ <!-- -->

ตัวอย่าง

HTML
<!-- ส่วนของเมนูนำทาง -->
<nav>
    <ul>
        <li><a href="#">หน้าแรก</a></li>
        <li><a href="#">เกี่ยวกับเรา</a></li>
        <li><a href="#">ติดต่อเรา</a></li>
    </ul>
</nav>

การใช้ตัวพิมพ์เล็ก (Lowercase Tags and Attributes)

  • ใช้แท็ก HTML และแอตทริบิวต์ทั้งหมดในรูปแบบตัวพิมพ์เล็ก (lowercase) เพื่อให้เป็นไปตามมาตรฐานของ HTML5

ตัวอย่าง

HTML
<img src="image.jpg" alt="รูปภาพตัวอย่าง">

การใช้โครงสร้างที่เหมาะสม (Proper Nesting)

  • ใช้การซ้อนแท็ก (Nesting) อย่างถูกต้องตามหลักของ HTML เช่นไม่ควรใส่แท็กบล็อค (block-level) ภายในแท็กอินไลน์ (inline-level)

ตัวอย่าง

HTML
<p>นี่คือย่อหน้าที่มี <strong>ตัวหนา</strong> และ <em>ตัวเอียง</em></p>

การใช้การปิดแท็ก (Closing Tags)

  • ปิดแท็กทุกครั้งที่เป็นแท็กที่ต้องการการปิด เพื่อหลีกเลี่ยงปัญหาในการแสดงผลและการบำรุงรักษาโค้ด
  • แท็กที่ไม่ต้องปิดเองจะเป็นแท็กที่กำหนดอยู่แล้ว เช่น <img>, <br>, <hr>

ตัวอย่าง

HTML
<img src="logo.png" alt="โลโก้">
<hr>

สรุป

การปฏิบัติตาม Style Guide ในการเขียน HTML5 เป็นเรื่องสำคัญที่จะช่วยให้โค้ดดูสะอาดตา อ่านง่าย และบำรุงรักษาได้ง่าย รวมถึงช่วยให้โค้ดสามารถปรับปรุงและทำงานร่วมกันได้ดียิ่งขึ้น

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

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