วิธีเลือกใช้ article, section, nav, aside ใน HTML5

หลายๆ คนคงทราบกันดีนะครับ ว่า html5 ได้เพิ่ม html elements ใหม่ๆ เข้ามามากมาย ซึ่งแต่ละ element ก็จะมีความหมายในตัว ว่ามันเอาไว้ใช้ mark up อะไร โดย elements ที่เราใช้บ่อยๆ คงหนีไม่พ้น article, section, nav, aside พวกนี้อย่างแน่นอน ปัญหาก็คือ เราจะรู้ได้อย่างไรว่าข้อมูลนี้ ควร mark up ด้วย element อะไร ถึงจะถูกต้องตามหลัก วันนี้ผมจะมาสรุปวิธีเลือกใช้ html elements เหล่านี้ อย่างง่ายๆ มาให้อ่านกันครับ

รู้จักกับ Sectioning content

ก่อนอื่นต้องเข้าใจก่อนครับว่า article, section, nav, aside เค้าเรียกว่า “Sectioning content” พูดง่ายๆ ก็คือ elements ต่างๆ ที่เป็น “Sectioning content” จะเอาไว้กำหนดขอบเขตของ content ซึ่ง content ที่อยู่ภายในขอบเขต(section) นี้ จะต้องมีความเกี่ยวข้องกัน โดย elements ที่เป็น “Sectioning content” มักจะมี heading กำกับไว้ ว่าขอบเขต(section) นี้ เป็นเรื่องเกี่ยวกับอะไร

ใช้ <nav> กับ Navigation ที่สำคัญ

<nav> จะใช้ mark up ส่วนที่ link ไปยังหน้าอื่นๆ หรือ link ไปยังส่วนต่างๆ ภายในหน้านั้นๆ แต่เดี๋ยวก่อนครับ ไม่ใช่ว่าทุกๆ link จะใช้ <nav> ได้เสมอไป <nav> มีไว้สำหรับบอกว่า ส่วนนี้เป็นส่วนสำหรับช่วยให้ user ไปยังส่วนต่างๆ ภายในเว็บได้ง่ายขึ้น ซึ่ง link ที่ควรใช้ <nav> mark up นั้น ผมสรุปให้ดังนี้ครับ

  • Main menuส่วนที่เป็นเมนูหลักของเว็บไซต์ หรือของหน้านั้นๆ ไม่ว่าจะอยู่ที่ header หรืออยู่ที่ footer
  • Skip to contentปุ่มที่มีไว้สำหรับคนตาบอด หรือผู้ที่ใช้ Screen reader เพื่ออำนวยความสะดวกในการอ่าน
  • Table of Contentsส่วนนี้มีไว้ช่วยให้ผู้อ่านสามารถข้ามไปยังหัวข้อต่างๆ ภายในบทความหรือหน้านั้นๆ ได้สะดวกขึ้น
  • Previous/Next, Paginationปุ่มที่มีไว้สำหรับกลับไปดูหน้าก่อนหน้านี้ หน้าถัดไป รวมถึงปุ่มข้ามไปดูยังหน้าต่างๆ
  • Breadcrumbsส่วนนี้ทำหน้าที่ช่วยบอกว่าเรากำลังอยู่ที่ส่วนไหน หน้าไหน ภายในเว็บไซต์

สังเกตว่า <nav> จะใช้เพื่ออำนวยความสะดวกให้แก่ user ให้ลองนึกว่าถ้าเราใช้ Screen reader อ่านหน้าเว็บสักหน้าหนึ่ง เราต้องการอะไรมาช่วยให้เราเข้าถึงส่วนต่างๆ ภายในเว็บไซต์ได้สะดวก สิ่งนั้นเราจะใช้ <nav> ครับ

จะเห็นว่าเราจะใช้ <nav> mark up ส่วนที่เป็นเมนูหลัก แต่ link “ติดต่อเรา” ที่อยู่ภายใน <article> นั้นกลับไม่ได้ถูก mark up ด้วย <nav> แม้ว่า link “ติดต่อเรา” มักจะอยู่ในส่วนของเมนูหลักสำหรับเว็บไซต์ทั่วไป แต่เมื่อพิจารณาจากบริบท(context) แล้ว link นี้ยังไม่ตรงกับลักษณะที่ผมกล่าวมาข้างต้นครับ

<article> กับ <section> แตกต่างกันอย่างไร?

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

นอกจากนั้นแล้ว <article> ยังสามารถใช้ซ้อนกันภายใน <article> เองได้อีกด้วย (nested <article>s) ซึ่งจะใช้ในกรณีที่เนื้อหาภายใน <article> นั้นๆ มีบางส่วน ที่มีความหมายในตัวของมันเอง แม้ว่าจะตัดเนื้อหารอบๆ ออกก็ยังอ่านเข้าใจ เช่น ความคิดเห็นของบทความ เป็นต้น

ส่วน <section> นั้นจะใช้ mark up เนื้อหาที่ต้องการแยกออกมาเป็นส่วนๆ เช่น การแบ่งบทความออกเป็น chapter หรือแบ่งเนื้อหาทั้งหมดออกเป็นประเด็นย่อยๆ ภายใน section มักจะมี heading ซึ่งจะใช้บอกว่า section นั้นๆ มีเนื้อหาเกี่ยวกับอะไร ซึ่งเนื้อหาภายใน section จะต้องเกี่ยวข้องกันทั้งหมด

เอาละครับ ลองมาดูตัวอย่างการใช้ <article> และ <section> แบบพื้นฐานกันดีกว่าครับ

ต่อไปลองดูตัวอย่างการใช้ <article> ซ้อน <article> ครับ

<section> ไม่จำเป็นต้องอยู่ภายใน <article> เสมอไปนะครับ อย่างในหน้า Archive หรือหน้า Category เราสามารถใช้ <section> ครอบ <article> ได้ ลองดูตัวอย่างนี้ครับ

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

<aside> ไม่ใช่ sidebar!

<aside> จะใช้ mark up ส่วนที่มีความเกี่ยวข้องกับเนื้อหาหลัก แต่ไม่มากนัก จนสามารถแยกออกมาจากเนื้อหาหลักหรือตัดออกได้ โดยไม่ทำให้เนื้อหาหลักอ่านไม่รู้เรื่อง เราจะเห็น <aside> อยู่ 2 แบบด้วยกัน ดังนี้ครับ

  • ถ้าอยู่ภายใน <article> จะพบว่า <aside> มีเนื้อหาเกี่ยวข้องกับเนื้อหาภายใน <article> นั้นๆ
  • ถ้าอยู่ภายนอก <article> จะพบว่า <aside> มีเนื้อหาเกี่ยวข้องกับเนื้อหาโดยรวมของหน้านั้นๆ (มอง <body> เป็น <article>)

จากตัวอย่างนี้ จะพบ <aside> อยู่ 2 ที่ด้วยกันครับ <aside> ที่อยู่ภายใน <article> จะใช้อธิบายความหมายเพิ่มเติมเกี่ยวกับ “Media queries” ซึ่งจริงๆ แล้ว บทความนี้ไม่ได้ต้องการจะพูดถึง “Media queries” สังเกตว่า แม้เราตัด <aside> ตรงนี้ออก บทความนี้ยังคงมีใจความสมบูรณ์ครับ

<aside> อีกจุดจะเป็นส่วนสำหรับแชร์บทความ ซึ่งจะอยู่ภายนอก <article> จะเห็นว่า <aside> แบบนี้จะไม่ได้มีความเกี่ยวข้องโดยตรงกับ <article> แต่จะมีความเกี่ยวข้องกับเนื้อหาโดยรวมของหน้านั้นๆ

เลือกใช้อะไร? แล้วแต่มุมมอง

เรื่องของ Sectioning content นั้น การจะเลือกใช้อะไร ผมมองว่าขึ้นอยู่กับมุมมองของแต่ละคนครับ มันไม่มีอะไรถูก อะไรผิด เป็นเรื่องของความเหมาะสมมากกว่าครับ แล้วแต่ว่าเรามองเนื้อหาตรงนี้เป็นอะไร แล้วเราก็เลือกใช้ html element ที่เหมาะสมมา mark up เท่านั้นเอง สุดท้ายนี้ผมขอฝาก infographic นี้ไว้ให้เพื่อนๆ หวังว่าจะเป็นประโยชน์ในการเลือกใช้ Sectioning content นะครับ

(Visited 24,838 times, 13 visits today)

19 Responses to “วิธีเลือกใช้ article, section, nav, aside ใน HTML5”

  1. Lady says:

    ขอบคุณสำหรับบทความดีๆคะ ^^

  2. Pop Apiwat says:

    ขอบคุณมากครับ

  3. Guide Nathakorn says:

    ขอบคุณครับ อ่านเข้าใจง่ายมาก

  4. Nuttapong Sarkana says:

    ขอบคุณครับ ^_^

  5. Wan Wan says:

    ได้ความรู้ดีมากๆครับ

  6. แต่ก่อนยังสับสน แต่ตอนนี้เข้าใจขึ้นมากเลยครับ

  7. ผมจะเขียน HTML5 ได้อย่างไรเมื่อลูกค้ายังต้องการ IE 7 – -*

  8. ผมจะเขียน HTML5 ได้อย่างไรเมื่อลูกค้ายังต้องการ IE 7 – -*

  9. โจ้ทำได้

  10. โจ้ทำได้

  11. IWeb Designthai HTML 5 รองรับ IE8 ไหมครับ พอดีที่ทำงานยังใช้ WindowsXP และ IE8 กันอยู่
    ผมพยายามบอกให้เค้าเลี่ยงไปใช้ FireFox หรือ Chrome อยู่ เค้าก็จะใช้ IE8 อยู่

    จะลง Windows7 ให้ ก็บอกว่าฉันต้องมาศึกษา Windows 7 ใหม่อีก ทำไมเธอต้องทำให้มันยุ่งยากด้วย ก็แค่เว็บไซต์ สรุปตอนนี้ก็ยังทำเว็บแบบ ไม่ใช้ HTML5 ต่อไป

    ผมเคยได้ยินมาว่า Windows XP ไม่โครซอฟเลิก Support แล้วนี่หน่า ทำไมยังใช้กันอยู่

  12. Nawapol Sriwattanasub ใช้ได้ครับ แต่ต้องใส่ script ตัวนี้เข้าไปด้วยฮะ https://code.google.com/p/html5shiv/

  13. การใส่แท้กพวกนี้มีความสำคัญอะไรหรือเปล่าครับ
    เพราะผมใช้ div อย่างเดียวเลย

  14. ที่เห็นชัดสุดคือทำให้ search engine อย่าง Google เข้าใจเนื้อหาในเว็บเราได้ชัดเจนมากขึ้นครับ ซึ่งจะมีส่วนทำให้การจัดอันดับผลการการค้นหานั้นถูกต้องแม่นยำมากขึ้นครับ

  15. จริงๆประเด็นหลักว่าทำไมต้องเลือกใช้แท๊กพวกนี้คือ accesbility ครับ ถ้าแท๊กพวกนี้ให้โปรแกรมเข้าใจเนื้อหาได้ว่าอะไรเป็นอะไรจะช่วยคนพิการได้มาก และผลพลอยได้คือ search engine bot อ่านเข้าใจว่าข้อมูลส่วนไหนเป็นยังไง แต่โดยหลักเราเน้นให้คนเข้าถึงง่ายมากกว่า

  16. thumbnail + content 2 บรรทัด ที่เป็น main category (สินค้า) บน home page ควรใส่ <nav> ไหมครับ

  17. เข้าใจได้เยอะครับ

Leave a Reply