HTML5 ทำงานอย่างไร

Hypertext Markup Language (HTML) เป็นเทคโนโลยีหลักสำหรับเว็บตั้งแต่ช่วงต้นทศวรรษ 1990 Tim Berners-Lee สร้าง HTML ในปี 1989 เป็นวิธีที่ง่ายแต่มีประสิทธิภาพในการเข้ารหัสเอกสารอิเล็กทรอนิกส์ อันที่จริง จุดประสงค์ดั้งเดิมของเว็บเบราว์เซอร์คือเพื่อทำหน้าที่เป็นผู้อ่านเอกสารดังกล่าว สองทศวรรษต่อมา ตัวบราวเซอร์เองได้กลายเป็นประตูสู่โลกของสื่อออนไลน์ นั่นเป็นเหตุผลที่ HTML5 ไม่ได้เป็นเพียงการแก้ไขอีก HTML แต่มาตรฐานที่ครอบคลุมสำหรับวิธีการทำงานของหน้าเว็บ

เพื่อให้เข้าใจถึงสิ่งที่ทำให้ HTML5 ไม่เหมือนใคร ให้ย้อนเวลากลับไปเล็กน้อย ย้อนกลับไปในปี 1994 HTML ยังคงอยู่ในการแก้ไขครั้งแรก Mosaic และ Netscape ครองตลาดเบราว์เซอร์ และคนส่วนใหญ่ยังไม่เคยสัมผัสสิ่งใหม่ที่เรียกว่าเวิลด์ไวด์เว็บ ในปีนั้น ผู้สร้าง HTML Berners-Lee เป็นหัวหน้ากลุ่มมาตรฐานเว็บที่จัดตั้งขึ้นใหม่ ซึ่งรู้จักกันในชื่อ World Wide Web Consortium (W3C)

แม้ว่า W3C จะเป็นหน่วยงานมาตรฐานที่ได้รับการยอมรับในปัจจุบัน แต่ผู้เล่นเชิงพาณิชย์ในตลาดเบราว์เซอร์ในปี 1990 ส่วนใหญ่เพิกเฉยต่อมาตรฐานเหล่านั้นและจุดประกายเส้นทางของตัวเอง ภายในปี 1995 W3C ได้เผยแพร่การแก้ไขมาตรฐาน HTML ครั้งที่สอง และเว็บผู้มาใหม่อย่างMicrosoftก็ได้รับความนิยมจากเบราว์เซอร์ Internet Explorer (IE) Microsoft ละเลยมาตรฐานเป็นส่วนใหญ่ และ Netscape พยายามรักษาส่วนแบ่งการตลาดที่น่านับถือในขณะที่ IE เริ่มครอบงำ [แหล่งที่มา: Harris]

ในช่วงสงครามเบราว์เซอร์ช่วงแรกๆ เหล่านี้ นักพัฒนาเว็บถูกท้าทายให้ไซต์ของตนเข้ากันได้กับเบราว์เซอร์หลักรุ่นใหม่ๆ แต่ละตัว ตลอดจนเบราว์เซอร์ Opera และ Apple Safari ที่ใช้งานน้อยกว่า แม้ว่า W3C จะเผยแพร่ HTML 3.2 ในปี 1997 ตามด้วย HTML 4 ในปี 1998 การปฏิบัติตามมาตรฐานนั้นดูมีความสำคัญน้อยกว่าการรักษาคุณลักษณะเฉพาะของเบราว์เซอร์ สิ่งนี้ดำเนินต่อไปจนถึงปี 2546 เมื่อมูลนิธิ Mozilla ที่ขับเคลื่อนโดยชุมชนทำลายเทรนด์ หลังจากเปิดตัวเบราว์เซอร์ Mozilla ดั้งเดิม ตามด้วยเบราว์เซอร์Firefoxในปี 2547 Mozilla ได้แฮ็กอย่างรวดเร็วจากการครอบงำของ IE นอกจากนี้ เบราว์เซอร์ใหม่เหล่านี้ยังปฏิบัติตามมาตรฐาน W3C ที่มีอยู่จริงในขณะทำเช่นนั้น

ในขณะที่ Firefox ของ Mozilla เติบโตอย่างต่อเนื่องโดยใช้มาตรฐาน HTML 4 ที่ล้าสมัย Mozilla เข้าร่วม Apple และ Opera ในปี 2547 เพื่อจัดตั้งกลุ่มที่เรียกว่า Web Hypertext Application Technology Working Group (WHATWG) เป้าหมายของ WHATWG คือการรักษาการพัฒนา HTML ให้คงอยู่ แม้ว่าในตอนแรกจะลังเล แต่ W3C ก็เข้าร่วมการฟื้นฟู HTML ในปี 2549 WHATWG และ W3C ได้รวมข้อกำหนดที่มีอยู่สำหรับ HTML และ XHTML เข้าด้วยกัน และพัฒนาเพิ่มเติมเพื่อสร้างข้อกำหนด HTML5 ใหม่ ปัจจุบันข้อกำหนดดังกล่าวได้รับการบำรุงรักษาและเผยแพร่โดย W3C [แหล่งที่มา: W3C , WHATWG ]

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

1. HTML5 ก้าวไปไกลกว่า HTML
2. HTML5 Foundation Technologies
3. เนื้อหา HTML พื้นฐาน
4. แบบฟอร์ม
5. องค์ประกอบความหมาย
6. องค์ประกอบของสื่อและการแข่งขันแฟลช
7. ผ้าใบ
8. การสร้างลุคด้วย CSS3
9. JavaScript เป็นส่วนประกอบกลาง
10. เทคโนโลยีเว็บแอปพลิเคชัน
11. การพิสูจน์แนวคิดที่ก้าวล้ำ

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

อาจมีจุดที่ทำให้เกิดความสับสน เราควรชี้แจงเกี่ยวกับคำว่า "HTML5" ก่อนดำเนินการต่อ มีภาษามาร์กอัปเวอร์ชันใหม่ที่เรียกว่า HTML5 อย่างไรก็ตาม ภาษานั้นเป็นเพียงส่วนหนึ่งของมาตรฐานที่กว้างขึ้นซึ่งใช้ชื่อ HTML5 ร่วมกัน บทความนี้ครอบคลุมองค์ประกอบทั้งหมดของมาตรฐาน HTML5 ซึ่งภาษา HTML5 เป็นจุดศูนย์กลาง

เมื่อคำนึงถึงความแตกต่างนั้น เบราว์เซอร์จะโหลดหน้าที่เขียนตามมาตรฐาน HTML5 ที่ใหม่กว่าและไม่ใช่ภาษา HTML 4 ที่มีมายาวนานอย่างไร ท้ายที่สุด เรามักจะพึ่งพาเบราว์เซอร์ของเราในการโหลดหน้าเว็บโดยไม่ต้องกังวลเกี่ยวกับ HTML ที่อยู่เบื้องหลัง คำตอบนั้นง่ายมาก ตราบใดที่ตัวเบราว์เซอร์เองสามารถรองรับ HTML5 ได้ ก็สามารถจัดการทุกอย่างที่คุณสนใจโดยไม่จำเป็นต้องแยกความแตกต่างระหว่างการแก้ไข HTML

เพื่อทำให้สิ่งมหัศจรรย์นี้เกิดขึ้น มาตรฐาน HTML5 ได้รวมเอาเทคโนโลยีใหม่ๆ เวอร์ชันใหม่ๆ เข้าด้วยกันเพื่อบรรลุเป้าหมายร่วมกัน เป้าหมายเหล่านี้รวมถึงสิ่งต่อไปนี้:

เมื่อคุณทราบแล้วว่า HTML5 เป็นมากกว่ามาร์กอัป HTML เอง เรามาตรวจสอบเทคโนโลยีพื้นฐานในมาตรฐานกัน

ภาษามาร์กอัปใช้ชุดแท็กเพื่อทำเครื่องหมายองค์ประกอบในไฟล์ มาร์กอัปอาศัยโมเดลบางประเภทที่กำหนดว่าองค์ประกอบเหล่านั้นคืออะไรและใช้งานอย่างไร เนื่องจาก HTML เป็นเรื่องเกี่ยวกับการเข้ารหัสเอกสารมาโดยตลอด จึงอาศัยสิ่งที่เรียกว่า document object model (DOM) DOM รวมอยู่ในแอปพลิเคชันเว็บเบราว์เซอร์เอง ดังนั้น ภาษามาร์กอัปเป็นเพียงวิธีหนึ่งในการให้คำแนะนำเบราว์เซอร์ตามรูปแบบที่เข้าใจแล้ว

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

ในทางเทคนิค DOM คือ Application Programming Interface (API) ที่ให้วิธีการที่เป็นกลางกับแพลตฟอร์มในการประมวลผลเอกสาร HTML หรือ XML (Extensible Markup Language หรือ XML มีลักษณะคล้ายกับ HTML แต่ช่วยให้โปรแกรมเมอร์เพิ่มชุดองค์ประกอบที่กำหนดเองซึ่งคุณสามารถใช้ในเอกสารได้) มาตรฐาน HTML5 ต้องใช้ DOM ที่เรียกว่า DOM5 HTML เบราว์เซอร์Chrome , Firefox , IE, Safari และ Opera เวอร์ชันล่าสุดที่เตรียมพร้อมสำหรับการเติบโตใน HTML5 สามารถประมวลผลหน้าทั้งหมดภายใต้ DOM5 HTML ได้

รากฐานที่สำคัญอีกประการสำหรับ HTML5 คือประเภท Multipurpose Internet Mail Extensions ( MIME ) ที่เกี่ยวข้อง MIME เป็นมาตรฐานของ Internet Engineering Task Force (IETF) สำหรับการแจ้งเตือนซอฟต์แวร์ที่ใช้งานอินเทอร์เน็ตได้ว่ามีเนื้อหาประเภทใดที่พยายามประมวลผล โดยทั่วไปจะสอดคล้องกับไฟล์บางประเภท เช่น เอกสาร HTML หรือไฟล์เสียง MP3

นักพัฒนาเว็บระบุประเภท MIME เมื่อเข้ารหัสหน้าเว็บ สิ่งนี้จะแจ้งให้เบราว์เซอร์โหลดไฟล์ที่เกี่ยวข้องอย่างเหมาะสมตามประเภทของไฟล์ MIME มีสองประเภทที่เข้าร่วม DOM5 HTML เพื่อสร้างพื้นฐานของมาตรฐาน HTML5 ใหม่: ประเภท HTML MIME (ข้อความ/html) และประเภท XML MIME (แอปพลิเคชัน/xhtml+xml) HTML5 มีการอัปเดตในไวยากรณ์สำหรับ MIME ทั้งสองประเภทนี้

กล่าวโดยย่อ เทคโนโลยีพื้นฐานในมาตรฐาน HTML5 คือ DOM5 HTML และประเภท MIME ที่เข้ากันได้กับ HTML5 สำหรับ HTML และ XML ต่อไป มาดูวิธีการรวมเว็บเพจโดยใช้ HTML5 กัน

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

แม้ว่าจะไม่มีอยู่ในทุกหน้าเว็บ แต่คุณควรเริ่มต้นไฟล์ HTML ด้วยการประกาศประเภทเอกสาร (doctype) ตามที่แสดงในตัวอย่าง ซึ่งเป็นการยืนยันว่าเบราว์เซอร์ควรคาดหวัง HTML มาตรฐานเมื่อแปลเอกสาร นักพัฒนาซอฟต์แวร์บางรายใช้ส่วนขยายของมาตรฐาน HTML ซึ่งใช้ไฟล์ข้อกำหนดประเภทเอกสาร (DTD) หากเป็นกรณีนี้ ผู้พัฒนาจะระบุตำแหน่งของ DTD ให้เป็นส่วนหนึ่งของประเภทเอกสารนี้

นอกจากประเภทเอกสารแล้ว โค้ดที่เหลือในตัวอย่างคือไวยากรณ์ HTML มาตรฐาน หากคุณไม่คุ้นเคยกับไวยากรณ์นี้ โปรดดูบทความHow Web Pages Work ของเรา

องค์ประกอบพื้นฐานเหล่านี้ใน HTML5 มีอะไรใหม่บ้าง นี่คือรายการ และเราจะพิจารณาอย่างละเอียดในแต่ละหน้าที่ตามมา

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

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

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

แม้ว่าองค์ประกอบแบบฟอร์ม HTML จะมีคุณลักษณะมากกว่าในเวอร์ชัน 5 แต่ประเภทองค์ประกอบถัดไปจะเป็นรูปแบบใหม่ใน HTML5

องค์ประกอบเชิงความหมายใน HTML5 เป็นองค์ประกอบที่อ้างอิงถึงความหมายของเนื้อหาบางอย่างตามที่ชื่อบอกไว้ การใช้แท็กเพียงอย่างเดียวไม่เพียงพอ เนื่องจากเว็บไซต์ส่วนใหญ่ในปัจจุบันมีเนื้อหาหลายประเภทในหน้าเดียว นักพัฒนาเว็บต้องใช้กฎแยกกันสำหรับลักษณะหรือพฤติกรรมของเนื้อหาแต่ละประเภท

ไม่มีองค์ประกอบเชิงความหมาย นักพัฒนาเว็บได้ใช้