Tag HTML: Kumpulan Contoh dan Fungsinya

Di awal perkembangannya, hanya HTML cuma punya 18 tag. Namun, sekarang sudah ada sekitar 250 tag HTML. Banyak banget, ya.

Terus, apa harus hafal semua tag? Tenang, Sob. Kamu tidak harus menghafal semua tag yang ada.

Meskipun begitu, ada beberapa tag yang sebaiknya kamu hafalkan saat belajar HTML. Yuk, simak apa saja.

Sekilas tentang Tag HTML

Mengutip dari Semrush Blog, tag HTML adalah instruksi sederhana yang berfungsi memberitahukan web browser mengenai format teks.

Tag sendiri merupakan penanda awalan dan akhiran suatu elemen di HTML. Penulisan tag dilakukan menggunakan kurung sudut (< … >). Kemudian, pada bagian dalamnya terdapat nama tag dan atribut.

Sebagai bagian dari elemen HTML, tag HTML membantu browser untuk mengkonversi dokumen HTML ke halaman web.

HTML memegang peran penting sebagai penentu struktur website. Biasanya, pengembang web menggunakan HTML bersamaan dengan teknologi lain seperti CSS dan JavaScript supaya web tampil bagus dan interaktif.

Jadi, HTML bisa diibaratkan sebagai rangka dari suatu website. Sementara CSS berfungsi sebagai interior dan eksterior. Di samping itu, ada JavaScript yang berperan menambahkan berbagai fungsi pendukung.

Oleh karena itu, mengenali berbagai tag HTML umum termasuk langkah penting bagi kamu yang sedang mempelajari cara menerapkan kode HTML.

Contoh Tag HTML

Sebelum membahas contoh-contohnya, perlu diperhatikan bahwa tag HTML itu beda dari elemen, ya, Sob.

Di awal sudah disinggung bahwa tag merupakan penanda awalan dan akhiran elemen HTML. Sedangkan HTML terdiri dari elemen yang isinya meliputi tag pembuka, karakter, konten, dan tag penutup.

Beberapa elemen bersifat kosong, artinya tidak memiliki tag penutup. Namun, elemen kosong memiliki sumber konten yang perlu kamu sisipkan ke dalam halaman. Nah, mari langsung saja kita simak kumpulan tag HTML lengkap dengan fungsinya:

1. Tag Dasar HTML

Jenis tag dasar termasuk fundamental dalam pengembangan web. Jadi, kamu wajib menghafalkannya, ya, Sob. Berikut daftar tag dasar HTML dan fungsinya:

<!DOCTYPE> berfungsi untuk mendefinisikan jenis dokumen.
<html> berfungsi sebagai tag pembuka dalam membuat dokumen HTML.
<head> memuat informasi meta tentang dokumen, seperti judul.
<title> berfungsi untuk menetapkan judul dari halaman web.
<body> mendefinisikan body atau isi dari halaman web dan berisikan seluruh konten yang ditampilkan halaman web.
<h1> sampai <h6> merupakan jenis tag heading yang berfungsi untuk membuat heading pada halaman.
<p> berfungsi untuk mendefinisikan paragraf.
<br> berfungsi untuk menetapkan line break (jeda baris dalam teks).
<hr> berfungsi untuk membuat garis horizontal pada halaman, biasanya untuk memisahkan konten.
<!–…–> merupakan HTML comment tag yang berfungsi untuk menuliskan komentar pada dokumen HTML.

2. Tag Formatting

Jenis tag ini memungkinkan kamu untuk bisa mengatur format teks tanpa menggunakan CSS. Jadi, dengan tag formatting kamu bisa mengatur tampilan teks dan berbagai konten lain pada halaman web.

Berikut contoh dari tag formatting yang umum digunakan:

<b> berfungsi untuk membuat teks bold (tebal).
<strong> dipakai untuk mendefinisikan teks penting yang memerlukan penekanan.
<i> fungsinya untuk membuat teks italic (miring).
<em> berfungsi untuk memberikan penekanan pada teks. Biasanya, menghasilkan teks italic seperti tag i.
<u> berfungsi untuk menggaris bawahi teks.
<sup> berfungsi untuk membuat teks sebagai superscript (di atas garis dasar).
<sub> berfungsi untuk membuat teks sebagai subscript (di bawah garis dasar).
<pre> mendefinisikan teks pre-formatted, menghasilkan teks dengan tampilan font monospace.
<small> berfungsi untuk membuat teks yang lebih kecil.
<abbr> mendefinisikan suatu singkatan dengan menyediakan atribut ‘title’ yang menjelaskan kepanjangan dari singkatan tersebut.
<blockquote> berfungsi untuk menampilkan kutipan panjang dari sumber lain, biasanya beserta indentasi.
<q> fungsinya untuk membuat kutipan pendek teks.
<kbd> berfungsi untuk menampilkan input keyboard.
<mark> fungsi tag HTML adalah untuk membuat highlight pada teks tertentu.
<ins> mendefinisikan kata yang telah disisipkan ke dalam dokumen. Tag ini akan menampilkan kata tersebut dengan garis bawah.
<del> fungsinya untuk menampilkan teks yang sudah dihapus dari halaman web
<code> tag ini menampilkan teks sebagai kode komputer.
<cite> berfungsi untuk menandai judul suatu karya, seperti buku atau jurnal.

Cek Konten Lainnya:

Pengertian SQL Injection, Cara Kerja, Contoh & Cara Mengatasi

3. HTML Image Tag

Penggunaan tag HTMl ini khusus untuk menyisipkan dan mengatur tampilan gambar. Berikut beberapa contohnya:

<img> berfungsi untuk menyisipkan gambar pada halaman.
<figure> mendefinisikan kontainer yang dimuat sendiri untuk gambar, diagram, dan sebagainya.
<figcaption> untuk membuat caption untuk tag figure.
<picture> menampilkan gambar yang berbeda dari sumber yang berbeda.
<map> untuk mendefinisikan gambar peta.

Tag HTML untuk gambar merupakan tag kosong yang tidak memiliki tag penutup. Biasanya, tag ini digunakan bersama atribut seperti:

‘src’: atribut ini menampilkan URL dari gambar. Contoh penggunaannya: <img src=”https://jagoanhosting.com/gambarkomputer.jpg”>
‘alt’: atribut ini menampilkan teks yang berisi deskripsi gambar. Contoh penggunaannya: <img src=”gambarkomputer.jpg” alt=”Komputer Keluaran Terbaru”>
‘width’ dan ‘height’: menentukan lebar dan tinggi gambar. Contoh penggunaannya: <img src=”gambarkomputer.jpg” width=”400” height=”250”>

4. HTML Link Tag

Jenis tag ini digunakan untuk membuat link (tautan), yang mana akan menghubungkan dengan halaman lain.

Jadi, link bisa kamu gunakan untuk menghubungkan ke sumber baik dari web lain atau web yang sama. Bisa juga untuk membuat menu navigasi. Berikut contoh tag HTML untuk membuat link:

<a> berfungsi untuk mendefinisikan hyperlink untuk menghubungkan ke halaman web lain. Tag HTML hyperlink tampil sebagai bagian yang bisa di-klik oleh pengunjung.
<link> berfungsi untuk menghubungkan dokumen lain dengan dokumen HTML atau mendefinisikan hubungan lain.
<nav> digunakan untuk membuat link navigasi.

Dalam penggunaannya, link tag memiliki beberapa atribut, meliputi:

‘href’: menentukan URL tujuan dari link yang mau kamu buat. Contohnya: <a href=”https://jagoanhosting.com”>Kunjungi Sekarang</a>
‘target’: berfungsi untuk menentukan bagaimana cara link akan terbuka. Sebagai contoh, kamu mau link terbuka di tab baru, maka bisa dituliskan <a href=”https://jagoanhosting.com” target=”_blank”>

Tag HTML ini berfungsi untuk membuat list (daftar). Konten berbentuk list membuat informasi memiliki format yang terstruktur sehingga lebih mudah dibaca. Berikut beberapa contoh tag untuk membuat list:

<ol> berfungsi untuk membuat daftar yang berurutan.
<ul> berfungsi untuk membuat daftar yang tidak berurutan.
<li> mendefinisikan suatu item di dalam daftar.
<dl> berfungsi untuk membuat daftar deskripsi.
<dt> mendefinisikan nama dalam daftar deskripsi.
<dd> berfungsi untuk mendefinisikan deskripsi dari item yang ada dalam daftar deskripsi.

6. Tag Form dan Input

Tag form HTML digunakan untuk menyisipkan dan menyesuaikan pengaturan form. Sementara itu, tag input fungsinya untuk menambahkan elemen tertentu ke halaman web. Berikut beberapa contohnya:

<form> berfungsi untuk membuat form pada suatu halaman web.
<input> mendefinisikan berbagai jenis input.
<label> mendefinisikan label untuk elemen tag input.
<select> berfungsi untuk menyediakan kendali untuk memilih beberapa opsi sekaligus.
<textarea> mendefinisikan input teks datar dari berbagai baris yang bisa disesuaikan ukurannya.
<opton> mendefinisikan item tertentu untuk dipilih dalam elemen <select>
<button> tag HTML button berfungsi untuk membuat tombol.

Cek Konten Lainnya:

30+ Contoh Blog Pribadi, Pendidikan & Makanan yang Menarik

7. Tag Table HTML

Berikut berbagai tag yang bisa kamu gunakan dalam pembuatan tabel dalam halaman web:

<table> berfungsi untuk mendefinisikan tabel.
<thead> fungsinya untuk mengelompokkan konten header dari tabel.
<tbody> fungsinya untuk mengelompokkan bagian utama dari konten suatu tabel.
<tfoot> berfungsi untuk mengelompokkan konten footer tabel.
<tr> mendefinisikan baris pada tabel.
<th> mendefinisikan cell header atau kolom judul suatu tabel.
<td> mendefinisikan cell dalam tabel.
<caption> mendefinisikan caption untuk tabel.

8. Tag Media

Jenis tag HTML ini berfungsi untuk menambahkan berbagai elemen media, seperti audio dan video. Berikut contohnya:

<audio> berfungsi untuk mendefinisikan konten audio dalam halaman web.
<video> berfungsi untuk mendefinisikan konten video dalam halaman web.
<track> mendefinisikan subtitle (teks) untuk audio dan video.
<source> berfungsi untuk menyebutkan berbagai sumber media.

9. Tag Meta

Fungsi tag meta pada HTML adalah untuk menyimpan informasi mengenai yang tidak terlihat. Berikut contoh tag meta:

<meta> berfungsi untuk mendefinisikan metadata terkait halaman web (informasi ini tidak terlihat oleh pengunjung).
<link> mendefinisikan dasar URL untuk semua URL relatif dari web.

10. Tag Style dan Programming

Tag HTML untuk style dan programming digunakan oleh pengembang web untuk mengatur tampilan dan fungsi dari halaman. Berikut contohnya:

<style> berfungsi untuk menyediakan CSS untuk elemen HTML dari dokumen.
<script> berfungsi untuk mendefinisikan program javascirpt untuk halaman web.

11. Tag Umum

Selain tag HTML dari berbagai kategori di atas, ada juga tag yang digunakan untuk elemen umum web. Antara lain:

<div> tag div pada HTML berfungsi untuk mendefinisikan kelompok elemen-elemen yang terdapat dalam dokumen HTML.
<header> mendefinisikan bagian header dari halaman atau section.
<main> mendefinisikan konten utama dari halaman web.
<footer> mendefinisikan bagian footer halaman web.
<article> tag article HTML digunakan untuk mendefinisikan artikel dalam dokumen.
<section> berfungsi untuk mendefinisikan section halaman.
<details> berfungsi untuk mendefinisikan section yang dapat pengunjung lihat atau sembunyikan.
<summary> mendefinisikan bagian yang terlihat dari elemen <details>

Contoh Penggunaan Tag HTML

Setelah menyimak berbagai contoh tag HTML dan fungsinya, ada baiknya untuk mempelajari cara penggunaan tag.

Berikut beberapa contoh dari penggunaan tag HTML yang umum digunakan:

1. Penggunaan Tag Dasar

Tag dasar merupakan jenis yang paling fundamental. Sehingga pemakaiannya wajib untuk semua dokumen HTML. Yuk, simak contoh penggunaannya berikut:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<h1>Pengertian HTML</h1>

<p>HTML adalah markup language yang berfungsi untuk mendefinisikan berbagai jenis konten halaman web.</p>

</body>

</html>

2. Penggunaan Tag Judul

Tag HTML ini juga umum digunakan karena memudahkan pengunjung untuk menemukan informasi yang mereka perlukan. Tag judul mencakup H1 (judul utama), H2 (subheading pertama), dan berikutnya hingga H6.

Berikut contoh penggunaan dari tag judul dalam HTML:

<!DOCTYPE html>

<html>

<body>

<h1>Jenis Hosting</h1>

<p>Terdapat beberapa jenis hosting yang bisa kamu pilih sesuai kebutuhan, di antaranya: </p>

<hr>

<h2>Shared Hosting</h2>

<p>Layanan hosting ini menggunakan server bersama untuk beberapa pengguna. Shared hosting merupakan pilihan yang lebih terjangkau.</p>

<hr>

<h2>Dedicated Hosting</h2>

<p>Layanan hosting ini menyediakan server khusus untuk setiap pengguna. Harganya lebih tinggi, tapi sepadan dengan performanya</p>

</body>

</html>

3. Penggunaan Tag Style

Selanjutnya adalah contoh penggunaan tag style. Tag ini memegang peran penting untuk mengatur dan menyesuaikan gaya tampilan konten. Sehingga penggunaan tag style hendaknya mempertimbangkan kemudahan navigasi bagi pengunjung.

Cek Konten Lainnya:

Apa itu Blogging, Blog & Blogger? Ini Perbedaannya

Berikut contoh penggunaan HTML tag style:

<!DOCTYPE html>

<html>

<body>

<h1 style=”text-align:center;”>Mengenal Jenis Hosting</h1>

<p style=”text-align:center;”> Terdapat beberapa jenis hosting yang bisa kamu pilih sesuai kebutuhan.</p>

</body>

</html>

4. Penggunaan Tag Formatting

Kategori tag HTML formatting berperan penting dalam mengatur format teks dalam konten website. Penggunaannya sangat beragam. Berikut contoh penggunaan dari tag formatting bold dan italic:

<!DOCTYPE html>

<html>

<body>

<p>Jika kamu bertekad untuk berkarir sebagai pengembang web, maka penting banget untuk<b>menguasai HTML</b></p>

<p>Pasalnya, HTML atau <i>HyperText Markup Language</i> bisa dibilang sebagai bahasa dari website</p>

</body>

</html>

Dalam website, dua paragraf tersebut akan ditampilkan sebagai berikut:

Jika kamu bertekad untuk berkarir sebagai pengembang web, maka penting banget untuk menguasai HTML.

Pasalnya, HTML atau HyperText Markup Language bisa dibilang sebagai bahasa dari website.

5. Penggunaan HTML Video Tag

Tag ini berfungsi untuk menambahkan media berupa video ke dalam halaman web. Sehingga pengunjung bisa melihat konten video saat membuka halaman. Meskipun begitu, video bisa gagal diputar apabila browser tidak mendukung.

Nah, berikut contoh penggunaan tag HTML video:

<!DOCTYPE html>

<html>

<body>

<h1> Video Tutorial Instal Aplikasi</h1>

</video>

</body>

</html>

6. Penggunaan HTML Font Color Tag

Font color tag termasuk kategori formatting. Fungsinya adalah untuk mengatur warna teks dalam konten website. Berikut contoh penggunaan tag HTML untuk mengubah warna font:

<!DOCTYPE html>

<html>

<body>

<font color=”red”>Perhatikan Cara Penggunaan!<font><br/>

<font color=”black”>Ikuti langkah-langkah penggunaan produk berikut.<font><br/>

</body>

</html>

7. Penggunaan Date Time HTML Tag

Atribut date time pada HTML berfungsi untuk menentukan tanggal dan waktu saat kamu memasukkan teks ke dalam konten web. Berikut contoh penggunaannya:

<!DOCTYPE html>

<html>

<body>

<p>Perilisan produk perangkat terbaru ini berlangsung pada<time datetime=”2023-12-27″>penghujung tahun lalu</time>.</p>

</body>

</html>

8. Penggunaan HTML Meta Title Tag

Tag meta mendefinisikan metadata (informasi mengenai dat) dari dokumen HTML.

Tag meta selalu berada di dalam elemen <head>. Biasanya, tag ini digunakan untuk menyebutkan set karakter, deskripsi halaman, penyusun dokumen, keyword, dan pengaturan viewpoint.

Informasi dalam meta tidak akan tampil dalam halaman. Jadi, tidak ditampilkan ke pengunjung, melainkan digunakan oleh browser dan mesin pencari. Nah, berikut contoh penggunaan tag meta:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Setelah mengetahui kumpulan HTML tag dasar di atas, saatnya kamu untuk terjun di area web development.

Setelah itu jangan lupa untuk langsung praktik bikin website dengan Hosting Developer Friendly yang mendukung bahasa pemrogramman dan framework terbaru.

FAQ

Bagaimana cara menulis HTML yang benar?

Penulisan kode HTML perlu mengikuti beberapa aturan, yaitu:

Mencantumkan tag wajib, meliputi <!DOCTYPE html>, <html>, <head>, <title>, dan <body>
Menggunakan huruf kecil.
Menutup tag dengan benar.

Apa itu atribut dalam HTML?

Atribut merupakan kata kunci khusus yang terletak dalam tag pembuka. Atribut merupakan penentu perilaku elemen. Contohnya atribut href pada tag <a> yang berfungsi menentukan halaman tujuan link.

Apa perbedaan dari tag HTML dengan elemen HTML?

Tag HTML merupakan kode yang berfungsi sebagai pembuka dan penutup dari elemen HTML. Sedangkan elemen HTML mencakup tag pembuka, konten, dan tag penutup.

Tag HTML: Kumpulan Contoh dan Fungsinya

Sekilas tentang Tag HTML

Contoh Tag HTML

1. Tag Dasar HTML

2. Tag Formatting

3. HTML Image Tag

4. HTML Link Tag

5. HTML Tag List

6. Tag Form dan Input

7. Tag Table HTML

8. Tag Media

9. Tag Meta

10. Tag Style dan Programming

11. Tag Umum

Contoh Penggunaan Tag HTML

1. Penggunaan Tag Dasar

2. Penggunaan Tag Judul

3. Penggunaan Tag Style

4. Penggunaan Tag Formatting

5. Penggunaan HTML Video Tag

6. Penggunaan HTML Font Color Tag

7. Penggunaan Date Time HTML Tag

8. Penggunaan HTML Meta Title Tag

FAQ

Bagaimana cara menulis HTML yang benar?

Apa itu atribut dalam HTML?

Apa perbedaan dari tag HTML dengan elemen HTML?