อนุสัญญารหัส HTML

สำหรับนักพัฒนาเว็บจำนวนมาก ข้อกำหนดโค้ด HTML ยังไม่ค่อยเข้าใจ

ในปี 2543-2553 นักพัฒนาเว็บจำนวนมากเปลี่ยนจาก HTML เป็น XHTML

นักพัฒนาที่ใช้ XHTML กำลังค่อยๆ พัฒนาข้อกำหนดการเขียน HTML ที่ดี

และใน HTML5 เราจะต้องสร้างมาตรฐานโค้ดที่ค่อนข้างดี โดยมีหลักเกณฑ์หลายประการระบุไว้ด้านล่างข้อกำหนด

ใช้ประเภทเอกสารที่ถูกต้อง

ประกาศประเภทเอกสารในบรรทัดแรกของเอกสาร HTML:

ประเภทเอกสาร HTML>

หากคุณต้องการใช้ป้ายกำกับอื่นๆ เช่น ตัวพิมพ์เล็ก คุณสามารถใช้โค้ดต่อไปนี้:

ประเภทเอกสาร HTML>

ชื่อองค์ประกอบตัวพิมพ์เล็ก

ชื่อองค์ประกอบ HTML5 สามารถใช้เป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก

• เคสสไตล์ผสมแย่มาก
• ตัวอักษรตัวพิมพ์เล็กง่ายต่อการเขียน

นี่คือย่อหน้า

แย่มาก:

นี่คือย่อหน้า

นี่คือย่อหน้า

ปิดองค์ประกอบ HTML ทั้งหมด

ใน HTML5 คุณไม่ต้องการปิดองค์ประกอบทั้งหมด (เช่น องค์ประกอบ ) แต่เราขอแนะนำให้ทุกองค์ประกอบควรเพิ่มแท็กปิด

นี่คือย่อหน้า

นี่คือย่อหน้า

นี่คือย่อหน้า

นี่คือย่อหน้า

ปิดองค์ประกอบ HTML ที่ว่างเปล่า

ใน HTML5 องค์ประกอบ HTML ที่ว่างเปล่าไม่จำเป็นต้องปิด:

เราสามารถเขียนได้:

คุณยังสามารถเขียน:

ต้องมี XML, XHTML และเครื่องหมายทับ (/)

หากคุณวางแผนที่จะใช้หน้าซอฟต์แวร์ XML รูปแบบนี้ถือว่าดีมาก

ชื่อแอตทริบิวต์ตัวพิมพ์เล็ก

HTML5 อนุญาตให้คุณใช้ชื่อคุณสมบัติทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก

• กรณีการใช้งานเป็นนิสัยที่แย่มาก
• โดยทั่วไปนักพัฒนาจะใช้ตัวพิมพ์เล็ก (คล้ายกับ XHTML)
• สไตล์ตัวพิมพ์เล็กดูสดชื่นยิ่งขึ้น
• ตัวอักษรตัวพิมพ์เล็กง่ายต่อการเขียน

มูลค่าทรัพย์สิน

ไม่สามารถอ้างอิงค่าแอตทริบิวต์ HTML5 ได้

• หากค่าคุณสมบัติมีการเว้นวรรค คุณต้องใช้เครื่องหมายคำพูด
• ไม่แนะนำให้ใช้สไตล์ผสม แนะนำให้ใช้สไตล์เดียว
• ค่าทรัพย์สินโดยใช้เครื่องหมายคำพูดนั้นอ่านง่าย

ค่าแอตทริบิวต์ตัวอย่างต่อไปนี้มีการเว้นวรรค อย่าใช้เครื่องหมายคำพูด อาจใช้ไม่ได้:

ข้อมูลต่อไปนี้ใช้เครื่องหมายคำพูดคู่และถูกต้อง:

คุณสมบัติ

มักใช้แอตทริบิวต์ Image Alt หากไม่สามารถแสดงภาพได้ก็สามารถเปลี่ยนการแสดงภาพได้

= "HTML5" style = "width: 128px; height: 128px">

ขนาดภาพถูกกำหนดไว้สามารถจองได้ในขณะที่โหลดค่าที่กำหนดลดการสั่นไหว

= สไตล์ "HTML5" = "ความกว้าง: 128px; ความสูง: 128px">

ช่องว่างและเครื่องหมายเท่ากับ

คุณสามารถใช้ช่องว่างก่อนและหลังเครื่องหมายเท่ากับได้

หลีกเลี่ยงบรรทัดโค้ดที่ยาว

การใช้โปรแกรมแก้ไข HTML โค้ดเลื่อนซ้ายและขวาไม่สะดวก

โค้ดแต่ละบรรทัดมีความยาวไม่เกิน 80 อักขระมากที่สุด

เส้นว่างและการเยื้อง

อย่าเพิ่มบรรทัดว่างโดยไม่มีเหตุผล

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

อย่าใช้บรรทัดเว้นว่างที่ไม่จำเป็นระหว่างรหัสย่อ

บรรทัดว่างและการเยื้องเพิ่มเติม:

บทช่วยสอนนี้

HTML

บทช่วยสอนนี้ไม่เพียงสอนเทคโนโลยีเท่านั้น แต่ยังสอนเรื่องการนอนหลับด้วย
หนังสือเรียนเล่มนี้ไม่เพียงสอนเทคโนโลยีเท่านั้น แต่ยังสอนในฝันด้วย
บทช่วยสอนนี้ไม่เพียงสอนเทคโนโลยีเท่านั้น แต่ยังสอนเรื่องการนอนหลับด้วย

บทช่วยสอนนี้

ในบทช่วยสอนนี้ ไม่เพียงแต่สอนเทคโนโลยีเท่านั้น แต่ยังรวมถึงการนอนหลับด้วย
บทช่วยสอนนี้ไม่เพียงสอนเทคโนโลยีเท่านั้น แต่ยังสอนเรื่องการนอนหลับด้วย
บทช่วยสอนนี้ไม่เพียงสอนเทคโนโลยีเท่านั้น แต่ยังสอนเรื่องการนอนหลับด้วย
บทช่วยสอนนี้ไม่เพียงสอนเทคโนโลยีเท่านั้น แต่ยังสอนเรื่องการนอนหลับด้วย

แบบฟอร์มตัวอย่าง:

ชื่อ
คำอธิบาย


ก
คำอธิบาย


บี
คำอธิบาย B

รายการตัวอย่าง:

ลอนดอน

ปารีส

โตเกียว

ละเว้นและ?

ในมาตรฐาน HTML5 แท็กสามารถละเว้นได้

เอกสารต่อไปนี้เป็น HTML5 ที่ถูกต้อง:

ตัวอย่าง:

ประเภทเอกสาร HTML>

ชื่อหน้า

นี่คือชื่อ

นี่คือย่อหน้า

ลองเลย »

element คือองค์ประกอบรากของเอกสาร ซึ่งเป็นภาษาที่ใช้อธิบายหน้า:

ประเภทเอกสาร HTML>

คำชี้แจงภาษาเพื่อให้อ่านบนหน้าจอและเครื่องมือค้นหาได้ง่ายขึ้น

ละเว้นข้อขัดข้องของซอฟต์แวร์ DOM หรือ XML

ละเว้นข้อผิดพลาดที่เกิดขึ้นในเบราว์เซอร์รุ่นเก่า (IE9)

เราจะละเว้นมันได้หรือไม่?

ในมาตรฐาน HTML5 แท็กสามารถละเว้นได้

เบราว์เซอร์มีค่าเริ่มต้นเป็นเนื้อหาก่อนที่จะเพิ่มองค์ประกอบเป็นค่าเริ่มต้น

ตัวอย่าง

ประเภทเอกสาร HTML>

ชื่อหน้า

นี่คือชื่อ

นี่คือย่อหน้า

ลอง » ข้อมูลเมตา

HTML5 ต้องใช้องค์ประกอบที่มีชื่อชื่อที่อธิบายรูปแบบของหน้า:

ในบทช่วยสอนนี้

ชื่อและภาษาที่ช่วยให้เครื่องมือค้นหาเข้าใจหัวข้อของเพจของคุณได้อย่างรวดเร็ว:

ประเภทเอกสาร HTML>



ในบทช่วยสอนนี้

บ่อยครั้งที่นักพัฒนาเว็บไม่ทราบด้วยซ้ำว่ามีมาตรฐานการเข้ารหัส HTML บางอย่างอยู่ อย่างไรก็ตาม ระหว่างปี 2000 ถึง 2010 นักพัฒนาเว็บจำนวนมากเปลี่ยนจาก HTML เป็น XHTML ในเวลาเดียวกัน XHTML บังคับให้นักพัฒนาเขียนโค้ดที่ถูกต้องและ "มีรูปแบบที่ดี" เมื่อพูดถึงการตรวจสอบความถูกต้องของโค้ด HTML5 ทำให้เกิดความเลอะเทอะอยู่บ้าง

อย่างไรก็ตาม ความสม่ำเสมอในรูปแบบจะทำให้ผู้อื่นเข้าใจโค้ด HTML ของคุณได้ง่ายขึ้น

บางทีสักวันหนึ่งโปรแกรม เช่น โปรแกรมอ่านข้อมูล XML จะต้องอ่านโค้ด HTML ของคุณ ดังนั้น การใช้ไวยากรณ์เหมือน XHTML ที่มีรูปแบบดีจึงเป็นแนวทางที่สมเหตุสมผล

ตรวจสอบให้แน่ใจว่าโค้ดของคุณเรียบร้อย สะอาดตา และมีรูปแบบที่ดีเสมอ

ใช้ประเภทเอกสารที่ถูกต้อง

ประกาศประเภทเอกสารในบรรทัดแรกเสมอ:

หากคุณต้องการรักษาความสอดคล้องกับแท็กตัวพิมพ์เล็ก คุณสามารถใช้คำจำกัดความประเภทเอกสารต่อไปนี้:

เขียนชื่อองค์ประกอบด้วยตัวอักษรตัวเล็ก

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

• การผสมตัวพิมพ์ใหญ่และตัวพิมพ์เล็กในชื่อแท็กถือเป็นแนวทางปฏิบัติที่ไม่เหมาะสม

นี่คือย่อหน้าของข้อความ

แย่มาก:

นี่คือย่อหน้าของข้อความ

นี่คือย่อหน้าของข้อความ

ปิดองค์ประกอบ HTML ทั้งหมด

ใน HTML5 คุณไม่จำเป็นต้องปิดองค์ประกอบทั้งหมด (เช่น องค์ประกอบ

นี่คือย่อหน้าของข้อความ

นี่คือย่อหน้าของข้อความ

นี่คือย่อหน้าของข้อความ

นี่คือย่อหน้าของข้อความ

ปิดองค์ประกอบ HTML ที่ว่างเปล่า

ใน HTML5 การปิดองค์ประกอบว่างหรือไม่นั้นขึ้นอยู่กับความต้องการของนักพัฒนาเว็บ

ยอมรับได้:

ยังยอมรับได้:

อย่างไรก็ตาม จำเป็นต้องมีเครื่องหมายทับ (/) ใน XHTML และ XML

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

ใช้ตัวอักษรตัวเล็กสำหรับชื่อแอตทริบิวต์

ใน HTML5 คุณสามารถผสมอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็กเมื่อเขียนชื่อแอตทริบิวต์

• การผสมตัวพิมพ์ใหญ่และตัวพิมพ์เล็กในชื่อแอตทริบิวต์ถือเป็นแนวทางปฏิบัติที่ไม่เหมาะสม
• นักพัฒนามักจะใช้ตัวอักษรตัวเล็ก (เช่นใน XHTML)
• การเขียนตัวพิมพ์เล็กดูสะอาดตายิ่งขึ้น
• ตัวพิมพ์เล็กจะเขียนง่ายกว่า

ใส่ค่าแอตทริบิวต์ไว้ในเครื่องหมายคำพูด

HTML5 อนุญาตให้เขียนค่าแอตทริบิวต์โดยไม่มีเครื่องหมายคำพูด อย่างไรก็ตาม เราขอแนะนำให้ใส่ค่าแอตทริบิวต์ไว้ในเครื่องหมายคำพูดเสมอเพราะ

• การผสมอักษรตัวพิมพ์ใหญ่และตัวพิมพ์เล็กในความหมายถือเป็นการปฏิบัติที่ไม่ดี
• ค่าที่ยกมาจะอ่านง่ายกว่า
• คุณต้องเสนอราคาหากมีช่องว่างในค่า

แย่มาก:

สิ่งนี้จะไม่ทำงานเนื่องจากมีช่องว่างในค่า

คุณสมบัติรูปภาพ

เมื่อกำหนดรูปภาพ ให้ใช้แอตทริบิวต์ "alt" เสมอ คุณลักษณะนี้มีความสำคัญเมื่อรูปภาพไม่แสดงด้วยเหตุผลบางประการ

นอกจากนี้ ให้กำหนดความกว้างและความสูงของรูปภาพเสมอ ซึ่งจะช่วยลดการแบ่งเค้าโครงหน้าเนื่องจากเบราว์เซอร์จะสงวนพื้นที่สำหรับรูปภาพในขณะที่กำลังโหลดหน้า

ช่องว่างและเท่ากับ

HTML5 อนุญาตให้มีช่องว่างรอบเครื่องหมายเท่ากับ อย่างไรก็ตาม เมื่อไม่มีการเว้นวรรค โค้ดจะอ่านง่ายกว่าและจัดกลุ่มเอนทิตีได้ดีขึ้น

หลีกเลี่ยงบรรทัดโค้ดที่ยาว

เมื่อใช้โปรแกรมแก้ไข HTML การอ่านโค้ด HTML ไม่สะดวกหากคุณต้องเลื่อนหน้าต่างไปทางซ้ายหรือขวา

คุณควรพยายามรักษาบรรทัดโค้ดให้ยาวไม่เกิน 80 อักขระ

เส้นว่างและการเยื้อง

คุณไม่ควรเพิ่มบรรทัดว่างโดยไม่มีเหตุผลที่ดี

เพื่อให้อ่านง่ายที่สุด ควรเพิ่มบรรทัดว่างเพื่อแยกบล็อกโค้ดขนาดใหญ่และสอดคล้องกันทางตรรกะเท่านั้น

นอกจากนี้ เพื่อให้อ่านง่ายขึ้น ให้เพิ่มช่องว่างสองช่องสำหรับการเยื้อง อย่าใช้แท็บสำหรับสิ่งนี้

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

ไม่จำเป็น:

เมืองชื่อดังของโตเกียว

โตเกียวเป็นเมืองหลวงของญี่ปุ่น ซึ่งเป็นศูนย์กลางของเขตมหานครโตเกียว และเป็นเขตเมืองใหญ่ที่มีประชากรมากที่สุดในโลก

เป็นที่ตั้งของรัฐบาลญี่ปุ่นและพระราชวังอิมพีเรียล และเป็นที่ประทับของราชวงศ์ญี่ปุ่น

เมืองชื่อดังของโตเกียว

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

คำอธิบายชื่อ	ก
คำอธิบายของ A	บี

คำอธิบายของ B

ลอนดอน

ปารีส

โตเกียว

ที่จะข้ามหรือไม่และ?

ตามมาตรฐาน HTML5 ห้ามใช้แท็กและแท็ก

รหัสต่อไปนี้ถือว่าถูกต้องตามมาตรฐาน HTML5:

ชื่อหน้า นี่คือชื่อข้อความ

นี่คือย่อหน้าของข้อความ

องค์ประกอบคือรากของเอกสาร นี่คือตำแหน่งที่แนะนำในการกำหนดภาษาของเพจ:

การประกาศภาษาของหน้าเว็บมีความสำคัญทั้งสำหรับแอปพลิเคชันพิเศษ (เช่น โปรแกรมอ่านหน้าจอ) และสำหรับเครื่องมือค้นหา

นอกจากนี้ หากคุณไม่ได้เขียนแท็ก อาจทำให้โครงสร้าง DOM และ XML ของแอปพลิเคชันเสียหายได้ และการข้ามแท็กอาจทำให้เกิดข้อผิดพลาดในเบราว์เซอร์รุ่นเก่า (IE9)

ฉันควรข้ามแท็กหรือไม่

ตามมาตรฐาน HTML5 ห้ามใช้แท็ก

ตามค่าเริ่มต้น เบราว์เซอร์จะเพิ่มองค์ประกอบทั้งหมดก่อนแท็กเปิดภายในองค์ประกอบที่พวกเขาสร้างขึ้น

คุณสามารถลดความซับซ้อนของโครงสร้าง HTML ได้โดยละเว้นแท็ก:

ชื่อหน้า ชื่อข้อความ

นี่คือย่อหน้าข้อความ

ข้อมูลเมตา

องค์ประกอบที่จำเป็นใน HTML5 ชื่อหน้าควรเต็มไปด้วยความหมาย:

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

ไวยากรณ์ HTML5 และมาตรฐานการเข้ารหัส

การติดตั้งวิวพอร์ต (หน้าต่างดู)

"Viewport" คือพื้นที่ที่ผู้ใช้มองเห็นได้ของหน้าเว็บ ความแตกต่างระหว่างอุปกรณ์ต่ออุปกรณ์และบนโทรศัพท์มือถือในส่วนนี้จะน้อยกว่าบนหน้าจอคอมพิวเตอร์

คุณควรใช้ตัวควบคุมวิวพอร์ตในรูปแบบต่อไปนี้บนหน้าเว็บทั้งหมด:

การควบคุมวิวพอร์ตนี้ให้คำแนะนำแก่เบราว์เซอร์เกี่ยวกับวิธีการควบคุมขนาดและการปรับขนาดของหน้า

ส่วน width=device-width กำหนดความกว้างของหน้าให้ตรงกับความกว้างหน้าจอของอุปกรณ์ปัจจุบัน (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์ที่คุณใช้)

ส่วน Initial-scale=1.0 จะกำหนดระดับการซูมเริ่มต้นเมื่อเบราว์เซอร์โหลดหน้าเว็บครั้งแรก

ด้านล่างนี้ คุณสามารถดูตัวอย่างหน้าเว็บบนหน้าจอสมาร์ทโฟนทั้งที่ติดตั้งและไม่มีเมตาแท็กวิวพอร์ต:

หน้าที่มีเมตาแท็กวิวพอร์ต

ความคิดเห็น HTML

ควรเขียนความคิดเห็นสั้น ๆ ในหนึ่งบรรทัด:

นักออกแบบเว็บไซต์ - ข้อกำหนด HTML5 (HTML 5)

แท็กใน HTML5 คือแท็ก XML-HTML ที่อธิบายโครงสร้างของหน้าเว็บ ออกแบบมาเพื่อให้โปรแกรมคอมพิวเตอร์ (โรบ็อตการค้นหา ฯลฯ) สามารถแยกแยะเนื้อหาหลักของหน้าจากส่วนที่เหลือของหน้า (องค์ประกอบการกำหนดสูตรและการนำทาง) : ด้านบน, ด้านล่าง, เมนู, องค์ประกอบด้านข้างของหน้า, บล็อกการทำซ้ำ (ไดนามิก) ฯลฯ นอกจากนี้ยังมีการแบ่งระดับเนื้อหาหลัก (ข้อความหน้า) ภาษา HTML5 นั้นเป็นส่วนเสริมของ HTML, XML, CSS และอื่น ๆ

ชื่อหน้า ด้านบนของหน้าเว็บ "ส่วนหัว" เมนูหลักของหน้าเว็บ เนื้อหาหลัก บทความ เนื้อหาของหน้า แถบด้านข้าง (แถบด้านข้าง) ด้านล่างของหน้า ส่วนท้าย

โครงสร้างเว็บไซต์

- กำหนดกรอบเนื้อหาหลักของหน้า (บทความ)
- ใส่กรอบส่วนหัวของหน้า
- วางกรอบส่วนท้ายของหน้า
- กำหนดกรอบเมนูหลักของหน้า
- วางกรอบแถบด้านข้างของหน้า (แถบด้านข้าง)
- บล็อกการทำซ้ำเฟรมบนเพจ (เช่น ความคิดเห็น)

องค์ประกอบโค้ดเทมเพลตหน้าเว็บ HTML5

- กำหนดการเข้ารหัส windows-1251

- หากเปิดเพจใน IE เบราว์เซอร์ควรใช้โหมดการแสดงผลมาตรฐานล่าสุดเสมอ

- การแสดงเว็บไซต์บนอุปกรณ์มือถือ

header - ส่วนหัวของหน้าเว็บไซต์ โดยปกติจะประกอบด้วยโลโก้ของเว็บไซต์ ส่วนหัว หมายเลขโทรศัพท์ แถบเลื่อน ฯลฯ

nav - เมนูหลักของหน้าเว็บไซต์

บทความ - เนื้อหาหลักของหน้า: บทความ โพสต์ในบล็อก หัวข้อฟอรั่ม ฯลฯ อาจมีข้อความ รูปภาพ วีดีโอ ตาราง ฯลฯ

นอกเหนือ - แถบด้านข้าง (แถบด้านข้าง) ของเว็บไซต์ มักจะมีองค์ประกอบต่างๆ เช่น หมวดหมู่ แท็ก โพสต์/ความคิดเห็นล่าสุด เมนูเพิ่มเติม ตัวนับ ฯลฯ

footer - ส่วนล่าง - ส่วนท้ายของหน้าเว็บไซต์ มักจะมีข้อมูลต่างๆ (ลิขสิทธิ์), ข้อมูลติดต่อ (ที่อยู่, หมายเลขโทรศัพท์) ฯลฯ

HTML5 ในระดับโครงสร้างหน้า

ลองดูรายการแท็ก HTML5 ใหม่ที่รับผิดชอบในการแบ่งโครงสร้างหน้า:

- แท็กที่จัดวางองค์ประกอบการออกแบบของส่วนบนของเว็บไซต์ ที่เรียกว่า "ส่วนหัวของหน้า" แท็กส่วนหัวสามารถใช้เป็นแท็กส่วนบนสุดได้

- แท็กที่จัดกรอบเมนูหลักบนเว็บไซต์

- แท็กที่จัดกรอบเนื้อหาหลักของหน้า: บทความ, รายการบล็อก, ข่าว, รายการในฟอรัมแรก ฯลฯ

- แท็กที่จัดกรอบแถบด้านข้าง แถบด้านข้างเรียกว่า "แถบด้านข้าง" ซึ่งโดยปกติจะมีบล็อกของส่วนหัว (หมวดหมู่) กลุ่มแท็ก (แท็ก) รายการโพสต์ล่าสุด ฯลฯ คุณยังสามารถใช้แท็กนอกกรอบตัวนับ วิดเจ็ต (เช่น ความคิดเห็นจาก VKontakte) และปุ่มโซเชียล

- แท็กที่อยู่ด้านล่างของเว็บไซต์ ที่เรียกว่า "ส่วนท้ายของหน้า" ซึ่งอาจประกอบด้วยชื่อผู้เขียน (บริษัท) ข้อมูลติดต่อ (ที่อยู่ หมายเลขโทรศัพท์) ข้อมูลทางกฎหมาย (ลิขสิทธิ์) ฯลฯ แท็กส่วนท้ายยังสามารถใช้เป็นส่วนล่างของแท็กส่วนได้ เช่น แท็กส่วนท้ายจะอยู่ระหว่างแท็กส่วน

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

HTML5 ในระดับข้อความ

ลองดูรายการแท็ก HTML5 ใหม่ที่รับผิดชอบในการแบ่งความหมายของข้อความหน้า:

- ข้อความที่อยู่ระหว่างแท็กเหล่านี้จะกลายเป็น "ถูกเลือก" วัตถุประสงค์ประการหนึ่งของแท็กทำเครื่องหมายคือการวางกรอบคำในข้อความที่จับคู่คำที่ผู้ใช้ป้อนในบรรทัดค้นหา เป็นต้น

- แท็กได้รับการออกแบบเพื่อสร้างวันที่และ/หรือเวลาในรูปแบบ
ISO ของรูปแบบ: YYYY-MM-DDThh:mm:ss รูปแบบนี้สามารถเข้าใจได้ในโปรแกรมคอมพิวเตอร์ แท็กเวลาสามารถกำหนดกรอบวันที่หรือข้อความได้ หากแท็กกำหนดกรอบข้อความ จะมีการเพิ่มแอตทริบิวต์ datetime เข้าไป โดยค่าจะเป็นวันที่และ/หรือเวลาในรูปแบบ ISO

- แท็กได้รับการออกแบบมาเพื่อจัดเก็บข้อมูลที่ถูกซ่อนหรือแสดง (ทำงานเหมือนสปอยเลอร์)

- แท็กจะล้อมชื่อเรื่อง หากคุณคลิก ข้อความจะปรากฏขึ้น (สามารถใช้เป็นสปอยเลอร์ได้) ซึ่งอยู่ระหว่างแท็กรายละเอียด

แท็กภาษา HTML5 เพิ่มเติม

รายการแท็ก HTML5 ใหม่ที่ช่วยเสริมภาษา:

- แท็กมีไว้เพื่อแสดงตัวบ่งชี้ขนาดคงที่ ซึ่งผลการวัดจะไม่เปลี่ยนแปลง ในการทำงาน คุณต้องมีค่าต่ำสุดและสูงสุด

- แท็กได้รับการออกแบบเพื่อแสดงตัวบ่งชี้สเกลแบบไดนามิก (เช่น สเกลการดาวน์โหลดไฟล์) ซึ่งผลการวัดจะเปลี่ยนแปลงแบบเรียลไทม์

- แท็กจะต้องอยู่ระหว่างแท็กเมนู ซึ่งใช้เมื่อสร้างสคริปต์ใน JavaScript

- แท็กคำสั่งจะอยู่ระหว่างแท็กเหล่านี้

- แท็กมีวัตถุประสงค์เพื่อแสดงการทำงานของสคริปต์

- แท็กมีวัตถุประสงค์เพื่อสร้างรายการที่จะแสดงเมื่อพิมพ์ลงในช่องข้อความ

- แท็กจะกำหนดกรอบคำอธิบายของวัตถุ (เช่น รูปภาพ) ซึ่งอยู่ระหว่างแท็กรูปภาพ

- แท็กจะจัดกลุ่มออบเจ็กต์หน้าต่างๆ ด้วยคำอธิบายของตัวเอง เช่น รูปภาพพร้อมคำอธิบาย สินค้าพร้อมคำอธิบาย เป็นต้น

- แท็กได้รับการออกแบบให้จัดกลุ่มส่วนหัว h*

- แท็กนี้ใช้เพื่อสร้างคู่คีย์สาธารณะ/ส่วนตัว เข้ารหัส/ถอดรหัสข้อมูล สร้าง/ตรวจสอบลายเซ็นดิจิทัล

- แท็กจะจัดกรอบข้อความและคำอธิบายประกอบ

- แท็กอยู่ระหว่างแท็กทับทิมและมีวัตถุประสงค์เพื่อใส่กรอบคำอธิบายประกอบ

- แท็กมีไว้สำหรับเบราว์เซอร์ที่ไม่รองรับแท็ก Ruby

- แท็ก จะบอกเบราว์เซอร์ว่าจะใส่ยัติภังค์คำว่า (“ยัติภังค์แบบอ่อน”) ไว้ที่ใด หากคำนั้นไม่พอดีกับหน้าต่างเบราว์เซอร์

แท็ก HTML5 ที่อธิบายเทคโนโลยีใหม่

HTML5 ได้นำเสนอความสามารถในการใช้เทคโนโลยีและ API มากมายที่เป็นส่วนหนึ่งของภาษา HTML5 ไม่ใช่ปลั๊กอินของบุคคลที่สาม นี่คือบางส่วน:

- แท็กมีไว้สำหรับเล่นไฟล์เสียงโดยไม่ต้องใช้โปรแกรมบุคคลที่สาม (ปลั๊กอิน ส่วนขยาย)

- แท็กมีไว้สำหรับเล่นไฟล์วิดีโอโดยไม่ต้องใช้โปรแกรมบุคคลที่สาม (ปลั๊กอิน ส่วนขยาย)

- แท็กนี้มีวัตถุประสงค์เพื่อระบุเส้นทางไปยังไฟล์เสียง/วิดีโอ ซึ่งอยู่ภายในแท็กเสียงและวิดีโอ

- แท็กมีวัตถุประสงค์เพื่อสร้างพื้นที่พิเศษบนไซต์ซึ่งคุณสามารถสร้างรูปร่างเวกเตอร์และจัดการโดยใช้ภาษาการเขียนโปรแกรม JavaScript Canvas ในอนาคตควรเข้ามาแทนที่เทคโนโลยี Flash (ตามทฤษฎีแล้ว ใช่แล้ว...)

แท็ก

แท็กเป็นองค์ประกอบพิเศษที่ออกแบบมาเพื่อวาดและจัดการรูปร่างเวกเตอร์ แท็กนี้ถูกสร้างขึ้นเพื่อแทนที่เทคโนโลยี Flash เมื่อใช้แท็ก คุณสามารถวาดรูปร่างเวกเตอร์ (รูปภาพ) และใช้ JavaScript จัดการรูปร่างเหล่านี้ได้ จึงเป็นการสร้างภาพเคลื่อนไหว (การ์ตูนและแม้กระทั่งเกม) บนไซต์

เสียง/วิดีโอ

เมื่อใช้แท็ก คุณสามารถฝังไฟล์เสียงบนเพจและฟังไฟล์เหล่านั้นได้ องค์ประกอบ

เมื่อใช้แท็ก คุณสามารถฝังไฟล์วิดีโอบนหน้าเว็บและดูได้ องค์ประกอบยังสร้างแผงที่มีปุ่มเล่นอีกด้วย

จาวาสคริปต์ API

ข้อกำหนด HTML5 อธิบายว่าภาษา JavaScript ควรโต้ตอบกับองค์ประกอบของหน้าผ่านเทคโนโลยี DOM อย่างไร นอกจากนี้ใน HTML5 ยังมีวิธีการใหม่ๆ ในการจัดการกับวัตถุ เช่น การใช้ JavaScript และวิธีการเหล่านี้ คุณสามารถควบคุมปุ่มต่างๆ บนแผงควบคุมเสียง/วิดีโอโดยทางโปรแกรมได้

รองรับเทคโนโลยี XML

ในเอกสาร HTML ที่เขียนโดยใช้ภาษา HTML5 ขณะนี้เป็นไปได้ที่จะใช้เทคโนโลยีที่เกี่ยวข้องกับรูปแบบ XML ต่างๆ เช่น SVG หรือ MathML

SVG

SVG - กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (ภาษามาร์กอัปกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้) เป็นรูปแบบ XML เนื่องจาก HTML5 เริ่มรองรับรูปแบบ XML ตอนนี้จึงสามารถฝังรูปภาพที่สร้างโดยใช้ SVG ลงในเอกสาร HTML และจัดการรูปภาพเหล่านั้นผ่าน JavaScript ได้

โค้ดตัวอย่างสำหรับรูปแบบวงกลมสีเขียว:

ผลลัพธ์:

คณิตม.ล

MathML - ภาษามาร์กอัปทางคณิตศาสตร์ (ภาษามาร์กอัปทางคณิตศาสตร์) รูปแบบ XML เมื่อใช้รูปแบบนี้ คุณสามารถอธิบายสูตรทางคณิตศาสตร์ต่างๆ ได้

แท็กใดใน HTML5 ที่เลิกใช้งานแล้ว

แท็กเดิมในข้อกำหนด HTML5 คือ:

และควรใช้แท็กฝังแทน
ควรใช้แท็ก abbr แทน
ควรใช้แท็กเสียงแทน
ควรใช้แท็ก ul แทน
ควรใช้แท็ก iframe แทน
คุณควรใช้แบบฟอร์มและแท็กอินพุตจำนวนมากแทน
และควรใช้แท็กล่วงหน้าหรือโค้ดแทน


ควรใช้แท็กล่วงหน้าแทน
ควรใช้แท็ก s แทน

แทนที่จะจัดรูปแบบแท็ก: , , , , , , , , , , และ คุณควรใช้คุณสมบัติ CSS

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

คุณลักษณะสากลใหม่ใน HTML5

แอ็ตทริบิวต์ส่วนกลางคือแอ็ตทริบิวต์ที่สามารถฝังลงในแท็กเอกสาร HTML ใดก็ได้ คุณลักษณะสากลใหม่ปรากฏใน HTML5 ในคำอธิบายด้านล่างจะเน้นด้วยคำว่าใหม่

ลองดูที่ชื่อและคำอธิบายของแอตทริบิวต์ HTML5 ทั่วโลก:

accesskey=" " - อนุญาตให้คุณใช้องค์ประกอบ (แท็ก) ของหน้าโดยการกดคีย์ผสมที่ตั้งโปรแกรมไว้ล่วงหน้า
class=" " - อนุญาตให้คุณตั้งชื่อคลาส
contenteditable=" " - อนุญาตให้คุณแก้ไขเนื้อหาขององค์ประกอบใหม่
contextmenu=" " - ช่วยให้คุณสร้างเมนูบริบทสำหรับองค์ประกอบใหม่
dir=" " - ช่วยให้คุณควบคุมทิศทางของข้อความ
Draggable=" " - อนุญาตให้ผู้ใช้ลากองค์ประกอบใหม่
dropzone=" " - ช่วยให้คุณระบุสิ่งที่ต้องทำกับองค์ประกอบเมื่อลากใหม่
Hiden=" " - อนุญาตให้คุณซ่อนองค์ประกอบใหม่
id=" " - อนุญาตให้คุณตั้งค่าตัวระบุเฉพาะสำหรับองค์ประกอบ
lang=" " - อนุญาตให้คุณระบุรหัสภาษาในเนื้อหาองค์ประกอบ
Spellcheck=" " - อนุญาตให้คุณระบุว่ามีการตรวจสอบการสะกดในเนื้อหาขององค์ประกอบใหม่หรือไม่
style=" " - ช่วยให้คุณสร้างสไตล์สำหรับองค์ประกอบ
tabindex=" " - ช่วยให้คุณสร้างกฎที่ระบุองค์ประกอบลำดับที่ควรได้รับการโฟกัสเมื่อคุณกดปุ่ม Tab
title=" " - ช่วยให้คุณสร้างคำแนะนำเครื่องมือที่ปรากฏขึ้นเมื่อคุณวางเมาส์ไว้เหนือองค์ประกอบ

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

นวัตกรรมในโครงสร้างโค้ดเอกสาร HTML5

โครงสร้างโค้ดใน HTML5 มีการเปลี่ยนแปลงบางอย่าง นี่คือบางส่วน:

1. ไม่เหมือนกับภาษาเวอร์ชันก่อนๆ มีประเภทเอกสารเพียงประเภทเดียวใน HTML5:
ตัวอย่างเช่น คุณสามารถดูได้ในซอร์สโค้ดของหน้าต่างๆ ของไซต์นี้ (อย่าลืมว่าไม่ควรมีอะไรก่อนประเภทเอกสาร ไม่มีการเว้นวรรค ไม่มีการขึ้นบรรทัดใหม่ ฯลฯ)

2. เพื่อระบุภาษาของเอกสาร ตอนนี้แทนที่จะเป็นเมตาแท็ก:
คุณต้องใช้แอตทริบิวต์ lang="ru" ในแท็ก:

3. เพื่อระบุการเข้ารหัสเอกสาร ตอนนี้แทนที่จะเป็นเมตาแท็ก:

คุณต้องใช้เมตาแท็ก โดยไม่มีแอตทริบิวต์ http-equiv และเนื้อหา

4. เมื่อสร้างสคริปต์ JavaScript ตอนนี้อยู่ในแท็กแล้ว ไม่จำเป็นต้องใช้แอตทริบิวต์ type="text/javascript" และ language="JavaScript"

5. เมื่อใช้สไตล์ CSS ขณะนี้อยู่ในแท็ก และ ไม่จำเป็นต้องใช้แอตทริบิวต์ type="text/css"

6. ลิงก์เป็นแท็กอินไลน์ ดังนั้นในข้อกำหนด HTML และ XHTML ยุคแรกๆ จึงไม่แนะนำให้ใช้แท็กบล็อกเฟรม ขณะนี้อยู่ในข้อกำหนด HTML5 คำแนะนำสำหรับลิงก์นี้ได้ถูกลบออกแล้ว และตอนนี้ได้รับอนุญาตให้วางเฟรมอย่างน้อยหนึ่งแท็ก องค์ประกอบบล็อก

หัวเรื่อง

ย่อหน้า

ขณะนี้ด้วย HTML5 คุณสามารถทำได้:

หัวเรื่อง

ขึ้นอยู่กับวัสดุจากเว็บไซต์ http://html-5.ru/, http://html-5.ru/uchebnik-html5

แท็กคำสั่งสำหรับโรบ็อตเครื่องมือค้นหา การโหลดหน้าเว็บเชิงความหมาย

• การเพิ่ม HTML W3C ตั้งแต่ปี 2558-2560

• คำแนะนำของ W3C 24 ธันวาคม 2542

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

คู่มือนี้ถูกใช้โดยนักพัฒนาในขณะที่ทำงาน และโดยเบราว์เซอร์เมื่อสร้างเนื้อหาเอกสารเพื่อช่วยนำทางหน้าเว็บ

ตัวอย่างเช่น มาร์กอัปด้านล่างใช้ส่วนที่ซ้อนกันและส่วนหัวระดับแรก:

ระดับ 1

ระดับ 2

ระดับ 3

เพื่อให้มั่นใจว่าเข้ากันได้กับเบราว์เซอร์เวอร์ชันปัจจุบัน คุณสามารถใช้ระดับส่วนหัวอื่นๆ ได้... โดยแทนที่ส่วนหัวในตำแหน่งที่เหมาะสม

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

ข้อดีอีกประการของการใช้องค์ประกอบใหม่สำหรับนักพัฒนาคือความสามารถในการแทนที่ div จำนวนมากด้วยองค์ประกอบใหม่อย่างใดอย่างหนึ่งที่มีวัตถุประสงค์ที่สอดคล้องกัน ซึ่งทำให้โค้ดสะอาดขึ้นและอ่านง่ายขึ้น

องค์ประกอบมีวัตถุประสงค์เพื่อแสดงชื่อของส่วนเฉพาะของเอกสาร จริงๆแล้วนอกจากชื่อเรื่องแล้วอาจมีข้อมูลประเภทอื่นด้วย ตัวอย่างเช่น ค่อนข้างสมเหตุสมผลที่จะวางหัวข้อย่อย ข้อมูลเกี่ยวกับผู้เขียน และ/หรือข้อมูลเกี่ยวกับเวอร์ชันของเอกสาร การแก้ไข ฯลฯ ไว้ระหว่างแท็ก:

ตัวอย่าง HTML 5

โดย ลาชลัน ฮันท์

องค์ประกอบนี้แสดงถึงส่วนท้ายของส่วนเอกสารที่องค์ประกอบนั้นอยู่ ตามกฎแล้ว จะมีข้อมูลของผู้เขียนเกี่ยวกับเนื้อหาของส่วน ลิงก์ไปยังโพสต์เฉพาะเรื่อง ฯลฯ:

บริษัท ตัวอย่างปี 2550

องค์ประกอบนี้มีวัตถุประสงค์เพื่อให้มีลิงก์การนำทาง เหมาะสำหรับการนำทางไซต์และการโพสต์เนื้อหาเอกสาร:

• บ้าน


• สินค้า


• บริการ


• เกี่ยวกับ

องค์ประกอบทำหน้าที่นำเสนอข้อมูลที่สอดคล้องกับหัวข้อของเนื้อหาโดยรอบในระดับหนึ่งหรืออย่างอื่น องค์ประกอบนี้สะดวกมากสำหรับการติดตั้งแถบด้านข้าง (คอลัมน์ด้านข้าง):

หอจดหมายเหตุ

• กันยายน 2550


• สิงหาคม 2550


• กรกฎาคม 2550

องค์ประกอบแสดงถึงส่วนทั่วไปของเอกสารหรือแอปพลิเคชัน เช่น บท ตัวอย่างเช่น:

บทที่ 1: ระยะเวลา

มันเป็นช่วงเวลาที่ดีที่สุด มันเป็นช่วงเวลาที่เลวร้ายที่สุด
เป็นยุคแห่งปัญญา เป็นยุคแห่งความโง่เขลา
มันเป็นยุคของความเชื่อ มันเป็นยุคของความไม่เชื่อ
มันเป็นฤดูกาลแห่งแสงสว่าง มันเป็นฤดูกาลแห่งความมืด
…

(ตัดตอนมาจาก “เรื่องราวของสองเมือง”)

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

ความคิดเห็นที่ 2
โดย แจ็ค โอ'นีล

วันที่ 29 สิงหาคม 2550 เวลา 13:58 น

นั่นเป็นบทความที่ดีอีกบทความหนึ่ง!

วิดีโอและเสียง

ในสภาพแวดล้อมของเว็บ เมื่อเร็ว ๆ นี้ประเภทของข้อมูลเช่นวิดีโอและเสียงมีความเกี่ยวข้องมากขึ้น และไซต์จำนวนมากเช่น YouTube, Viddler, Revver และ MySpace ทำให้ผู้ใช้อินเทอร์เน็ตสามารถโพสต์ข้อมูลวิดีโอและเสียงทางออนไลน์ได้อย่างง่ายดาย เนื่องจากในปัจจุบันมาตรฐาน HTML ยังไม่มีวิธีการที่จำเป็นสำหรับการรวมและการจัดการเนื้อหาสื่อ ไซต์ปัจจุบันส่วนใหญ่จึงใช้เทคโนโลยี Flash เพื่อให้มีฟังก์ชันการทำงานที่จำเป็น นอกจากนี้ยังมีความเป็นไปได้ในการเปิดใช้งานมัลติมีเดียผ่านปลั๊กอิน (เช่น QuickTime, Windows Media และอื่น ๆ ) แต่ยังคงเป็นเทคโนโลยี Flash ที่ใช้กันอย่างแพร่หลายมากที่สุดและเป็นโซลูชันข้ามเบราว์เซอร์ที่ให้ API ที่จำเป็นสำหรับนักพัฒนา

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

และองค์ประกอบที่นำเสนอใหม่ทำให้งานนี้ง่ายขึ้นมาก ความสามารถของ API ที่มีอยู่ส่วนใหญ่จะเหมือนกันในทั้งสององค์ประกอบ โดยมีความแตกต่างเล็กน้อยเฉพาะกับข้อมูลที่เป็นภาพและข้อมูลที่ไม่ใช่ภาพ

ทั้งเอ็นจิ้น Opera และ WebKit ได้ใช้การสนับสนุนบางส่วนสำหรับองค์ประกอบแล้ว หากต้องการดูด้วยตัวคุณเอง คุณสามารถดาวน์โหลดและลองใช้รุ่นทดลองของ Opera และรุ่นทดสอบอัตโนมัติของ WebKit Opera แนะนำการรองรับตัวแปลงสัญญาณ Ogg Theora และ WebKit ให้การสนับสนุนทุกรูปแบบที่รองรับใน QuickTime รวมถึงตัวแปลงสัญญาณของบริษัทอื่นจำนวนหนึ่งด้วย

วิธีที่ง่ายที่สุดในการรวมวิดีโอไว้ในเอกสารคือการใช้องค์ประกอบโดยไม่ต้องตั้งค่าเพิ่มเติมใดๆ ในกรณีนี้ เบราว์เซอร์จะให้องค์ประกอบอินเทอร์เฟซผู้ใช้เริ่มต้น หากต้องการเปิดใช้งานหรือปิดใช้งานการควบคุมเนื้อหาสื่อตามค่าเริ่มต้น คุณลักษณะการควบคุมบูลีนจะใช้กับค่าต่อไปนี้:

ดาวน์โหลดหนัง

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

สถานการณ์นี้ทำได้ง่ายด้วยการรวมเนื้อหาเสียงบนเพจโดยใช้องค์ประกอบ คุณลักษณะส่วนใหญ่ที่เฉพาะเจาะจงกับองค์ประกอบจะนำไปใช้กับองค์ประกอบด้วยเช่นกัน แม้ว่าอย่างหลังจะไม่อนุญาตให้ตั้งค่า width , height หรือ poster

ดาวน์โหลดเพลง

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

ในกรณีที่การมุ่งเน้นทรัพยากรบนเว็บต้องการให้นักพัฒนาสร้างการควบคุมส่วนต่อประสานกับผู้ใช้อย่างสมบูรณ์ จากนั้นเพื่อวัตถุประสงค์เหล่านี้ เขาสามารถใช้ความสามารถของ API ขั้นสูงที่ให้วิธีการและเหตุการณ์จำนวนหนึ่งซึ่งสคริปต์สามารถใช้เพื่อควบคุมกระบวนการของ กำลังเล่นไฟล์มีเดีย ตัวแทนที่ง่ายที่สุดของความสามารถดังกล่าวคือเมธอด play() และ Pause() รวมถึงคุณสมบัติ currentTime ซึ่งออกแบบมาเพื่อตั้งค่าตำแหน่งการเล่นปัจจุบันของไฟล์มีเดียเป็นจุดเริ่มต้นหรือตำแหน่งอื่นที่ต้องการ ด้านล่างนี้เป็นตัวอย่างการใช้งาน:

var video = document.getElementById("วิดีโอ");

เล่น
หยุดชั่วคราว