สิ่งที่คุณควรรู้เกี่ยวกับ HTML5 (ตอนที่ 2)

Siwa Khongsuphap
Open Source Technology
1 min readAug 21, 2017

สำหรับใครที่ไม่ได้อ่านตอนที่ 1 สามารถตามอ่านได้ที่นี่เลยครับ สิ่งที่คุณควรรู้เกี่ยวกับ HTML5 (ตอนที่ 1)

บทความที่แล้วเราพูดถึงอะไรคือ HTML และความแตกต่างระหว่าง HTML กับ HTML5 กันไป คราวนี้เราจะมาพูดถึงโครงสร้างของ Tag และตัวอย่าง Tag พื้นฐานกัน

ก่อนอื่นเรามาดูภาพกันครับ

http://matin.cf/images/Element.png

มาอธิบายภาพนี้กันครับ ภายในกรอบทั้งหมดนั้นเรียกว่า Element ซึ่ง Element ก็จะเริ่มด้วย Tag เปิด (start tag) และปิดด้วย Tag ปิด (end tag) (ยกเว้นบาง Tag ไม่จำเป็นต้องมี Tag ปิด เช่น <input>) ภายใน Tag สามารถมีเนื้อหาต่างๆได้ เช่น Attribute จะเป็นส่วนกำหนดคุณลักษณะหรือให้ข้อมูลเพิ่มเติมของ Element นั้น เมื่อมี Attribute เราก็เป็นต้องมี Attribute Values เพื่อไว้สำหรับกำหนดค่าให้กับ Attribute ครับ

เรารู้ส่วนที่จำเป็นแล้วคราวนี้เรามาเริ่มเขียน HTML กันครับ

แค่นี้เราก็ได้เว็บเพจแล้ว มาดูคำอธิบาย Element ต่างๆกันครับ

  • <!DOCTYPE html> สำหรับประกาศว่าไฟล์นี้คือไฟล์ HTML5
  • <html> Tag นอกสุดของเพจ HTML ใช้ในการกำหนดจุดเริ่มต้นของเว็บเพจ โดยองค์ประกอบต่างๆจะอยู่ในภายในนี้
  • <head> ส่วนสำหรับกำหนดข้อมูลของไฟล์ หรือก่อนที่จะเริ่มเนื้อหาของเว็บเพจ
  • <meta> ใช้สำหรับกำหนดข้อมูลบางอย่างเกี่ยวกับเว็บเพจนั้นๆ เช่น รหัสอักขระที่ใช้
  • <title> ใช้สำหรับการกำหนดชื่อไฟล์หรือเว็บเพจ
  • <body> เป็นส่วนที่ใช้กำหนดเนื้อหาทั้งหมดของหน้าเว็บเพจ ดังนั้นต้องมีส่วนนี้อยู่เสมอ
  • <h1> ใช้ในการจัดกลุ่มข้อความเพื่อเป็นหัวเรื่องหรือหัวข้อใหญ่ จะมีให้เลือกตั้งแต่ <h1> ถึง <h6> ซึ่งขนาดของ <h1> จะใหญ่ที่สุด
  • <p> ใช้ในการจัดกลุ่มข้อความเพื่อนำไปขึ้นย่อหน้าใหม่ (Paragraph)

สำหรับบทความนี้ก็ขอจบไว้เพียงเท่านี้ก่อนนะครับ บทความต่อไปเราจะมาลงรายละเอียดคำสั่งพื้นฐานสำหรับการจัดการเนื้อหาเพจ HTML กันครับ

--

--