นิยาย HTML5

ตัวอย่าง HTML5 ในแต่ละบท

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
 เบราเซอร์ของคุณไม่สนับสนุนแท็กวิดีโอ
</video>
</body>
</html>

ทดลองด้วยตัวเอง

คลิกที่ "ทดลองด้วยตัวเอง" ที่นี่เพื่อดูว่าตัวอย่างนี้จะทำงานได้อย่างไร

มันคืออะไรที่เรียกว่า HTML5?

HTML5 คือมาตรฐาน HTML ล่าสุด

HTML5 ถูกออกแบบเพื่อบรรจุเนื้อหาเว็บที่มีความรุ่นระดับ โดยไม่จำเป็นต้องใช้ปลั๊กอินตัวเอง

HTML5 มีนัยหมายใหม่ สื่อกราฟิก และสื่อมัลติมีเดีย

HTML5 มีองค์ประกอบและ API ใหม่ที่ทำให้การสร้างโปรแกรมเว็บเพิ่มขึ้นง่ายขึ้น

HTML5 มีความสามารถที่จะทำงานทางการแพร่ภาพทุกแพลตฟอร์ม และถูกออกแบบเพื่อทำงานบนอุปกรณ์ที่มีรูปแบบต่าง ๆ (PC, แท็บเล็ต, มือถือ, โทรทัศน์ และอื่น ๆ)

หมายเหตุ：ในบทบาทหลังนี้ คุณจะเรียนวิธีที่จะ "ช่วยเหลือ" การทำงานของเบราเซอร์รุ่นเก่าที่ใช้ HTML5。

สิ่งใหม่ใน HTML5?

การประกาศประเภทเอกสาร (DOCTYPE) ใหม่ของ HTML5 นั้นง่ายต่อตัวเองมาก:

<!DOCTYPE html>
การประกาศตัวอักษรปริมาณ (charset) ที่ใหม่นั้นง่ายต่อตัวเองมาก:
<meta charset="UTF-8">

ตัวอย่าง HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>หัวข้อของเอกสาร</title>
</head>
<body>
เนื้อหาของเอกสาร......
</body>
</html>

หมายเหตุ：ตัวอักษรปริมาณต้นตายของ HTML5 คือ UTF-8。

HTML5 - ภาษาสัญลักษณ์คุณสมบัติใหม่

HTML5 มีมาตรฐานที่อนุญาตให้มีภาษาสัญลักษณ์คุณสมบัติที่แตกต่างกันสี่รูปแบบ。

ตัวอย่างนี้แสดงว่ามีการใช้ภาษาที่แตกต่างกันในแท็ก <input>

ประเภท ตัวอย่าง
Empty <input type="text" value="Bill Gates" disabled>
Unquoted <input type="text" value=Bill Gates>
Double-quoted <input type="text" value="Bill Gates">
Single-quoted <input type="text" value='Bill Gates'>

ในมาตราฐาน HTML5 อาจจะใช้ทั้ง 4 รูปแบบภาษาตามความต้องการของอาตริบุตร

คุณสมบัติใหม่ของ HTML5

คุณสมบัติที่น่าสนใจที่สุดของ HTML5

  • ตัวแปลงทางวิเคราะห์ใหม่ อย่างเช่น <header>, <footer>, <article>, และ <section>
  • ตัวควบคุมฟอร์มใหม่ อย่างเช่นตัวเลข วันที่ ชั่วโมง ปฏิทิน และสลิดลาก
  • การสนับสนุนรูปภาพที่มีความแข็งแกร่ง (ด้วย <canvas> และ <svg>)
  • การสนับสนุนมีดเหนือความแข็งแกร่งในสื่อส่วนตัว (ด้วย <video> และ <audio>)
  • API ใหม่ที่มีความแข็งแกร่ง อย่างเช่นการใช้เก็บข้อมูลท้องที่แทน cookie

ตัวแปลงที่ถูกลบออกจาก HTML5

ตัวแปลงที่มีอยู่ใน HTML 4.01 ถูกลบออกจาก HTML5

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>