|
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.
1. Tag Dasar HTML
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:
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.
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=”” target=”_blank”>
5. HTML Tag List
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.
|
|
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:
- <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.
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 menguasai HTML</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 controls>
<source src=”video tutorial instal apk.webm” type=”video/webm” />
</video>
</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>
<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:
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”description” content=”Tutorial Instal Aplikasi Corel Draw”>
<meta name=”keywords” content=”tutorial Corel Draw”>
<meta name=”author” content=”Danang Wibowo”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
Setelah mengetahui kumpulan HTML tag dasar di atas, saatnya kamu untuk terjun di area web development
|
