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

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

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

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

<dialog>
  <dt></dt>
  <dd></dd>
  </dialog>

หรือ

  <dialog>
  <dt>
  <dd>
  </dialog>

คุณจะเห็นว่า HTML5 อนุญาติให้เขียนแบบมีความหมายอย่าง XHTML ได้ และ สามารถเขียนแบบย่อในแบบ HTML5 ได้ ในกรณีนี้คุณจะเห็นว่า dt และ dd นั้นไม่จำเป็นต้องเขียน tag ปิดแต่ว่าตัวที่เป็นตัวกำหนด Grouping Content นั้นจำเป็นต้องปิดเสมอ จากตัวอย่างซึ่งก็คือ dialog ครับ ตรงนี้ก็พิจารณาเลือกใช้กันตามวาระโอกาสที่เหมาะสมครับ
ต่อไปผมจะยกตัวอย่าง การเขียนโครงสร้างด้วย dialog ให้กับเนื้อหาที่เป็นบทสนทนาให้ดูครับ เป็นตัวอย่างง่าย ๆ ก่อนนะครับ รอบหน้าจะยกตัวอย่างเมื่อเรานำไปใช้กับ CSS 2 และ CSS 3 ครับ

เนื้อหา:

มิส ซัมเมอร์:ถ้าอยากฟังนิทานที่สนุกที่สุด ลองให้คนแต่คนเล่าเรื่องราวที่ไปที่มาของชีวิตของเขาเหล่านั้นให้เธอฟังสิ
ไอโอวีน:ทำไมล่ะคะ? ทำไมนิทานที่สนุกที่สุดจะต้องเป็นเรื่องราวที่ไปที่มาของชีวิตของคนแต่ละคน
มิส ซัมเมอร์:ทำไมน่ะเหรอ? ก็เพราะคนแต่ละคนจะพยายามรังสรรค์เรื่องราวที่เกี่ยวกับตัวเองที่จะเล่าให้คนอื่นฟังได้ไพเราะ
และ น่าฟังที่สุดเสมอ เพราะเขาทั้งหลายเหล่านั้นก็อยากให้คนที่ถามนั้นจดจำเรื่องราว เกี่ยวกับชีวิตของเขาไปตราบนาน
เท่านาน แม้ว่ามันอาจจะมีความสลักสำคัญน้อย หรือ ไร้ค่าสำหรับคนที่นั่งฟังเรื่องที่เขาเหล่านั้นเล่าก็ตาม
ไอโอวีน:จริงสินะคะ ฉันเองก็ทำแบบนั้น ต้องเรียบเรียงเรื่องราวก่อนที่จะเล่าเรื่องประวัติความเป็นมาของตัวเอง
พยายามจะเล่าสิ่งที่น่าประทับใจของตัวเราออกมาให้มากที่สุด

จะเห็นได้ว่าเนื้อหาที่ผมยกมานั้นเป็นเนื้อหาจากนิยายนะครับ ซึ่งเป็นการสนทนาระหว่างตัวละครสองคนที่กำลังสนทนากันอยู่ซึ่งเมื่อเรานำมาเขียนเป็นโครงสร้าง HTML5 เพื่อที่จะเอาไปแสดงผลเป็นหน้าเว็บเพจ เราก็จะต้องเขียนกันออกมาแบบนี้ครับ

ตัวอย่างที่ 1:

<dialog>
  <dt>มิส ซัมเมอร์</dt>

  <dd>ถ้้าอยากฟังนิทานที่สนุกที่สุด ลองให้คนแต่ละคนเล่าเรื่องราวที่ไปที่มาของชีวิตของเขาเหล่านั้นให้เธอฟังสิ</dd>
  <dt>ไอโอวีน</dt>
  <dd>ทำไมล่ะคะ? ทำไมนิทานที่สนุกที่สุดจะต้องเป็นเรื่องราวที่ไปที่มาของชีวิตของคนแต่ละคน </dd>
  <dt>มิส ซัมเมอร์</dt>

  <dd>ทำไมน่ะเหรอ? ก็เพราะคนแต่ละคนจะพยายามรังสรรค์เรื่องราวที่เกี่ยวกับตัวเองที่จะเล่าให้คนอื่นฟังได้ไพเราะ
  และ น่าฟังที่สุดเสมอ เพราะเขาทั้งหลายเหล่านั้นก็อยากให้คนที่ถามนั้นจดจำเรื่องราว เกี่ยวกับชีวิตของเขาไปตราบนานเท่านาน
  แม้ว่ามันอาจจะมีความสลักสำคัญน้อย หรือ ไร้ค่าสำหรับคนที่นั่งฟังเรื่องที่เขาเหล่านั้นเล่าก็ตาม</dd>
  <dt>ไอโอวีน</dt>
  <dd>จริงสินะคะ ฉันเองก็ทำแบบนั้น ต้องเรียบเรียงเรื่องราวก่อนที่จะเล่าเรื่องประวัติความเป็นมาของตัวเอง
  พยายามจะเล่าสิ่งที่น่าประทับใจของตัวเราออกมาให้มากที่สุด</dd>
  </dialog>

ตัวอย่างที่ 2:

<dialog>
  <dt>มิส ซัมเมอร์
  <dd>ถ้้าอยากฟังนิทานที่สนุกที่สุด ลองให้คนแต่ละคนเล่าเรื่องราวที่ไปที่มาของชีวิตของเขาเหล่านั้นให้เธอฟังสิ
  <dt>ไอโอวีน
  <dd>ทำไมล่ะคะ? ทำไมนิทานที่สนุกที่สุดจะต้องเป็นเรื่องราวที่ไปที่มาของชีวิตของคนแต่ละคน
  <dt>มิส ซัมเมอร์
  <dd>ทำไมน่ะเหรอ? ก็เพราะคนแต่ละคนจะพยายามรังสรรค์เรื่องราวที่เกี่ยวกับตัวเองที่จะเล่าให้คนอื่นฟังได้ไพเราะ
  และ น่าฟังที่สุดเสมอ เพราะเขาทั้งหลายเหล่านั้นก็อยากให้คนที่ถามนั้นจดจำเรื่องราว เกี่ยวกับชีวิตของเขาไปตราบนานเท่านาน
  แม้ว่ามันอาจจะมีความสลักสำคัญน้อย หรือ ไร้ค่าสำหรับคนที่นั่งฟังเรื่องที่เขาเหล่านั้นเล่าก็ตาม
  <dt>ไอโอวีน
  <dd>จริงสินะคะ ฉันเองก็ทำแบบนั้น ต้องเรียบเรียงเรื่องราวก่อนที่จะเล่าเรื่องประวัติความเป็นมาของตัวเอง
  พยายามจะเล่าสิ่งที่น่าประทับใจของตัวเราออกมาให้มากที่สุด
  </dialog>

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

ซึ่งตามตัวอย่าง dt นั้นจะใช้ครอบเจ้าของคำพูดนั้น ๆ dd ก็ใช้ครอบคำพูดของเจ้าของคำพูดนั้นครับ (ตรงนี้ถ้าอ่านแล้วมันกำกวมไม่เข้าใจ ถามกันไว้ได้นะครับ ผมจะกลับมาอธิบายใหม่ให้จนกว่าจะเข้าใจตรงกันครับ)

ครับหวังว่าคงจะรู้จักกับ dialog กันมากขึ้นครับ ครั้งหน้าเราจะอธิบายกันในส่วนการตกแต่งโครงสร้างของ dialog ในแต่ละกรณีศึกษาครับ สำหรับครั้งนี้ผมขออนุญาติชิ่งไปก่อนครับ พบกันใหม่ครับผม