รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การใช้ 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> แต่จะมีความเกี่ยวข้องกับเนื้อหาโดยรวมของหน้านั้นๆ