Keterampilan Khusus  

Berbagai Jenis Tag HTML beserta Cara Kerjanya dalam Development

Berbagai Jenis Tag HTML beserta Cara Kerjanya dalam Development

Tahukah kamu bahwa setiap kali mengunjungi halaman web, kamu sedang berinteraksi dengan HTML, lho? Yup, sebab HTML memang menjadi bahasa markup yang sering digunakan dalam pembuatan halaman web serta aplikasi web yang berjalan di browser, seperti Chrome, Firefox, dan Internet Explorer.

 

HTML akan menginstruksikan browser untuk menampilkan konten dari sebuah halaman web melalui kode dan tag-tag HTML terkait. Oleh karena itu, tag HTML juga menjadi bagian yang tak boleh dilupakan dalam setiap pengembangan halaman website oleh Web Developer, khususnya seorang Front-End Developer.

 

Lantas, apa sebenarnya tag HTML itu? Bagaimana cara kerja, jenis, dan fungsinya di halaman web? Daripada penasaran, yuk, langsung simak informasinya berikut ini!

 

Apa itu Tag HTML?

Melansir dari Semrush, tag HTML adalah petunjuk sederhana atau kata kunci di halaman web yang menentukan bagaimana browser web harus memformat dan menampilkan halaman web yang kamu buka.

 

Hampir semua tag HTML terdiri dari 2 bagian, yakni tag pembuka dan tag penutup. Sebagai contoh, <tagname> ialah tag pembuka dan </tagname> ialah tag penutup. Pembedanya, ada pada tag penutup yang memiliki tambahan garis miring (/) di depan tag name. 

 

Pada HTML, di antara tag pembuka dan tag penutup umumnya akan terdapat konten yang berisi sebuah instruksi yang ingin ditampilkan pada halaman web. Adapun jika dituliskan, struktur dasar dari tag HTML akan menjadi <tagname> Content … </tagname>.

 

Namun demikian, beberapa tag HTML ada yang tidak memerlukan tag penutup karena tidak mengandung konten yang harus diakhiri. Tag yang tidak ditutup ini biasanya digunakan untuk metadata atau elemen yang mempengaruhi tata letak, seperti garis pemisah.

 

Fungsi Tag HTML

 

fungsi tag html

Sumber: Freepik

 

Sebagai bagian dari elemen HTML, tag HTML berfungsi untuk membantu browser web mengonversi atau menafsirkan dokumen HTML menjadi halaman web yang menampilkan konten dengan tepat dan fungsional.

 

Secara lebih rinci, tag HTML berfungsi dalam menyusun struktur, format, dan tampilan halaman web. Dengan menggunakan tag HTML ini, Developer dapat lebih mudah mengatur bagaimana teks, gambar, bahkan elemen interaktif dan media ditampilkan ke dalam halaman web.

 

Lebih jauh lagi, tag HTML juga berfungsi untuk meningkatkan Search Engine Optimization (SEO). Tag seperti title tag, meta description tag, heading, hingga canonical tag membantu mesin pencari memahami isi dan struktur halaman web. Dengan begitu, halaman web dapat lebih mudah ditemukan di hasil pencarian.

 

Bagaimana Cara Kerja Tag HTML dalam Halaman Web?

Tag HTML bekerja dengan menyusun struktur halaman web dan memberitahu browser bagaimana menampilkan konten. Ketika halaman web diakses, browser akan membaca HTML yang berisi tag dan membuat Document Object Model (DOM) sebagai representasi struktur halaman dengan tag sebagai elemennya.

 

Setelah DOM terbentuk, browser mengubah tag HTML menjadi tampilan visual di layar, bisa berupa teks, gambar, dan elemen lainnya. Browser juga akan membutuhkan CSS untuk mengatur gaya dan JavaScript untuk menambah interaktivitasnya, sehingga halaman web pun tampil sesuai dengan desain serta fungsinya.

 

 

Baca juga:

 

7 Jenis Tag HTML dan Fungsinya

Meski secara umum tag HTML berfungsi dalam membantu browser menafsirkan dokumen HTML hingga dapat menampilkan konten halaman web, sebenarnya tag HTML memiliki beragam fungsi lain tergantung pada jenisnya. Berikut beberapa jenis tag HTML dan fungsinya tersebut.

Tag HTML Dasar

Tag HTML dasar ialah tag yang digunakan untuk membangun struktur dan format awal halaman website. Berikut contohnya.

  • <html> : untuk menggambarkan keseluruhan dokumen HTML

  • <head> : berisi semua informasi meta dokumen, seperti judul halaman <title> dan meta deskripsi <meta>

  • <body> : berisi semua konten yang akan ditampilkan

  • <p> : untuk mendefinisikan paragraf pada halaman web

  • <br> : untuk menambahkan baris baru dalam teks

  • <hr> : untuk menambahkan garis pemisah horizontal

  • <h1> - <h6> : untuk membuat judul dokumen HTML, dimana h1 sebagai judul tertinggi hingga h6 sebagai judul terkecil

Tag HTML Format

Tag HTML format ialah tag yang digunakan untuk mengatur tampilan teks dan elemen lain di halaman web. Berikut contohnya.

  • <em> : untuk menekankan teks tertentu dalam suatu paragraf, biasanya ditampilkan miring

  • <b> : untuk menebalkan teks

  • <i> : untuk membuat teks miring tanpa makna tambahan atau penekanan

  • <u> : untuk mengatur garis bawah teks

  • <s> : untuk menandai teks yang perlu ditampilkan dengan garis tengah atau tercoret

  • <sub> : untuk membuat teks lebih rendah dari baris teks normal

  • <sup> : untuk membuat teks lebih tinggi dari baris teks normal

Tag HTML Link

 

tag html dan fungsinya

 

Sumber: Freepik

 

Tag HTML link ialah tag yang digunakan untuk menghubungkan satu halaman ke halaman lain, baik di situs yang sama maupun di situs web lainnya. Umumnya akan menggunakan tag <a>, namun dengan beberapa atribut berikut ini.

  • href : untuk menunjukkan link tujuan ketika diklik

  • target : untuk menentukan dimana halaman web yang ditautkan akan dibuka

  • rel : untuk menentukan hubungan antara halaman yang ditautkan dan halaman saat ini

Tag HTML List

Sesuai namanya, tag HTML list ialah tag yang digunakan untuk membuat daftar konten dalam urutan tertentu. Berikut contohnya.

  • <ol> : untuk membuat daftar yang berurutan dengan nomor

  • <ul> : untuk membuat daftar tidak berurutan, yakni dengan bullet points atau simbol

  • <dl> : untuk membuat daftar definisi yang terdiri dari istilah dan definisinya 

Tag HTML Media

Tag HTML media ialah tag HTML yang digunakan untuk menampilkan konten multimedia ke dalam halaman web. Berikut contohnya.

  • <img> : untuk menyisipkan gambar ke dalam halaman web, bisa dengan tambahan atribut src dan alt

  • <audio> : untuk menyisipkan file audio yang dapat diputar di halaman web

  • <video> : untuk menyisipkan file video yang dapat diputar di halaman web

Tag HTML Table

Tag HTML table ialah tag HTML yang digunakan untuk membuat tabel dalam dokumen HTML. Berikut contohnya.

  • <table> : untuk mendefinisikan keseluruhan tabel

  • <tr> : untuk membuat baris dalam tabel

  • <td> : untuk mendefinisikan sel data dalam baris tabel 

  • <col> : untuk membuat gaya pada satu kolom dalam tabel

  • <thead> : untuk membantu dalam mengatur informasi header tabel

  • <tfoot> : untuk menampilkan informasi tambahan di bagian bawah tabel atau footer

Tag HTML Form & Input

Tag HTML form dan input ialah tag yang digunakan untuk membuat formulir interaktif di halaman web, sehingga memungkinkan pengguna mengisi data yang kemudian bisa dikirim ke web server. Berikut contohnya.

  • <form> : untuk mendefinisikan keseluruhan formulir di halaman web

  • <input> : untuk menyediakan berbagai jenis elemen input seperti teks, tombol, dan checkbox dengan tambahan atribut type

  • <textarea> : untuk membuat area teks yang lebih besar, seperti untuk komentar atau pesan lainnya

  • <label> : untuk memberikan label atau deskripsi, sehingga meningkatkan aksesibilitas dan membantu pengguna memahami tujuan elemen input

  • <select> : untuk menyediakan menu dropdown 

  • <button> : untuk membuat tombol yang bisa diklik pengguna, contohnya untuk mengirim form

 

#BelajarLebihMudah Untuk Menguasai HTML di Kelas.com

So, itulah informasi singkat mengenai tag HTML, mulai dari fungsi, cara kerja, hingga jenisnya. Jika kamu ingin bekerja sebagai Web Developer atau Front-End Developer, kamu tentu harus memahami dan menguasai bahasa markup HTML ini secara detail.

 

Atau, jika kamu baru ingin mempelajarinya, kamu juga bisa mengikuti Kelas Online Menguasai HTML Untuk Menjadi Front-End Developer dengan mudah di Kelas.com. Nantinya, kamu bisa belajar untuk mendalami tentang HTML, pembuatan website yang responsif, hingga proses deployment static website.

 

Bahkan, kamu juga akan mendapatkan tips maupun persiapan karier sebagai Front-End Developer dari mentor profesional yang berpengalaman dan ahli di bidangnya, lho. Menarik banget, kan?

 

Jadi, nggak perlu ragu lagi, yuk, daftar kelasnya sekarang di Kelas.com!

 

Bootcamp

UI & UX Design

Rp2.499.000

11 Jam Materi

Rp.489.000

Akses Seumur Hidup

Bagikan Artikel ini: