Apa saja elemen dalam html?

Blog » 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!

Daftar Isi Konten:

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?

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.

Baca Juga :  Memahami Pengertian Code: Apa itu Coding dan Source Code? Tujuan, Fungsi, Cara Kerja, Jenis dan Macam serta Contohnya!

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

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

  1 sampai

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

  2.
• Bockquote element seperti

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

  3.
• Lists (daftar) seperti ordered list atau daftar yang diurutkan yaitu

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

  4, dan masing-masing daftar itemnya seperti

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

  5.
• Document division element yaitu

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

  6.

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

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

  7.
• Emphasis element seperti

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

  8.
• Citation element yaitu

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

  9.
• Quote element adalah seperti

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

  0.
• Span element yaitu

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

  1.

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 

<body>

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

</body>

Benar, mereka dimulai dengan tag 

<body>

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

</body>

<body>

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

</body>

Kemudian, di dalam elemen

<body>

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

</body>

<body>

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

</body>

<body>

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

</body>

Elemen

<body>

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

</body>

<body>

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

</body>

<body>

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

</body>

Seperti contoh penulisan kode HTML di atas, lalu di dalam elemen 

<body>

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

</body>

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

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

Elemen

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

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

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

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

Baca Juga :  Begini Cara Edit File APK di PC, Desktop, Komputer Windows 10, 8.1, 8 dan 7!

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 

<html>
<body>

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

</body>
</html>

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

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

Mengapa? Tentu saja karena disini 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, dimana 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

<html>
<body>

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

</body>
</html>

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

Baca Juga :  Mengenal Pengertian API: Fungsi, Jenis, Cara Kerja, Menggunakan serta Kelebihan dan Kekurangannya!

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 disini, 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, dimana 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 disini bermanfaat dan dapat manambah wawasan Kita semua terutama dalam mengetahui istilah-istilah teknologi.

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

Bagikan Sekarang Ke

• Klik untuk berbagi di WhatsApp(Membuka di jendela yang baru)
• Klik untuk membagikan di Facebook(Membuka di jendela yang baru)
• Klik untuk berbagi di Telegram(Membuka di jendela yang baru)
• Klik untuk berbagi pada Twitter(Membuka di jendela yang baru)
• Klik untuk berbagi via Pocket(Membuka di jendela yang baru)

• Klik untuk berbagi pada Tumblr(Membuka di jendela yang baru)
• Klik untuk berbagi pada Pinterest(Membuka di jendela yang baru)
• Klik untuk berbagi di Linkedln(Membuka di jendela yang baru)
• Klik untuk berbagi pada Reddit(Membuka di jendela yang baru)
• Klik untuk berbagi di Skype(Membuka di jendela yang baru)

• Tag
• Apa
• Code
• Contoh
• Development
• Front End
• HTML
• Jenis
• Pengertian
• Perbedaan
• Website

Sukai postingan ini:

Sitasi artikel ini:

APAMLAHarvardVancouverChicagoIEEEStandar

Rifqi Mulyawan (26 Januari 2023) Memahami Pengertian HTML Element: Apa itu Elemen HTML? Jenis-Jenis, Contoh dan Perbedaannya dengan Tag!. Diambil dari https://rifqimulyawan.com/blog/pengertian-html-element/.

"Memahami Pengertian HTML Element: Apa itu Elemen HTML? Jenis-Jenis, Contoh dan Perbedaannya dengan Tag!." Sumber: Rifqi Mulyawan. Selengkapnya dapat dilihat di https://rifqimulyawan.com/blog/pengertian-html-element/.

Apa saja elemen di HTML?

Apa itu elemen dalam coding?

Apa itu elemen bersarang dalam HTML?

Apakah elemen dalam HTML yang digunakan untuk membuat link?