วิธีเลือกใช้ 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>
    <h1>Main menu</h1>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About us</a></li>
        <li><a href="/contact/">Contact us</a></li>
    </ul>
</nav>
<article>
    <h1>About Us</h1>
    <p>SiamHTML เป็นเหมือนสังคมออนไลน์ของเพื่อนๆ Developer ที่จะนำประสบการณ์ ความรู้...</p>
    <p>เพื่อนๆ ที่สนใจเขียนบทความสามารถ<a href="/contact/">ติดต่อเรา</a>ได้นะครับ<p>
</article>

จะเห็นว่าเราจะใช้ <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>
    <h1>About Us</h1>
    <p>SiamHTML เป็นเหมือนสังคมออนไลน์ของเพื่อนๆ Developer ที่จะนำประสบการณ์ ความรู้...</p>
    <section>
        <h2>วิสัยทัศน์</h2>
        <p>SiamHTML มุ่งมั่นที่จะเป็นแหล่งความรู้ สำหรับนักพัฒนาเว็บไซต์หน้าใหม่ ที่จะช่วยส่งเสริมให้การพัฒนาเว็บไซต์ในไทย...</p>
    </section>
    <section>
        <h2>ติดต่อเรา</h2>
        <p>SiamHTML ยินดีรับฟังความคิดเห็นจากเพื่อนๆ ทุกคน หากมีข้อแนะนำ ติชม สงสัย หรือสนใจจะเขียนบทความ...</p>
    </section>
</article>

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

<article>
    <h1>About Us</h1>
    <p>SiamHTML เป็นเหมือนสังคมออนไลน์ของเพื่อนๆ Developer ที่จะนำประสบการณ์ ความรู้...</p>
    <section>
        <h2>Comments</h2>
        <article>
            <p>ชอบอ่านบทความของ Siam HTML มากๆ เลยครับ</p>
        </article>
        <article>
            <p>ขอเป็นกำลังใจให้ Siam HTML นะครับ</p>
        </article>
    </section>
</article>

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

<section>
   <h1>Articles</h1>
   <article>
        <h2>วิธีเลือกใช้ article, section, nav, aside ใน HTML5</h2>
        <p>ก่อนอื่นต้องเข้าใจก่อนครับว่า article, section, nav, aside เค้าเรียกว่า "Sectioning content"...</p>
   </article>
   <article>
        <h2>3 หัวใจสำคัญของการออกแบบเว็บไซต์(Web Design)</h2>
        <p>หากเราจะเริ่มต้นออกแบบเว็บไซต์ขึ้นมาสักเว็บไซต์หนึ่ง เราควรคำนึงถึงอะไรบ้าง?...</p>
   </article>
</section>

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

<aside> ไม่ใช่ sidebar!

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

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

<article>
    <h1>Responsive web design คืออะไร</h1>
    <p>คาดว่าหลายๆ คน คงเคยได้ยินคำนี้มาก่อนแล้วนะครับ...</p>
    <section>
        <h2>ความหมาย และ ความสำคัญ</h2>
        <p>ในปัจจุบัน Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว...</p>
    </section>
    <section>
        <h2>หลักการ</h2>
        <p>การจะทำ Responsive web design มักใช้เทคนิคหลายๆ อย่าง ร่วมกัน ไม่ว่าจะเป็น fluid grid, flexible images และ media queries...</p>
    </section>
    <aside>
        <h2>Media queries</h2>
        <p>Media queries คือการเพิ่ม expression บางอย่างพ่วงเข้าไปกับ media types...</p>
    </aside>
</article>
<aside>
    <h2>แชร์หน้านี้</h2>
    <ul>
        <li><a href="#">facebook</a></li>
        <li><a href="#">twitter</a></li>
        <li><a href="#">Google Plus</a></li>
    </ul>
</aside>

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

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

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

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