HTML5 Semantic : aside tag

<aside>
tag aside หมายถึง เน้อหาที่อาจจะไม่ใช่ประเด็นหลักของหน้านั้นๆ เราจึงนำมันมาอยู่ในภายใต้ tag aside เช่น sidebar ด้านขวามือของเว็บ ซึ่งส่วนใหญ่ด้านขวามือของเว็บไซต์นั้นจะเป็นพวก ติดต่อเราผ่าน Social media พวกติดต่อเราทาง facebook, twitter, บุคมาร์กต่างๆ แต่ aside ก็ไม่ได้มีความหมายแค่นั้น อาจจะวางไว้ตรงอื่นที่ไม่ใช่ sidebar ของเว็บก็ได้เช่น

<article>
  <h1>aside ใช้ทำอะไร</h1>
  <p>aside มีหน้าที่แบ่งแยกเนื้อหาที่ไม่ใช่เนื้อหาหลักของหน้าเพจนั้นๆ</p>
  <aside>แชร์หน้านี้ :: ตอบกลับ </aside>
</article>

ด้านบนนี้ aside ใช้ทำหน้าที่ใน article ซึ่งบ่งบอกว่า การแชร์หน้านี้ หรือการกดเพื่อตอบกลับ ไม่ใช่เนื้อหาที่แท้จริงของตัว article นั้นๆ ครับ

Html5 Semantic Tag Article วิธีการใช้งาน

แท็ก article

<article>
Tag นี้มีไว้เพื่อหุ้มเนื้อความหลักในเพจ โดยทั่วไปอาจจะมี section อยู่ใน article อีกทีก็ได้
อีกทั้ง article ยังใช้งานเกี่ยวกับพวก comment  news blog  post forum ของเว็บอีกด้วย

ตัวอย่าง การใช้ Article เพื่อบ่งบอกเนื้อความหลัก

<article>
  <h1>Article มีไว้เพื่อ</h1>
  <p>Tag นี้มีไว้เพื่อหุ้มเนื้อความหลักในเพจ โดยทั่วไปอาจจะมี section อยู่ใน article อีกทีก็ได้
อีกทั้ง article ยังใช้งานเกี่ยวกับพวก comment  news blog  post forum ของเว็บอีกด้วย
  </p>
</article>

ตัวอย่างการใช้ Article ร่วมกับ Section

<article>
  <h1>Article มีไว้เพื่อ</h1>
  <p>Tag นี้มีไว้เพื่อหุ้มเนื้อความหลักในเพจ โดยทั่วไปอาจจะมี section อยู่ใน article อีกทีก็ได้
อีกทั้ง article ยังใช้งานเกี่ยวกับพวก comment  news blog  post forum ของเว็บอีกด้วย หลักๆ แบ่งวิธีใช้เป็นสองประเภทดังนี้
  </p>
    <section>
            <h2>Article ใชักับเนื้อความหลักของเพจ</h2>
            <p>ส่วนใหญ่เนื้อความหลักของหน้านั้นๆ ควรคุมไว้ด้วย Article อยู่แล้ว</p>
   </section>
   <section>
            <h2>Article ใชักับคอมเมนท์ของเพจนั้นๆ</h2>
            <p>เช่น พวกการโพสคอมเมนท์ในเว็บ 2.0 เป็นต้น</p>
   </section>
</article>

ดังนั้น ก็ขึ้นอยู่กับเราด้วยครับว่าใช้แบบไหนจะเหมาสมที่สุด ซึ่งตัวอย่างที่ผมกล่าวมา เป็นตัวอย่างที่ใชักันมากสุดครับ