ROADMAP 7 HARI BELAJAR BARENG MENGENAL HTML - HARI KE - 5

 

HTML5: Evolusi Web Development Menuju Fitur yang Lebih Canggih

HTML5 adalah revisi terbaru dari bahasa markup utama yang digunakan untuk mengembangkan halaman web. Dalam artikel ini, kita akan melihat beberapa fitur utama HTML5 dan bagaimana ini telah mengubah cara web development dilakukan.

Bagian Utama:

1. Struktur Dasar HTML5

HTML5 menghadirkan beberapa elemen struktural baru yang membantu menggambarkan konten halaman web dengan lebih baik dan semantik. Salah satunya adalah elemen <header>, <nav>, <section>, <article>, dan <footer>.

Contoh penggunaan elemen HTML5 dalam kode:

html

<header>
    <h1>Contoh Halaman HTML5</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Tentang Kami</a></li>
        <li><a href="#">Kontak</a></li>
    </ul>
</nav>

<section>
    <h2>Artikel Utama</h2>
    <p>Ini adalah artikel utama dalam halaman HTML5 kami.</p>
</section>

<footer>
    <p>Hak Cipta &copy; 2023 Nama Perusahaan</p>
</footer>

2. Audio dan Video HTML5

HTML5 juga memperkenalkan elemen <audio> dan <video> yang memungkinkan Anda menyisipkan audio dan video langsung ke dalam halaman web tanpa memerlukan plug-in tambahan. Anda dapat mengendalikan pemutaran dan tampilan dengan mudah menggunakan atribut-atribut seperti controls.

Contoh penggunaan elemen audio dan video dalam kode:

html

<audio controls>
    <source src="musik.mp3" type="audio/mpeg">
    Browser Anda tidak mendukung audio.
</audio>

<video controls>
    <source src="video.mp4" type="video/mp4">
    Browser Anda tidak mendukung video.
</video>

3. Formulir HTML5

HTML5 membawa perbaikan besar dalam elemen formulir. Anda dapat menggunakan tipe input seperti email, number, date, dan tel, yang memungkinkan browser memberikan validasi dan antarmuka yang lebih baik.

Contoh penggunaan input tipe email dan number dalam formulir:

html

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="usia">Usia:</label>
<input type="number" id="usia" name="usia" min="18" max="100">

Penutup:

HTML5 adalah langkah besar dalam evolusi pengembangan web. Dengan struktur yang lebih semantik, audio, video, dan perbaikan formulir, kita memiliki alat yang lebih baik untuk menciptakan pengalaman web yang kaya dan interaktif. Pemahaman fitur-fitur HTML5 adalah kunci untuk mengembangkan situs web yang modern dan responsif.

Semoga artikel ini membantu Anda memahami pentingnya HTML5 dalam pengembangan web.