HTML5 adalah salah satu bahasa markup yang digunakan untuk membuat halaman web. Dalam HTML5, terdapat 2 unsur penting yang harus dipahami yaitu Elemen dan Atribut. Kedua unsur ini sangat penting dalam menghasilkan halaman web yang menarik dan SEO-friendly.
Elemen pada HTML5 merupakan bagian penting dari tag HTML yang mengelompokkan sebuah konten atau objek pada halaman web. Elemen terdiri dari tag pembuka (<tag>) dan tag penutup (</tag>), serta konten atau objek yang berada di antara kedua tag tersebut. Contoh tag yang sering digunakan seperti <header>, <main>, <nav>, <article>, <aside>, <section>, dan <footer>. Setiap tag memiliki fungsi dan peran masing-masing dalam membentuk tampilan dan struktur halaman web.
Sementara itu, Atribut pada HTML5 digunakan untuk memberikan informasi tambahan di dalam tag. Informasi tambahan ini bisa berupa nama kelas (class), ID, style, sumber gambar (src), tautan (href), dan sebagainya. Atribut ini dapat memberikan pengaruh besar dalam optimasi mesin pencari (SEO) dan juga memudahkan pembaca dalam membaca konten pada halaman web.
Dalam rangka membangun halaman web yang menarik dan SEO-friendly, pemahaman tentang elemen dan atribut pada HTML5 sangatlah penting. Selain itu, dengan memanfaatkan elemen dan atribut secara tepat, kita dapat mempercepat waktu pemuatan halaman web dan memberikan pengalaman terbaik bagi pengguna.
Elemen dan Atribut pada HTML5
Dalam pembuatan halaman web, dua unsur penting dalam HTML yang harus dipahami adalah Elemen dan Atribut. Kedua unsur ini saling terkait dan terdapat pada setiap baris kode HTML pada halaman web. Elemen merujuk pada isi tag yang terdapat di antara tag pembuka dan penutup (<…>). Sedangkan atribut mengandung informasi tambahan di dalam tag. Untuk lebih memahami elemen dan atribut pada HTML5, mari kita lihat contoh kode HTML pada gambar di atas yang menunjukkan cara membuat paragraf. Elemen HTML dalam contoh tersebut adalah seluruh kode dari awal hingga akhir, sedangkan tag HTML adalah kode berwarna hijau yang terdiri dari tag pembuka dan penutup. Atribut HTML terdiri dari nama atribut berwarna biru dan nilai atribut berwarna merah.
Namun, tahukah kamu jenis-jenis elemen HTML lainnya? Apa itu Nested Element? Untuk mengetahui jawabannya, simak penjelasan di bawah ini.
Pengertian Elemen pada HTML
Elemen HTML adalah bagian-bagian pembangun sebuah halaman web. Setiap elemen seperti batu bata yang berguna untuk membangun struktur keseluruhan halaman. Elemen sering disebut sebagai node karena merupakan bagian dari diagram pohon HTML yang membentuk halaman web. Elemen terdiri dari tag pembuka, isi, dan tag penutup, serta dapat juga memiliki beberapa atribut.
Pada ilustrasi di atas, terdapat satu elemen <p> dengan atribut color=”red” dan berisi teks “Belajar HTML di IDCSharp”.
Elemen tidak selalu berisi teks, terkadang elemen juga dapat berisi elemen lain yang disebut nested elements. Ini merupakan salah satu fitur HTML yang powerful yang memungkinkan para pengembang untuk menciptakan halaman web yang kompleks dengan konten yang terstruktur dan terorganisir.
Jenis Elemen HTML
HTML memiliki 2 jenis elemen yang dapat dikelompokkan berdasarkan cara penulisan dan tampilan yang dihasilkan. Kedua jenis ini memiliki peran penting dalam membentuk tampilan halaman web yang menarik dan mudah dibaca. Yuk, simak penjelasannya di bawah ini!.
Jenis Elemen Berdasarkan Cara Penulisan
Elemen Normal
Menulis elemen pada HTML ada 2 cara, yang pertama adalah dengan cara penulisan normal yang dimulai dengan tag pembuka dan diakhiri dengan tag penutup seperti contoh di bawah ini.
<h1>Judul Konten</h1>Elemen Tunggal
Elemen tunggal atau void element menggunakan cara penulisan yang berbeda dibanding elemen normal. Jenis elemen ini tidak memiliki tag penutup, melainkan menggunakan tanda slash di akhir tag pembuka. Berikut adalah contohnya:
<img src="badut.jpg" />Jenis Elemen Berdasarkan Tampilan
Mari kita bahas tentang 2 jenis elemen dalam HTML yang mempengaruhi tampilan pada web browser. Pertama, kita punya block-level element yang mampu membentuk blok besar dalam struktur halaman. Kedua, ada inline element yang menempati ruang di dalam blok. Bagaimana keduanya berbeda dan seperti apa contohnya? Yuk, kita bahas lebih lanjut!
Block Level Element
block-level element dalam HTML bisa memudahkan kamu dalam memahami bagaimana tampilan web browser mengatur elemen dalam suatu halaman web. Elemen jenis ini selalu dimulai pada baris baru, dan secara default akan terletak di bawah elemen sebelumnya.
Contoh dari block-level element yang sering digunakan adalah elemen <h1> untuk membuat judul besar dan elemen <p> untuk menulis paragraf teks. Dengan cara penulisan ini, web browser dapat menampilkan tampilan yang rapi dan terstruktur pada halaman web. Berikut ini adalah contoh implementasi kode block level element pada HTML
<h1>Ini adalah judul</h1>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua</p>Dalam contoh di atas, elemen <h1> dan <p> adalah block level element. Saat di-render pada browser, setiap elemen tersebut akan dimulai pada baris baru, dan elemen <p> kedua akan berada di bawah elemen <p> pertama.
Inline Element
Inline Element atau elemen sebaris adalah jenis elemen HTML yang tidak memulai baris baru, melainkan menempati posisi sejajar dengan elemen sebelumnya. Elemen ini biasanya digunakan untuk menambahkan detail kecil pada suatu teks atau elemen block-level. Beberapa contoh inline element meliputi <a>, <img>, dan <span>.
Berikut contoh implementasi kode inline element pada HTML:
<p>Anda dapat belajar <strong>HTML</strong>, <em>CSS</em>, dan <a href="https://www.javascript.com/">JavaScript</a> di IDCSharp.</p>Pada contoh di atas, elemen <strong>, <em>, dan <a> adalah inline elements, sehingga tidak akan membuat baris baru. Isi dari masing-masing elemen tersebut akan ditampilkan dalam satu baris yang sama dengan elemen lain yang berada di sebelahnya.
Elemen Bersarang (Nested Element)
Elemen Bersarang (Nested Element) merupakan fitur kuat dari HTML yang memungkinkan pengembang web untuk membuat halaman web yang kompleks dengan konten yang terstruktur dan terorganisir dengan baik. Seperti namanya, elemen ini terdiri dari elemen lain yang terletak di dalamnya. Penting untuk menulis elemen ini dengan cara yang terstruktur dan tidak saling tumpang tindih. Berikut adalah contoh penulisan yang benar:
<div>
<h1>Header Utama</h1>
<p>Ini adalah sebuah paragraf</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>Pada contoh di atas, elemen div merupakan elemen induk atau parent element yang di dalamnya terdapat beberapa elemen anak atau nested element seperti h1, p, dan ul. Selain itu, pada elemen ul terdapat dua elemen li sebagai elemen anak atau nested element dari ul. Dengan menggunakan nested element, kita dapat membuat struktur dokumen HTML yang lebih terstruktur dan mudah dipahami oleh pengguna.
Dalam bahasa pemrograman HTML, terdapat berbagai jenis elemen yang dapat digunakan untuk membangun sebuah halaman web. Elemen dibedakan berdasarkan cara penulisan, tampilan pada browser, dan kemampuan untuk bersarang dengan elemen lain.
Elemen normal atau block-level element dimulai dengan tag pembuka dan diakhiri dengan tag penutup, dan selalu dimulai pada baris baru. Contoh elemen block-level adalah <h1>, <p>, dan <div>.
Sedangkan inline element tidak membuat baris baru dan berjalan sejajar dengan elemen lain yang termasuk inline element. Contoh inline element adalah <span>, <a>, dan <img>.
Terakhir, nested element merupakan elemen yang di dalamnya terdapat elemen lain. Penulisan elemen ini harus terstruktur dan tidak boleh tumpang tindih. Contoh penulisan yang benar adalah <div><p><span>Contoh Text</span></p></div>.
Dengan memahami jenis-jenis elemen HTML, kita dapat membangun halaman web dengan lebih terstruktur, terorganisir, dan mudah dibaca oleh browser dan mesin pencari.
