Teknologi

Memahami Pengertian HTML Element: Apa itu Elemen HTML? Jenis-Jenis, Contoh dan Perbedaannya dengan Tag!

Tahukah Kalian, Pengertian HTML Element? Apa itu Elemen HTML? Jenis dan Contoh serta Perbedaannya dengan Tag?

Oke, khusus bagi kalian-kalian yang baru saja mengenal dunia front-end development atau pengembangan web, kalian pasti akan berhadapan dengan kata ini.

Ya, elemen HTML atau Hypertext Markup Language merupakan unit dasar HTML.

Mereka terdiri dari tag yang mengelilingi berbagai jenis konten.

Web browser tidak menampilkan tag HTML, tetapi menggunakannya untuk menafsirkan konten halaman.

Ini seperti komponen individual dari dokumen atau halaman website.

HTML terdiri dari pohon node HTML, seperti node teks. Setiap node dapat memiliki atribut yang ditentukan.

Node tersebut juga dapat memiliki konten, termasuk node dan teks lainnya.

Banyak simpul HTML mewakili semantik, atau maknanya.

Sebagai contoh, simpul <title> yang mewakili judul dokumen.

Terkait hal itu, dalam postingan ini, Kami akan membahas secara lebih detail dan lengkap tentang apa itu pengertian HTML element.

Oke baiklah, berikut ini adalah ulasannya!

Pengertian HTML Element

Elemen atau HTML element adalah blok pembangun dasar HTML yang didefinisikan oleh tag awal (pembuka), beberapa konten, dan tag akhir (penutup) berdasarkan simpulan Kami yang mengacu pada sumber Situs W3Schools.

HTML element ini biasanya terdiri dari 2 (dua) buah tag yaitu tag pembuka dan tag penutup.

Untuk praktiknya sendiri, jika Anda menulis tag pembuka yang memulai elemen, maka untuk mengakhiri elemen itu, Anda harus menuliskan tag penutup yang sesuai, misalnya seperti <p> dengan </p> sebagai tag penutupnya.

Apa itu Elemen HTML?

Ilustrasi Gambar Apa Itu Elemen Atau HTML Element Dan Jenis Jenisnya

Jadi, apa itu sebenarnya yang dimaksud dengan elemen HTML ini?

Menurut spesifikasi HTML dari W3C, elemen atau HTML element adalah blok bangunan dasar HTML dan biasanya terdiri dari 2 (dua) tag, yaitu tag pembuka dan tag penutup.

Hampir semua elemen HTML memiliki tag pembuka dan tag penutup. Tag ini mengelilingi teks yang akan ditampilkan pada halaman web.

Sebagai contoh misalnya, untuk menulis paragraf teks, Anda menulis teks untuk ditampilkan pada halaman dan kemudian mengelilinginya dengan tag berikut ini:

<p>Ini adalah contoh penulisan paragraf</p>

Beberapa elemen HTML tidak memiliki tag penutup, mereka disebut empty element (elemen kosong). Kadang-kadang, mereka juga disebut sebagai elemen singleton atau void.

Elemen kosong ini mudah digunakan karena Anda hanya perlu memasukkan satu tag di halaman web Anda dan browser akan tahu apa yang harus dilakukan.

Sebagai contoh misalnya, untuk menambahkan satu jeda baris atau garis baru ke halaman Anda, gunakan tag <br>.

Elemen umum lainnya yang hanya mencakup tag pembuka adalah elemen gambar, misalnya seperti kode di bawah ini:

<img src="gambar/logo-saya.png">

Dokumen HTML terdiri dari pohon elemen-elemen dan mereka menentukan bagaimana dokumen HTML harus dibangun, serta jenis konten apa yang harus ditempatkan di bagian mana dari dokumen HTML.

Jenis-Jenis HTML Element

Setelah kita mengetahui apa arti dari elemen atau HTML element di atas, maka kita juga harus mengetahui apa saja jenis dan macamnya.

Oke, agar lebih jelas dan mudah dipahami, jenis-jenisnya secara rinci akan Kami jelaskan di bawah ini.

a. Block Level Element

Yang pertama adalah jenis element atau HTML elemen tingkat blok atau block level element.

Jenis ini biasanya akan mengambil lebar penuh elemen yang mengandungnya dan berakhir serta dimulai dengan baris baru.

Elemen level blok dapat berisi data (konten), elemen level blok lainnya, dan elemen inline lainnya.

Adapun contoh dari macam-macam elemen tingkat blok atau block level element adalah meliputi:

  • Paragraph element seperti <p>.
  • Heading elements yaitu dari <h1> sampai <h6>.
  • Bockquote element seperti <blockquote>.
  • Lists (daftar) seperti ordered list atau daftar yang diurutkan yaitu<ol>, dan masing-masing daftar itemnya seperti <li>.
  • Document division element yaitu <div>.

b. Inline Element

Jenis berikutnya adalah element atau HTML elemen sebaris atau inline element.

Berbeda dengan elemen blok, yang mengalir secara vertikal, elemen inline mengalir secara horizontal hingga mencapai ujung blok yang mengandungnya, baru kemudian mereka membungkus ke baris berikutnya.

Elemen sebaris mungkin hanya berisi data dan elemen sebaris lainnya.

Adapun contoh dari macam-macam elemen sebaris atau inline element adalah meliputi:

  • Abbreviation element seperti <abbr>.
  • Emphasis element seperti <em>.
  • Citation element yaitu <cite>.
  • Quote element adalah seperti <q>.
  • Span element yaitu <span>.

Contoh HTML Element

Agar kita lebih memahami apa yang dimaksud dengan elemen atau HTML element ini, adalah merupakan hal yang penting bagi kita untuk juga mengetahui bagaimana contohnya terutama terkait dalam cara penggunaannya.

Baiklah, untuk contohnya akan Kami jelaskan di bawah ini, namun sebelumnya, perlu kalian garis bawahi bahwa elemen <html> akan dari semua elemen dan itu akan mendefinisikan tentang sebuah dokumen HTML.

Benar, mereka dimulai dengan tag <html> dan diakhiri dengan tag </html>.

Kemudian, di dalam elemen <html> terdapat elemen <body> yang menampilkan isi dari semua halaman:

<body>

<h1>Ini adalah judul tingkat 1</h1>
<p>Ini adalah paragraf.</p>

</body>

Elemen <body> di atas, akan menampilkan bagian body (tubuh), mereka dimulai dengan tag <body> dan diakhiri dengan tag </body>.

Seperti contoh penulisan kode HTML di atas, lalu di dalam elemen <body> terdapat 2 (dua) elemen yaitu adalah <h1> dan <p>:

<h1>Ini adalah judul tingkat 1</h1>
<p>Ini adalah paragraf.</p>

Elemen <h1> di atas menjelaskan tentang tingkatan judul, mereka dimulai dengan tag <h1> dan diakhiri dengan tag penutup </h1>.

Selanjutnya, elemen <p> di atas, adalah element yang mendefinisiakan tentang sebuah paragraf, mereka dimulai dengan tag <p> dan </p> sebagai tag penutupnya.

Note: Ingat, jangan pernah skip atau melewati dan melupakan tag akhir (penutup)!

Ya! Benar sekali, beberapa elemen HTML akan (tetap) ditampilkan dengan benar, bahkan jika Anda lupa menuliskan tag penutup akhirnya, seperti contoh di bawah ini:

<html>
<body>

<h1>Ini adalah judul tingkat 1
<p>Ini adalah paragraf.

</body>
</html>

Jikapun Anda tahu bahwa Anda tidak memasukkannya, saran Kami pribadi adalah jangan pernah mengandalkan ini! Karena hasil dan kesalahan yang tidak terduga dapat terjadi pada browser jika Anda lupa memasukkan closing atau tag pentup (akhir)!

Selain itu, elemen atau HTML element yang tidak mempunyai konten (sisi) di dalamnya disebut dengan skeleton, void atau empty elements.

Contoh tag <br> mendefinisikan sebuah garis baru, yang merupakan empty element tanpa tag penutupnya:

<p>Ini adalah <br> paragraf yang dengan garis baru</p>

Juga, perlu kalian ketahui bahwa tag HTML dalam elemen atau HTML element bukanlah “case sensitive”, yang artinya tag <P> dengan huruf besar adalah berarti sama dengan tag <p> dengan huruf kecil.

Walaupun standar HTML tidak memerlukan tag dengan huruf kecil, tetapi W3C tetap merekomendasikan huruf kecil dalam HTML, dan menuntut huruf kecil untuk tipe dokumen yang lebih ketat seperti XHTML.

Perbedaan HTML Element dengan Tag

Ilustrasi Gambar Perbedaan Elemen Atau HTML Elemen Dengan Tag Dalam Membahas Pengertian Dan Artinya

Lalu apa perbedaan antara elemen atau HTML element dan tag? Jika kalian yang sedang membaca tulisan Kami di sini dan kebetulan bingung terkait apa yang membedakan mereka, maka dapat Kami katakan bahwa kalian berada di tempat yang tepat!

Mengapa? Tentu saja karena di sini Kami akan menjelaskan tentang perbedaan elemen atau HTML element dengan tag secara lebih rinci.

Mengacu pada pengertian HTML Element (elemen) di atas, “element” dan “tag” ini seringkali merupakan istilah yang sangat membingungkan.

Definisi dari Wikipedia di atas menjelaskan bahwa dokumen HTML berisi tag, tetapi tidak mengandung elemen.

Elemen-elemen tersebut hanya dihasilkan setelah langkah parsing dari tag ini, di mana mereka didefinisikan oleh tag awal dan penutup.

Jika elemen berisi konten lain, dan berakhir dengan tag penutup, misalnya seperti <p> adalah tag awal paragraf dan </p> adalah tag penutup paragraf yang sama, tetapi <p> Ini adalah paragraf </p> adalah elemen “p” yang berarti sebuah paragraf.

Ingat! Tag hanya digunakan untuk menandai awal dan akhir elemen atau HTML element.

Secara teknis, elemen HTML adalah kumpulan tag awal, atribut, tag akhir dan semua yang ada di antaranya.

Di sisi lain, tag HTML (baik membuka atau menutup) digunakan untuk menandai awal atau akhir suatu elemen, seperti yang Anda lihat pada ilustrasi di atas.

Namun, dalam penggunaan umum, istilah elemen HTML dan tag HTML dapat dipertukarkan yaitu seperti menjelaskan tag adalah elemen adalah tag.

Demi kesederhanaan penjelasan situs web belajar teknologi dan informasi di sini, istilah “tag” dan “elemen” akan Kami gunakan untuk maksud yang sama, karena pada dasarnya itu akan menentukan sesuatu di halaman web Anda.

Kesimpulan

Baiklah, Kami rasa sudah cukup untuk sekarang.

Jadi berdasarkan penjelasan dan pembahasan Pengertian HTML Element? Apa itu Elemen HTML? Jenis dan Contoh serta Perbedaannya dengan Tag di atas, dapat kita simpulkan bahwa pengertian ketika mengacu pada Hypertext Markup Language, elemen atau HTML element adakah kode terdiri dari serangkaian karakter antara tanda kurung siku, sering disebut sebagai tag, di mana tag yang dituliskan dengan lengkap, termasuk tag pembuka, isi serta konten tag terlampir, dan tag penutup, adalah elemen HTML.

Tidak semua elemen dalam HTML perlu memiliki tag awal (pembuka) dan tag akhir (penutup), beberapa elemen tidak memiliki konten dan tag akhir elemen tersebut dikenal sebagai skeleton, void dan empty elements.

Selain itu, perlu kalian ketahui juga bahwa elemen-elemen ini juga disebut sebagai unpaired tag (tag yang tidak berpasangan).

Penutup

Demikianlah ulasan yang dapat Kami bagikan dalam postingan yang membahas tentang Pengertian HTML Element? Apa itu Elemen HTML? Jenis dan Contoh serta Perbedaannya dengan Tag kali ini.

Semoga apa yang dapat Kami sampaikan dan bagikan di sini bermanfaat dan dapat manambah wawasan Kita semua terutama dalam mengetahui istilah-istilah teknologi.

Silahkan share artikel atau tulisan Kami di sini, jika kalian rasa ini bisa bermanfaat untuk teman-teman dan kerabat kalian serta rekan belajar kalian. Sekian dari Saya, Terima Kasih.

Postingan ini juga tersedia dalam versi:


Lihat Juga

rifqimulyawan.com menggunakan cookies untuk meningkatkan kebergunaan pengguna.