HTML5 Grouping content

HTML Figure และ Figcaption

เชื่อว่าหลายคนคงเคยเห็น <figure> ของ HTML ผ่านตามาบ้างแล้ว เช่นเดียวกันหลายคนก็อาจจะยัง งง กับการใช้งานของ tag <figure> และ <figcaption> อยู่ บางคนอาจจะคิดว่ามันสามารถใช้คู่กับ <img> เท่านั้น ซึ่งเป็นไอเดียที่ถูกไม่หมดสักทีเดียว

วันนี้ผมจะขอแลกเปลี่ยนสั้นๆ เล็กน้อยๆ ตามประสาอีกเช่นเคย ซึ่งจริงๆ แล้วที่ผมมาเขียทิ้งไว้ก็เพราะว่าผมกลัวตัวเองลืมมากกว่า (รวมไปถึงบทความที่เคยเขียนที่ผ่านๆ มาด้วย)

<figure> ตามหลักการของภาษา HTML แล้ว หมายถึง การแสดงให้เห็นเป็นภาพ ส่วน <figcaption> นั้น คือ การอธิภายสิ่งที่เป็นภาพนั้นเพิ่มเติม

HTML5 กับ CSS3 เมื่อเอามาทำ Photo Gallery

ตัวอย่างบทความ HTML5

เป็นอะไรกันไม่รู้ครับ พ่อแม่พี่น้อง ช่วงนี้ ทำไม มองไปทางไหนมีแต่คน บ้า HTML5 และ CSS3 แต่บางที
คงไม่ต้องหาคำตอบให้กับคำถามปัญญาอ่อนของผมก็ได้ เพียงแค่ก้มหน้าก้มตาทำหน้าที่ไปเรื่อย เรื่อยก็คงพอเพียงแล้ว

อันเรื่องราวของ HTML5 และ CSS3 นั้น ThaiCSS เองก็ใช้มานานนม เพราะมันมีมานานแล้ว จึงไม่ค่อยได้ตื่นเต้นไปเท่าไหร่

เมื่อก่อนตอนใช้ ก็มีคนหาว่าบ้า ตอนนี้เป็นไงหละ บ้ากว่ากุอีก

dialog เพื่อนใหม่ใน HTML5

เชื่อว่าเพื่อน ๆ พี่ ๆ น้อง ๆ เห็นชื่อเรื่องที่เกริ่นไว้คงทราบกันทันทีว่าคราวนี้ผมจะพูดถึงหนึ่งในสมาชิกหน้าใหม่ของ HTML5 ซึ่งก็คือเจ้า dialog นั่นเองครับ เนื่องจาก HTML5 นั้นมีการปรับโครงสร้างภาษา ไปค่อนข้างมากครับ เหตุผลก็คงหลีกไม่พ้นประโยชน์เหล่านี้ครับ เช่น เพื่อให้ง่ายต่อการใช้งานในการออกแบบโครงสร้าง HTML/CSS และ มีความหมายมากขึ้น (semantics) เพราะฉะนั้นเจ้า dialog จึงถูกสร้างมาเพื่อที่จะเข้ามาทำหน้าที่ในการควบคุมโครงสร้างเนื้อหาที่เกี่ยวข้องกับกรณีต่อไปนี้ครับผม

  • บทสนทนาระหว่าง คนสองคน หรือ หลาย ๆ คน
  • บทสัมภาษณ์
  • บทละคร ที่เป็นการสนทนากันระหว่างตัวละคร
  • และ อื่น ๆ ที่เกี่ยวข้องกับการสนทนา ปฏิสัมพันธ์ระหว่างคนสองคนขึ้นไป

ใน HTML5 นั้น dialog จัดอยู่ในหมวดของ Flow Content ชนิด Grouping Content (@pornAntha จะอธิบายเกี่ยวกับหมวด และ ชนิดของ elements ใน HTML5 เร็ว ๆ นี้ครับ) ซึ่งรูปแบบโครงสร้างของ code จะเป็นอย่างตัวอย่างนี้ครับ:

Back to Top