HTML5 Elements

HTML5 Elements

Input แบบต่างๆ ของ HTML5 ที่น่านำมาใช้

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

หลักการอื่นๆ ในการเขียน tags ของ HTML5

บทความที่บอกเล่าเพิ่มเติมในบางเรื่องเล็กๆ น้อยๆ ที่หลายคนอาจจะอยากรู้ คือเรื่อง Html5 Omitted Tags หรือ Tags ของ HTML5 ที่เราสามารถเขียนลงไปก็ได้ ไม่เขียนก็ได้ ปิดก็ได้ ไม่ปิดก็ได้ จะมีอะไรนั้นลองกวดสายตาดูครับ

HTML Figure และ Figcaption

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

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

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

การเรียงลำดับ Headings และ ทำ Sectioning ใน HTML5

flying fire

ปัญหาน่าปวดหัวอีกอย่างของการเขียน HTML หรือ XHTML นั่นก็คือ “การจัดการ เลือกใช้ header ของ HTML” เพราะว่าทั้งสองภาษานั้นมี Header มาให้ถึง 6 ตัว (h1-h6) ก่อนหน้านี้ผมก็เคยเขียนออกมาให้ตาเห็นบ้างแล้วว่าการใช้ h1-h6 นั้น ชื่อมันก็บอกว่าหนึ่งถึงหก แต่ลืมเขียนเรื่องง่ายๆ อีกเรื่องนั่นคือการตีความการทำ sectioning ของ heading

HTML5 <section> element – การใช้ section ใน HTML5

section อาจจะเป็น Element ที่คนทำเว็บนำมาใช้แบบผิดๆ ได้อย่างง่าย ถ้าหากทำความเข้าใจแค่ผิวเผินหรือ ดูจากชื่อของ Element เท่านั้น

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

<section></section> มีไว้เพื่อ แยก ส่วนที่แตกต่างกันของเนื้อหาที่อยู่ใน บทความ ออกจากกัน ไม่ได้มีไว้เพื่อแบ่งหน้า เช่น

HTML5 Text-level semantics

html5's wbr tag displayed in web broesers

HTML5 Text-level semantics คือการเอากลุ่มของภาษา html4 ผสมกับ xhtml2 แล้วเอาสิ่งที่มีมาตีความใหม่ ใส่ความหมายเข้าไปให้กับ Element ที่มีอยู่ก่อนแล้วเพื่อให้ Elements ต่างๆ มีความหมายในตัวของมัน

ก่อนหน้านี้ใน HTML4 Elements บางส่วนที่ถือกำเนิดขึ้นนั้น มีอยู่เพื่อการแสดงผลด้าน Screen โดยไม่ได้คำนึงถึงความหมายที่แฝงอยู่ เช่น b เอาไว้ทำตัวหนา i เอาไว้ทำตัวเอียง u เอาไว้ขีดเส้นใต้

ส่วน XHTML ที่สร้าง Element อย่างเช่น strong หรือ em เข้ามาใหม่ ได้ลบ b และ i ออกไป

Back to Top