การสร้าง Layout ด้วย HTML5 Semantic Elements

ในบทที่แล้ว เราได้เรียนรู้เรื่องการใช้ CSS Selectors เพื่อปรับแต่งสไตล์ของ HTML elements ต่างๆ กันไป ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับการสร้างโครงสร้างเว็บไซต์ (Layout) ที่มีความหมายและเป็นระเบียบมากขึ้น โดยใช้สิ่งที่เรียกว่า "HTML5 Semantic Elements" กันครับ

Semantic Elements คืออะไร?

ก่อนที่เราจะไปลงมือสร้าง Layout กันจริงๆ เรามาทำความเข้าใจก่อนว่า Semantic Elements คืออะไร ทำไมถึงสำคัญ? Semantic Elements คือ HTML elements ที่มีความหมายในตัวเอง ช่วยบอกให้ทั้ง Browser, Search Engine และนักพัฒนาคนอื่นๆ เข้าใจโครงสร้างของเว็บไซต์เราได้ง่ายขึ้น

ลองนึกภาพว่าถ้าเราใช้ <div> ทั้งหมดในการสร้างเว็บไซต์ มันจะดูเหมือนกล่องสี่เหลี่ยมที่ไม่มีความหมายอะไรเลยใช่ไหมครับ? แต่ถ้าเราใช้ Semantic Elements เช่น <header>, <nav>, <main>, <article>, <aside>, และ <footer> มันจะทำให้โครงสร้างของเว็บไซต์เราชัดเจนขึ้นมาก

Semantic Elements ที่ควรรู้จัก

ต่อไปนี้คือ Semantic Elements ที่เราจะใช้กันบ่อยๆ ในการสร้าง Layout:

• <header>: ส่วนหัวของเว็บไซต์ หรือส่วนหัวของ Section ใดๆ
• <nav>: ส่วนของการนำทาง (Navigation Menu)
• <main>: เนื้อหาหลักของเว็บไซต์
• <article>: เนื้อหาที่เป็นอิสระ เช่น บทความ, ข่าว, บล็อกโพสต์
• <aside>: เนื้อหาที่เกี่ยวข้องกับเนื้อหาหลัก แต่ไม่จำเป็นต้องเป็นส่วนหนึ่งของเนื้อหาหลัก เช่น Sidebar, โฆษณา
• <footer>: ส่วนท้ายของเว็บไซต์ หรือส่วนท้ายของ Section ใดๆ
• <section>: ส่วนย่อยของเว็บไซต์ ใช้แบ่งเนื้อหาออกเป็นส่วนๆ

การใช้งาน Semantic Elements: Step-by-Step

เรามาลองสร้าง Layout ง่ายๆ โดยใช้ Semantic Elements กันครับ

ขั้นตอนที่ 1: โครงสร้าง HTML เบื้องต้น

เริ่มต้นด้วยโครงสร้าง HTML พื้นฐาน:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic Layout</title>
</head>
<body>

</body>
</html>

ขั้นตอนที่ 2: เพิ่ม Header

เพิ่ม <header> เพื่อแสดงส่วนหัวของเว็บไซต์:

<body>
  <header>
    <h1>My Awesome Website</h1>
    <p>Welcome to my website!</p>
  </header>
</body>

ขั้นตอนที่ 3: เพิ่ม Navigation

เพิ่ม <nav> เพื่อแสดงเมนูนำทาง:

<body>
  <header>
    <h1>My Awesome Website</h1>
    <p>Welcome to my website!</p>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>

ขั้นตอนที่ 4: เพิ่ม Main Content

เพิ่ม <main> เพื่อแสดงเนื้อหาหลักของเว็บไซต์:

<body>
  <header>
    <h1>My Awesome Website</h1>
    <p>Welcome to my website!</p>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>This is the content of the article.</p>
    </article>

    <article>
      <h2>Another Article Title</h2>
      <p>This is another article on the website.</p>
    </article>
  </main>
</body>

ขั้นตอนที่ 5: เพิ่ม Aside (Sidebar)

เพิ่ม <aside> เพื่อแสดง Sidebar:

<body>
  <header>
    <h1>My Awesome Website</h1>
    <p>Welcome to my website!</p>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>This is the content of the article.</p>
    </article>

    <article>
      <h2>Another Article Title</h2>
      <p>This is another article on the website.</p>
    </article>
  </main>

  <aside>
    <h3>About Me</h3>
    <p>This is a short description about me.</p>
  </aside>
</body>

ขั้นตอนที่ 6: เพิ่ม Footer

เพิ่ม <footer> เพื่อแสดงส่วนท้ายของเว็บไซต์:

<body>
  <header>
    <h1>My Awesome Website</h1>
    <p>Welcome to my website!</p>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>This is the content of the article.</p>
    </article>

    <article>
      <h2>Another Article Title</h2>
      <p>This is another article on the website.</p>
    </article>
  </main>

  <aside>
    <h3>About Me</h3>
    <p>This is a short description about me.</p>
  </aside>

  <footer>
    <p>Copyright 2023 My Awesome Website</p>
  </footer>
</body>

ตอนนี้เราก็ได้ Layout พื้นฐานที่ใช้ Semantic Elements แล้วครับ ลองเอาโค้ดนี้ไปใส่ในไฟล์ HTML แล้วเปิดใน Browser ดูได้เลย

การจัด Layout ด้วย CSS

ถึงแม้ว่าเราจะใช้ Semantic Elements ในการสร้างโครงสร้าง HTML แล้ว แต่หน้าตาของเว็บไซต์เราอาจจะยังไม่สวยงามเท่าไหร่ เราต้องใช้ CSS เพื่อจัด Layout ให้สวยงามและตอบสนองต่อขนาดหน้าจอต่างๆ

ตัวอย่างเช่น เราสามารถใช้ CSS Grid หรือ Flexbox เพื่อจัด Layout ให้ <main> และ <aside> ให้อยู่ข้างๆ กันได้:

<style>
  body {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Main takes 3/4 of the space, Aside takes 1/4 */
    grid-gap: 20px;
  }

  header, nav, footer {
    grid-column: 1 / span 2; /* Span across both columns */
  }

  main {
    grid-column: 1;
  }

  aside {
    grid-column: 2;
  }
</style>

เพิ่ม CSS นี้ใน <head> tag ของ HTML ไฟล์เรา แล้วลอง Refresh Browser ดู จะเห็นว่า <main> และ <aside> จะอยู่ข้างๆ กันแล้ว

กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

• การซ้อน Semantic Elements: เราสามารถซ้อน Semantic Elements ได้ เช่น <article> ภายใน <main> หรือ <nav> ภายใน <header> แต่ต้องระวังไม่ให้ซ้อนกันแบบผิดความหมาย เช่น เอา <main> ไปใส่ใน <article> อีกที
• การใช้ <div>: ไม่ได้หมายความว่าเราห้ามใช้ <div> เลย เรายังสามารถใช้ <div> ได้เมื่อต้องการจัดกลุ่ม elements เพื่อใช้ CSS แต่ควรใช้ Semantic Elements ในการกำหนดโครงสร้างหลักของเว็บไซต์
• การใช้ <section>: <section> ใช้แบ่งเนื้อหาออกเป็นส่วนๆ ที่มีความหมายคล้ายๆ กัน เช่น ส่วนของ "Features", "Testimonials" หรือ "Pricing" แต่ละ <section> ควรมี heading (<h1> - <h6>) กำกับ

ประโยชน์ของ Semantic Elements ต่อ SEO

Semantic Elements ไม่ได้ช่วยแค่ให้โค้ดเราอ่านง่ายขึ้นเท่านั้น แต่ยังมีประโยชน์ต่อ SEO (Search Engine Optimization) อีกด้วย Search Engine จะใช้ Semantic Elements ในการทำความเข้าใจโครงสร้างของเว็บไซต์เรา ซึ่งจะช่วยให้ Search Engine จัดอันดับเว็บไซต์เราได้ดีขึ้น

ตัวอย่างเช่น Search Engine จะรู้ว่า <h1> คือหัวข้อหลักของหน้า, <nav> คือส่วนของการนำทาง, และ <article> คือเนื้อหาหลักของบทความ ซึ่งจะช่วยให้ Search Engine เข้าใจเนื้อหาของเว็บไซต์เราได้ดีขึ้น

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการสร้าง Layout ด้วย HTML5 Semantic Elements ซึ่งจะช่วยให้โครงสร้างเว็บไซต์ของเรามีความหมายและเป็นระเบียบมากขึ้น นอกจากนี้ Semantic Elements ยังมีประโยชน์ต่อ SEO อีกด้วย

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ HTML5 Input Types ขั้นสูง ซึ่งจะช่วยให้เราสร้าง Form ที่มีความซับซ้อนและใช้งานง่ายมากขึ้น อย่าลืมติดตามกันนะครับ!