HTML5 องค์ประกอบใหม่

นับตั้งแต่ปี 1999, HTML 4.01 มีการเปลี่ยนแปลงมาก วันนี้หลายคนของ HTML 4.01 ได้รับการคัดค้านและองค์ประกอบเหล่านี้ได้ถูกลบหรือนิยามใหม่ใน HTML5

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

องค์ประกอบใหม่ใน HTML5

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

ใหม่ความหมาย / โครงสร้างองค์ประกอบ

HTML5 มีองค์ประกอบใหม่สำหรับโครงสร้างของเอกสารที่ดีกว่า:

แท็ก	ลักษณะ
<article>	กำหนดบทความในเอกสารที่
<aside>	กำหนดเนื้อหานอกเหนือจากเนื้อหาของหน้าเว็บ
<bdi>	ระบุส่วนของข้อความที่อาจจะมีการจัดรูปแบบในทิศทางที่แตกต่างจากข้อความอื่น ๆ
<details>	กำหนดรายละเอียดเพิ่มเติมที่ผู้ใช้สามารถดูหรือซ่อน
<dialog>	กำหนดกล่องโต้ตอบหรือหน้าต่าง
<figcaption>	กำหนดคำอธิบายสำหรับ <figure> องค์ประกอบ
<figure>	กำหนดเนื้อหาที่ตนเองมีเช่นภาพประกอบ, แผนภาพ, ภาพถ่าย, รายชื่อรหัส ฯลฯ
<footer>	กำหนดส่วนท้ายของเอกสารหรือส่วนใดส่วนหนึ่ง
<header>	กำหนดส่วนหัวสำหรับเอกสารหรือส่วนใดส่วนหนึ่ง
<main>	กำหนดเนื้อหาหลักของเอกสาร
<mark>	กำหนดทำเครื่องหมายหรือไฮไลต์ข้อความ
<menuitem>	กำหนดคำสั่ง / รายการเมนูที่ผู้ใช้สามารถเรียกใช้จากเมนูป๊อปอัพ
<meter>	กำหนดวัดเกลาในช่วงที่รู้จักกัน (a gauge)
<nav>	กำหนดลิงค์การนำทางในเอกสาร
<progress>	กำหนดความคืบหน้าของงาน
<rp>	กำหนดสิ่งที่จะแสดงในเบราว์เซอร์ที่ไม่สนับสนุน ruby คำอธิบายประกอบ
<rt>	กำหนดคำอธิบาย / การออกเสียงของตัวอักษร (สำหรับพิมพ์เอเชียตะวันออก)
<ruby>	กำหนด ruby คำอธิบายประกอบ (for East Asian typography)
<section>	กำหนดส่วนในเอกสาร
<summary>	กำหนดหัวข้อที่มองเห็นสำหรับ <details> องค์ประกอบ
<time>	กำหนดวัน / เวลา
<wbr>	กำหนดเส้นแบ่งที่เป็นไปได้

อ่านเพิ่มเติมเกี่ยวกับ HTML5 ความหมาย

องค์ประกอบรูปแบบใหม่

แท็ก	ลักษณะ
<datalist>	กำหนดตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับการควบคุมการป้อนข้อมูล
<keygen>	กำหนดฟิลด์กำเนิดไฟฟ้าคู่ (for forms)
<output>	กำหนดผลลัพธ์ของการคำนวณที่

อ่านทั้งหมดเกี่ยวกับเก่าและใหม่องค์ประกอบของแบบฟอร์มใน องค์ประกอบฟอร์ม HTML

ประเภทการป้อนข้อมูลใหม่

ประเภทการป้อนข้อมูลใหม่	แอตทริบิวต์การป้อนข้อมูลใหม่
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

เรียนรู้เกี่ยวกับรูปแบบการใส่เก่าและใหม่ใน HTML ประเภทการป้อนข้อมูล

เรียนรู้เกี่ยวกับการป้อนข้อมูลแบบใน แอตทริบิวต์การป้อนข้อมูล HTML

HTML5 - เพิ่มคุณสมบัติไวยากรณ์

HTML5 ช่วยให้สี่ไวยากรณ์ที่แตกต่างกันสำหรับแอตทริบิวต์

ตัวอย่างนี้แสดงให้เห็นถึงไวยากรณ์ต่างๆที่ใช้ใน <input> แท็ก:

ชนิด	ตัวอย่าง
ว่างเปล่า	<input type="text" value="John" disabled >
unquoted	<input type="text" value=John >
ยกมาสองครั้ง	<input type="text" value="John Doe" >
เดี่ยวยกมา	<input type="text" value='John Doe' >

ใน HTML5 ทั้งสี่ไวยากรณ์อาจจะใช้ขึ้นอยู่กับสิ่งที่จำเป็นสำหรับแอตทริบิวต์

กราฟิก HTML5

แท็ก	ลักษณะ
<canvas>	กำหนดวาดภาพกราฟิกโดยใช้ JavaScript
<svg>	กำหนดวาดภาพกราฟิกโดยใช้ SVG

อ่านเพิ่มเติมเกี่ยวกับ ผ้าใบ HTML5

อ่านเพิ่มเติมเกี่ยวกับ HTML5 SVG

องค์ประกอบสื่อใหม่

แท็ก	ลักษณะ
<audio>	กำหนดเสียงหรือเนื้อหาเพลง
<embed>	กำหนดภาชนะสำหรับการใช้งานภายนอก (like plug-ins)
<source>	กำหนดแหล่งที่มาสำหรับ <video> และ <audio>
<track>	กำหนดแทร็คสำหรับ <video> และ <audio>
<video>	กำหนดวิดีโอหรือภาพยนตร์เนื้อหา

อ่านเพิ่มเติมเกี่ยวกับ วิดีโอ HTML5

อ่านเพิ่มเติมเกี่ยวกับ HTML5 และเสียง

❮ก่อนหน้า ถัดไปบท❯

HTML5 เกี่ยวกับการสอน

HTML ฟอร์ม

HTML5

HTML กราฟิก

HTML สื่อ

HTML APIs

HTML ตัวอย่าง

HTML คู่มืออ้างอิง

HTML5 องค์ประกอบใหม่