Semantic HTML - เว็บไซต์ที่เข้าใจได้ทั้งคนและเครื่องจักร

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการสร้างฟอร์ม HTML เพื่อรับข้อมูลจากผู้ใช้ ซึ่งเป็นส่วนสำคัญในการสร้างปฏิสัมพันธ์กับเว็บไซต์ ในบทนี้ เราจะก้าวไปอีกขั้นด้วยการทำความเข้าใจและใช้งาน Semantic HTML ซึ่งจะช่วยให้เว็บไซต์ของเราไม่เพียงแต่ดูดี แต่ยังมีความหมายที่ชัดเจนทั้งสำหรับผู้ใช้งานและ Search Engine อีกด้วย

Semantic HTML คือการใช้แท็ก HTML ที่มีความหมาย (Semantic) เพื่ออธิบายโครงสร้างและความหมายของเนื้อหาบนเว็บไซต์ แทนที่จะใช้เพียงแค่แท็ก <div> และ <span> ที่ไม่มีความหมายเฉพาะเจาะจง การใช้ Semantic HTML อย่างถูกต้องจะช่วยปรับปรุง SEO (Search Engine Optimization) และ Accessibility (การเข้าถึงเว็บไซต์สำหรับผู้พิการ) ได้อย่างมาก

ทำไมต้อง Semantic HTML?

ลองจินตนาการว่าเว็บไซต์ของคุณเป็นหนังสือ ถ้าคุณใช้เพียงแค่ตัวอักษรขนาดเดียวกันทั้งหมด ไม่มีหัวเรื่อง ไม่มีบทนำ ไม่มีบทสรุป ผู้อ่านก็จะสับสนและไม่เข้าใจว่าเนื้อหาในแต่ละส่วนมีความสำคัญอย่างไร Search Engine ก็เช่นกัน หากเว็บไซต์ของคุณเต็มไปด้วย <div> ที่ไม่มีความหมาย Search Engine ก็จะยากที่จะเข้าใจว่าเนื้อหาของคุณเกี่ยวกับอะไร และจะจัดอันดับเว็บไซต์ของคุณอย่างไร

ประโยชน์ของการใช้ Semantic HTML มีมากมาย ดังนี้:

• SEO ที่ดีขึ้น: Search Engine สามารถเข้าใจโครงสร้างและเนื้อหาของเว็บไซต์ได้ง่ายขึ้น ทำให้จัดอันดับเว็บไซต์ได้ดีขึ้น
• Accessibility ที่ดีขึ้น: ผู้ใช้งานที่ใช้โปรแกรมอ่านหน้าจอ (Screen Reader) จะสามารถเข้าใจโครงสร้างของเว็บไซต์และนำทางได้อย่างมีประสิทธิภาพ
• โค้ดที่อ่านง่ายและบำรุงรักษาง่าย: โค้ด Semantic HTML มีความหมายที่ชัดเจน ทำให้ง่ายต่อการอ่าน ทำความเข้าใจ และแก้ไข
• ประสบการณ์ผู้ใช้ที่ดีขึ้น: การจัดโครงสร้างเนื้อหาที่ชัดเจนช่วยให้ผู้ใช้งานสามารถค้นหาสิ่งที่ต้องการได้ง่ายขึ้น

แท็ก Semantic HTML ที่ควรรู้

HTML5 ได้เพิ่มแท็ก Semantic ใหม่ๆ เข้ามามากมาย ซึ่งช่วยให้เราสามารถอธิบายโครงสร้างของเว็บไซต์ได้อย่างละเอียดและมีความหมายมากขึ้น แท็กที่สำคัญและใช้งานบ่อยมีดังนี้:

1. <header>

แท็ก <header> ใช้สำหรับส่วนหัวของเว็บไซต์ หรือส่วนหัวของแต่ละส่วน (section) ภายในเว็บไซต์ มักจะประกอบด้วยชื่อเว็บไซต์ โลโก้ เมนูนำทาง และข้อมูลอื่นๆ ที่เป็นส่วนหัวของเนื้อหา

<header>
  <h1>เว็บไซต์ของฉัน</h1>
  <nav>
    <ul>
      <li><a href="#">หน้าแรก</a></li>
      <li><a href="#">เกี่ยวกับเรา</a></li>
      <li><a href="#">ติดต่อเรา</a></li>
    </ul>
  </nav>
</header>

2. <nav>

แท็ก <nav> ใช้สำหรับส่วนนำทางของเว็บไซต์ มักจะประกอบด้วยเมนูลิงก์ที่ช่วยให้ผู้ใช้งานสามารถไปยังหน้าต่างๆ ในเว็บไซต์ได้

<nav>
  <ul>
    <li><a href="#">หน้าแรก</a></li>
    <li><a href="#">เกี่ยวกับเรา</a></li>
    <li><a href="#">บริการ</a></li>
    <li><a href="#">ติดต่อเรา</a></li>
  </ul>
</nav>

3. <article>

แท็ก <article> ใช้สำหรับเนื้อหาที่เป็นอิสระและสามารถนำไปเผยแพร่ซ้ำได้ เช่น บทความข่าว บล็อกโพสต์ หรือความคิดเห็น ผู้ใช้งานควรจะสามารถเข้าใจเนื้อหาใน <article> ได้โดยไม่ต้องอาศัยบริบทอื่น

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

4. <aside>

แท็ก <aside> ใช้สำหรับเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลัก แต่ไม่ได้เป็นส่วนสำคัญของเนื้อหาหลัก เช่น แถบด้านข้าง โฆษณา หรือข้อมูลเพิ่มเติม

<article>
  <h2>หัวข้อบทความ</h2>
  <p>เนื้อหาของบทความ...</p>
  <aside>
    <h3>ข้อมูลเพิ่มเติม</h3>
    <p>เนื้อหาเพิ่มเติมที่เกี่ยวข้องกับบทความ...</p>
  </aside>
</article>

5. <footer>

แท็ก <footer> ใช้สำหรับส่วนท้ายของเว็บไซต์ หรือส่วนท้ายของแต่ละส่วน (section) ภายในเว็บไซต์ มักจะประกอบด้วยข้อมูลลิขสิทธิ์ ข้อมูลติดต่อ หรือลิงก์ไปยังหน้าอื่นๆ ที่เกี่ยวข้อง

<footer>
  <p>© 2023 เว็บไซต์ของฉัน สงวนลิขสิทธิ์</p>
</footer>

6. <main>

แท็ก <main> ใช้สำหรับเนื้อหาหลักของหน้าเว็บ ควรมีเพียง <main> เดียวต่อหน้าเว็บ

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

7. <section>

แท็ก <section> ใช้สำหรับแบ่งเนื้อหาออกเป็นส่วนๆ ที่มีความเกี่ยวข้องกัน ควรมีหัวเรื่อง (heading) ภายใน <section> เสมอ

<section>
  <h2>ส่วนที่ 1: บทนำ</h2>
  <p>เนื้อหาของส่วนที่ 1...</p>
</section>

<section>
  <h2>ส่วนที่ 2: เนื้อหาหลัก</h2>
  <p>เนื้อหาของส่วนที่ 2...</p>
</section>

การเลือกใช้แท็กให้เหมาะสม

การเลือกใช้แท็ก Semantic ให้เหมาะสมเป็นสิ่งสำคัญเพื่อให้เว็บไซต์ของคุณมีความหมายที่ชัดเจนและถูกต้อง นี่คือแนวทางในการเลือกใช้แท็ก:

• <header>: ใช้สำหรับส่วนหัวของเว็บไซต์หรือส่วนหัวของแต่ละส่วน
• <nav>: ใช้สำหรับเมนูนำทางของเว็บไซต์
• <main>: ใช้สำหรับเนื้อหาหลักของหน้าเว็บ
• <article>: ใช้สำหรับเนื้อหาที่เป็นอิสระและสามารถนำไปเผยแพร่ซ้ำได้
• <aside>: ใช้สำหรับเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลัก แต่ไม่ได้เป็นส่วนสำคัญ
• <section>: ใช้สำหรับแบ่งเนื้อหาออกเป็นส่วนๆ ที่มีความเกี่ยวข้องกัน
• <footer>: ใช้สำหรับส่วนท้ายของเว็บไซต์หรือส่วนท้ายของแต่ละส่วน

ตัวอย่างการใช้ Semantic HTML

ลองมาดูตัวอย่างการใช้ Semantic HTML เพื่อสร้างโครงสร้างเว็บไซต์:

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>เว็บไซต์ Semantic HTML</title>
</head>
<body>

  <header>
    <h1>เว็บไซต์ Semantic HTML</h1>
    <nav>
      <ul>
        <li><a href="#">หน้าแรก</a></li>
        <li><a href="#">เกี่ยวกับเรา</a></li>
        <li><a href="#">บริการ</a></li>
        <li><a href="#">ติดต่อเรา</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>บทความเกี่ยวกับ Semantic HTML</h2>
      <p>เนื้อหาของบทความเกี่ยวกับ Semantic HTML...</p>
    </article>

    <aside>
      <h3>ลิงก์ที่เกี่ยวข้อง</h3>
      <ul>
        <li><a href="#">MDN Web Docs: Semantic HTML</a></li>
        <li><a href="#">W3C: HTML Semantics</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2023 เว็บไซต์ Semantic HTML สงวนลิขสิทธิ์</p>
  </footer>

</body>
</html>

สรุป

Semantic HTML เป็นเครื่องมือที่ทรงพลังในการสร้างเว็บไซต์ที่มีความหมายที่ชัดเจนทั้งสำหรับผู้ใช้งานและ Search Engine การใช้แท็ก Semantic อย่างถูกต้องจะช่วยปรับปรุง SEO, Accessibility, และความสามารถในการบำรุงรักษาเว็บไซต์ของคุณ ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับแท็ก <div> และ <span> ซึ่งเป็นแท็กที่ใช้กันอย่างแพร่หลายในการจัดโครงสร้างเนื้อหาบนเว็บไซต์