HTML5 ialah peningkatan baharu daripada versi HTML 4.01 yang mempunyai banyak ciri baharu, ciri fungsi lanjutan, paparan halaman yang lebih baik dan banyak peningkatan lain untuk memadankan keperluan teknologi yang semakin meningkat. Unsur HTML5 yang paling banyak digunakan dan dikehendaki ialah
HTML5 menyediakan elemen baharu untuk mempertingkatkan reka letak dokumen.
Contoh:
<!DOCTYPE html> <html> <head> <title>Article Element</title> </head> <body> <article> <h2>EDUCBA</h2> <p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> </article> </body> </html>
Output:
Contoh:
<!DOCTYPE html> <html> <head> <title>Figure Element</title> </head> <body> <p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> <figure> <img src="educba.png"/> </figure> </body> </html>
Output:
Kod di atas akan menghasilkan output seperti yang ditunjukkan dalam imej di bawah,
Contoh:
<!DOCTYPE html> <html> <head> <title>Figure Caption Element</title> </head> <body> <p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> <figure> <img src="educba.png"/> <figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption> </figure> </body> </html>
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
Contoh:
<!DOCTYPE html> <html> <head> <title>Header Element</title> </head> <body> <article> <header> <h1>Header One</h1> <h2>Header Two</h2> <h3>Header Three</h3> </header> <p>The content of the document goes here...</p> </article> </body> </html>
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
Contoh:
<!DOCTYPE html> <html> <head> <title>Footer Element</title> </head> <body> <footer> <p>Copyright © 2019 www.educba.com</p> <p>Contact: <a href="mailto:[email protected]">[email protected]</a> </footer> </body> </html>
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
Contoh:
<!DOCTYPE html> <html> <head> <title>Main Element</title> </head> <body> <header> <p>Header information</> </header> <main> <p>Main Information</p> <article> <h2>EDUCBA</h2> <p>EDUCBA is a leading global provider of skill based education...</p> </article> </main> <footer> <p>Footer Information</> </footer> </body> </html>
Output:
Kod di atas akan menghasilkan output seperti yang ditunjukkan dalam imej di bawah,
Contoh:
<!DOCTYPE html> <html> <head> <title>Mark Element</title> </head> <body> <article> <p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> </article> </body> </html>
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
Contoh:
<!DOCTYPE html> <html> <head> <title>Nav Element</title> </head> <body> <header> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JAVA</a> | <a href="#">PHP</a> | <a href="#">PYTHON</a> </nav> </header> </body> </html>
Output:
Kod di atas akan menghasilkan output seperti yang ditunjukkan dalam imej di bawah,
Contoh:
<!DOCTYPE html> <html> <head> <title>Section Element</title> </head> <body> <article> <h2> Main Article </h2> <p>Content of the main header will be displayed here...</p> <section> <h2>Section One</h2> <p>Content of the first section will be displayed...</p> </section> <section> <h2>Section Two</h2> <p>Content of the second section will be displayed...</p> </section> </article> </body> </html>
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
The tag which provides the text that can be displayed or hidden when the user clicks the heading.
Example:
<!DOCTYPE html> <html> <head> <title>Summary Element</title> </head> <body> <details> <summary> EDUCBA - Corporate Bridge Consultancy Pvt Ltd </summary> <p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p> </details> </body> </html>
Output:
When you run the above code, it will display the result as shown below,
As shown in the image, click on the heading, and it will display the hidden text shown below the image,
So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.
Atas ialah kandungan terperinci Html5 Elemen Baharu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
