HTML5 คืออะไร

ยุคใหม่ของเว็บกำลังเข้ามาสู่นักพัฒนาเว็บกันอีกแล้ว ทุกวันนี้ก็ตามจะไม่ทันกันอยู่แล้ว จะมีอะไรออกมากันมากมาย แค่ version ของ browser ก็วุ่นวายกับคนทำมากพอแล้ว ยังไม่รวมเรืองการแสดงผล ใน browser ที่ต่างกันอีก  ถึงแม้จะทำออกมาได้มาตราฐานแล้วได้อะไร ก็คนใช้ยังใช้ version เก่าอยู่เลย (คือ browser ยังไม่มีมาตราฐานกันเลย ต่างคนก็ต่างจะวิ่งแซงกันไปคนละทาง 2 ทาง) แล้วการแสดงผลบนพวกอุปกรณ์มือถืออีก จะบ้าตาย  จะทำเว็บทีทุกวันนี้ไม่สามารถทำได้ให้มันสวยมีลูกเล่น แล้ว ใช้ได้ทุก browser เลิกพูดกันเลยนอกจากจะทำแค่หน้าธรรมดา  แม้กระทั่งตัวแม่อย่าง หน้าแรก Google เองยังต้องมีการตรวจสอบก่อนเลยว่า คนใช้ใช้ browser อะไร ถ้าเป็นมือถือเข้ามาก็จะ redirect ไปให้แสดงผลในแบบที่ มือถือต้องการ

ย้อนกลับไปในวันหนุ่ม
เริ่มการพัฒนาเว็บด้วยการใช้ Table  TD  TR  โอ้ออววว มี Table แล้วมันจัดซ้ายจัดกึ่งกลาง วางตำแหน่งได้ดีจริง ๆ ประทับใจ
จากนั้นไม่กี่ปี การเขียนเว็บก็มีศัพท์ใหม่มาคือการเขียนด้วย Table less คือ ใช้ Table ให้น้อยที่สุดจนถึงไม่ใช้  Table อีกเลย ไม่มีอีกแล้ว TD TR  อะไรเนี่ย งง กลายเป็นว่า เราใช้ DIV  SPAN  เข้ามาแทน แลัวกำหนด Layout ด้วยการใช้ CSS (ตัวย่อเริ่มเยอะ)   โอ้วววว CSS เป็นอะไรที่เทพมาก โยกย้ายเนื้อหาในหน้าเว็บได้ดังใจ อยากเปลี่ยน theme , Layout ก็แค่ เปลี่ยน file CSS ซะใหม่ background , images เปลี่ยนใหม่หมดทันที ก็นึกว่ามันจะล้ำสุด ๆ
ผ่านไปได้ไม่กี่ปี ก็มี HTLM 5 ผุดมากจากไหนไม่รู้ บอกว่า นึ่แหละ เมพขิงๆ ของการทำเว็บ สามารถทำ animation โดยไม่ต้องใช้ Flashได้อีกต่างหาก

เดิมที่เราใช้ CSS การวางโครงสร้างก็มักจะเป็นแบบภาพด้านล่างเลยครับ

ใช้ Div เป็นหลัก Div ซ้อน Div กันเข้าไป สุดท้ายอ้าวว งง  Div ไหนเป็น Div ไหนว่ะเนี่ย  browser เองก็ไม่ออกมาบอกว่า ตัวเองไม่รองรับ Tag นี้นะ รับแต่ Tag น้ัน สักแต่ Update version  ทำ Browser เป็นเหมือนพระอาทิตย์ ตั้งตัวเองเป็นศุนย์กลาง แล้วให้ Developer วิ่งตามกันหัวหมุน (เหวี่ยงไปหน่อย เข้าเรืองต่อดีก่า)

แต่พอมาเป็น HTML 5  Div หลัก พวกนี้จะเปลี่ยนเป็น

อ้าาา เริ่มดูแล้ว เข้าใจง่ายขึ้น เพราะ ภาพบนที่เป็น DIV จะระบุ ID เพื่อเอาไปใช้กับ CSS แล้วจะไปรู้มั้ยว่าชื่อ ID เนี่ยควรตั้งชื่อว่าอะไร ตั้งกันเอง ของใครของมัน มั่วไปหมด พอไปเจอชื่อซ้ำ เอาซวยอีกมันไปซ้ำตรงไหน อยู่ file เดียวกันเป่า แล้วถ้าเปลี่ยนจะไปกระทบอะไรอีก โอ้ยยย มึน บางทีมีไปซ่อนอยู่ใน javascript อีก   Code ไม่ได้มีแค่ 10-20 บรรทัดนะ จะได้หากันได้ง่าย ๆ ไม่ได้เขียนเองด้วย แก้ต่อจากคนอื่นอีกที -”-

พอกำหนด TAG ให้ชัดเจนแล้วดีอย่างไร ไม่ได้ดีต่อคนทำเลย ลำบากอีกทีนี้ แต่มันดีกับ Search Engine ที่จะเริ่มเข้าใจเว็บเรามากขึ้น ไม่ใช่ ใส่ keyword กันแต่ใน tag  meta ปั้มใส่กันเข้าไป คิดว่าจะทำให้ Search Engine หาเว็บเราเจอ(อันนี้มันความรู้สมัยหลังยุค Y2K ใส่กันเข้าไปที่ title, mata, keyword)

HTML 5 จะทำให้ Search Engine เรียกว่า Bot ละกัน เข้ามาที่เว็บเราแล้วเข้าใจได้มากขึ้นว่า ในแต่ละหน้าของเราอะไรคือ เนื้อหาจริง ๆ    อะไรคือชื่อหัวเรือง และมีความเกี่ยวข้องกันจริง ๆ ไม่ใช่ชื่ออย่างเนื้อหาไปอีกทาง  ทุกวันนี้ต้องคิดสรรหาคำที่จะ search เพือไม่ให้เจอเว็บขยะ เว็บขายของ อยากได้อะไรที่อยากรู้นะ เริ่มหายากขึ้นไปทุกวัน ๆ

นอกจากโครงสร้างที่มีการเปลี่ยน จาก  HTML HEAD TITLE Body ได้มีการเพิ่ม tag หลัก ดังภาพข้างบนเข้ามาก และยังมี Tag ใหม่ ๆ เข้ามาอีกเพื่อให้รองรับการแสดงผลของ content ที่มีขึ้นมาใหม่ ๆ ทุกวัน เช่น Animation , Sound, Image  โดยเฉพาะ Movie ซึ่งถือว่าเป็น content ที่ได้รับความนิยมเป็นอย่างมาก บางเว็บก็ ทำเป็น Media ให้แสดงบนหน้าเว็บ บางเว็บก็ใส่เป็น Flash ใช้ embed เป็นตัวแสดงผล บางเว็บก็กด like ไปดูที่ Youtube เอาละกัน

แต่ปัญหาขอ content พวกนี้คือ Plug-in คร้าบบบพี่น้อง ไม่มี Plug-in มีก็คนละ version อีก แต่ละ browser ก็ดันใช้ plug-in ต่างกันอีก  (เน็ทบริษัท ไม่ให้ update Plug-in อีก   Block  เว็บ Youtube อีก  ดูไม่ได้ เอา Video ไปลงใน Facebook ก็ Block  Facebook อีก    ไม่ดูก็ได้ว่ะ)

ใน HTML 5 ได้มีการเพิ่มการแสดงผลแบบใหม่มาทดแทนเช่น Tag  Video หรือ Tag Audio มาให้ เพือสามารถแสดงผลได้โดยไม่ต้องง้อ Plug-in มากมายเหมือนเก่า

ลองคิดถึง Plug-in ด้าน media ดูว่ามีอะไรบ้าง Flash , Real , Window media, Quicktime ไม่ต้องคิดถึงเรือง version หรือ browser ที่จะรองรับ เลย มั่วมากในเครือง แล้วเวลาจะ unInstall Plug-in ล่ะ กำ ปวดหมองเลยทีนี้

HTML 5 หลัก  ๆ เลยออกมาเพือจัดการแยกแยะเนื้อหาในหน้าเว็บให้ชัดเจน ว่าอะไรเป็นอะไร เหมือนเราเปิดหนังสือว่าเราต้องเจอหน้าปก คำนำ สารบัญ เนื้อหา อ้างอิง ภาพประกอบ

ส่วนว่ามี tag อะไรมาใหม่มาให้ใช้บ้าง   มีเอกสารอ้างอิงให้นิดหน่อยครับ

หรือดูข้อมูลได้ที่ http://www.w3schools.com/html5/html5_reference.asp