Kumpulan Tag HTML Lengkap Dengan Penjelasannya

Selamat datang di blog tempat kita Belajar dan Berbagi Ilmu. Setelah pada postingan sebelumnya kita mempelajari sejarah dan perkembangan komputer yang sangat panjang, maka sekarang kita akan bersenang-senang dengan kode HTML dari pemrograman web

Kumpulan Tag HTML Lengkap Dengan Penjelasannya Pintar Sekolah

HTML adalah singkatan dari Hyper Text Markup Language, yang berarti HTML adalah salah satu dari sekian banyaknya bahasa markup. HTML sering digunakan dalam pembuatan web desain dan seorang front-end web developer pasti sudah tidak asing lagi ketika mendengar kata HTML.

Untuk membuat satu buah file dokumen HTML yang sempurna, tentunya kita harus mengetahui berbagai macam tag-tagnya, apalagi sekarang sudah tersedia HTML5 yang mempunyai tag lebih spesifik lagi.

Tag HTML Lengkap Dengan Penjelasannya


Mungkin beberapa dari kalian pernah merasa kesulitan dan tidak tahu tag HTML yang mana untuk membuat sebuah form atau yang lainnya. Oleh karena itu, pada artikel kali ini blog Pintar Sekolah akan memberikan semua tag HTML lengkap dengan penjelasannya yang didapat dari situs W3Schools.

Tag-tag berikut juga sudah diklasifikasikan atau dikelompokkan berdasarkan fungsinya masing-masing sehingga memudahkan kamu untuk mempelajarinya dan jika kamu ingin membuka jasa pembuatan website maka artikel ini cocok sekali karena biasanya seseorag yang membuka jasa pembuatan website pasti sudah tidak asing lagi dengan semua tag HTML dibawah
Catatan :
  • Tag yang berwarna merah tidak didukung oleh HTML5
  • Tag yang mempunyai tanda adalah tag baru di HTML5

Tag HTML Dasar


TagDeskripsi
<!DOCTYPE>Mendefinisikan jenis dokumen
<html>Mendefinisikan sebuah dokumen HTML
<title>Mendefinisikan judul dari dokumen HTML
<body>Mendefinisikan tubuh dokumen atau isi utama dari sebuah HTML
<h1> sampai <h6>Mendefinisikan heading atau sub judul dari yang paling kecil sampai yang paling besar
<p>Mendefinisikan sebuah paragraf
<br>Membuat 1 baris kosong, bekerja seperti tombol enter pada keyboard
<hr>Membuat sebuah garis horizontal
<!--- ... --->Memberikan komentar pada dokumen HTML, isi dari tag ini tidak akan ditampilkan oleh web browser

Formatting


TagDeskripsiHTML5
<acronym>Mendefinisikan sebuah singkatan atau akronim, karena tidak didukung oleh HTML5, gunakan tag <abbr> sebagai gantinya
<abbr>Mendefinisikan sebuah singkatan atau akronim
<address>Mendefinisikan kontak atau alamat dari penulis dokumen
<b>Membuat sebuah text menjadi tebal
<bdi>Mengisolasi bagian teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luarnya
<bdo>Mengesampingkan arah teks saat ini
<big>Mengubah tebal sebuah teks, karena tidak didukung oleh HTML5, gunakan CSS untuk mengatur tebal sebuah teks
<blockquote>Mendefinisikan sebuah bagian teks yang dikutip dari sumber lain
<center>Membuat agar teks tampil ditengah, karena tidak didukung oleh HTML5, gunakan CSS
<cite>Mendefinisikan judul sebuah karya
<code>Mendefinisikan kode komputer
<del>Mendefinisikan teks yang sudah dihapus dari dokumen
<dfn>Mendefinisikan sebuah istilah
<em>Mendefinisikan teks yang ditekankan
<font>Mendefinisikan font, warna, dan besar dari sebuah teks, tidak didukung oleh HTML5
<i>Mendefinisikan sebuah bagian teks yang bersumber dari suara, atau membuat teks menjadi miring (italic)
<ins>Mendefinisikan sebuah teks yang dimasukkan kedalam dokumen
<kbd>Mendefinisikan teks yang ditandai atau disorot
<mark>Mendefinisikan judul dari dokumen HTML
<meter>Mendefinisikan pengukuran skalar dalam rentang yang diketahui (alat ukur)
<pre>Mendefinisikan teks yang berformat
<progress>Membuat sebuah progress
<q>Mendefinisikan sebuah kutipan singkat
<rp>Menggantikan fungsi tag <ruby> pada browser yang tidak mendukung
<rt>Mendefinisikan sebuah penjelasan atau karakter dari tipografi Asia
<ruby>Mendefinisikan anotasi ruby (untuk tipografi Asia)
<s>Mendefinisikan teks yang sudah tidak benar
<samp>Mendefinisikan keluaran sampel dari sebuah program komputer
<small>Membuat teks menjadi lebih kecil
<strike>Membuat strikethrough, karena tidak didukung oleh HTML5, gunakan tag <del> atau <s> sebagai gantinya
<strong>Mendefinisikan teks yang penting
<sub>Mendefinisikan teks subscript
<sup>Mendefinisikan teks superscripted
<time>Mendefinisikan tanggal atau waktu
<tt>Mendefinisikan teks teletype, karena tidak didukung oleh HTML5, gunakan CSS sebagai gantinya
<u>Membuat garis bawah pada teks (underline)
<var>Mendefinisikan sebuah variabel
<wbr>Mendefinisikan kemungkinan jeda baris

Form dan Input


TagDeskripsiHTML5
<form>Mendefinisikan sebuah form HTML untuk pengguna
<input>Mendefinisikan sebuah kontrol input
<textarea>Mendefinisikan kontrol input multigaris (area teks)
<button>Membuat sebuah tombol yang bisa diklik
<select>Mendefinisikan sebuah daftar drop-down
<optgroup>Mendefinisikan sekelompok opsi terkait dalam daftar drop-down
<option>Mendefinisikan sebuah opsi atau pilihan dalam daftar drop-down
<label>Mendefinisikan label atau kategori untuk tag <input>
<fieldset>Grup element terkait dengan form
<legend>Mendefinisikan sebuah caption untuk tag <fieldset>
<datalist>Menentukan daftar opsi yang telah ditentukan untuk kontrol masukan
<keygen>Mendefinisikan field generator kunci-pasangan (untuk form)
<output>Mendefinisikan hasil perhitungan
bingkai

Frames


Baca Juga
TagDeskripsiHTML5
<frame>Mendefinisikan sebuah jendela (frame) didalam frameset, tidak didukung oleh HTML5
<frameset>Mendefinisikan satu set frame, tidak didukung oleh HTML5
<noframes>Mendefinisikan konten alternative bagi pengguna yang tidak mendukung frame, tidak didukung oleh HTML5
<iframe>Mendefinisikan sebuah inline frame

Gambar


TagDeskripsiHTML5
<img>Mendefinisikan sebuah gambar
<map>Mendefinisikan peta gambar pada browser klien
<area>Mendefinisikan sebuah area didalam peta gambar
<canvas>Digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript)
<figcaption>Mendefinisikan sebuah caption untuk tag <figure>
<figure>Menentukan konten sendiri
<picture>Mendefinisikan sebuah wadah untuk beberapa sumber gambar

Audio dan Video


TagDeskripsiHTML5
<audio>Mendefinisikan konten suara atau audio
<source>Mendefinisikan beberapa sumber media untuk tag <audio>, <video>, dan <picture>
<track>Mendefinisikan trek teks untuk tag <audio> dan <video>
<video>Mendefinisikan sebuah video atau film

Link


TagDeskripsiHTML5
<a>Mendefinisikan sebuah hyperlink
<link>Mendefinisikan sebuah hubungan antara dokumen dengan sumber eksternal (Paling sering dihubungkan dengan stylesheet seperti CSS)
<nav>Mendefinisikan tautan navigasi

List


TagDeskripsiHTML5
<ul>Mendefinisikan daftar yang tidak berurutan (tanpa nomor)
<ol>Mendefinisikan daftar dengan nomor urut
<li>Mendefinisikan daftar item pada tag <ol> dan <ul>
<dir>Mendefinisikan sebuah direktori, karena tidak didukung oleh HTML5, gunakan <ul> sebagai gantinya
<dl>Mendefinisikan daftar deskripsi
<dt>Mendefinisikan sebuah istilah atau nama dalam daftar deskripsi
<dd>Mendefinisikan sebuah deskripsi istilah atau nama dalam daftar deskripsi
<menu>Mendefinisikan daftar menu atau perintah
<menuitem>Mendefinisikan sebuah perintah atau item menu yang dapat dipanggil pengguna dari menu popup

Tabel


TagDeskripsiHTML5
<table>Mendefinisikan sebuah tabel
<caption>Mendefinisikan caption tabel
<th>Mendefinisikan sebuah sel header dalam tabel
<tr>Mendefinisikan sebuah baris dalam tabel
<td>Mendefinisikan sebuah kolom atau sel dalam tabel
<thead>Mengelompokkan konten header dalam sebuah tabel
<tbody>Mengelompokkan konten utama atau isi dalam sebuah tabel
<tfoot>Mengelompokkan konten footer atau penutup dalam sebuah tabel
<col>Menentukan properti kolom untuk setiap kolom dalam tag <colgroup>
<colgroup>Menentukan sekelompok kolom atau lebih dalam sebuah tabel untuk pemformatan

Styles dan Semantic


TagDeskripsiHTML5
<style>Mendefinisikan informasi gaya untuk dokumen
<div>Mendefinisikan sebuah bagian dalam dokumen
<span>Mendefinisikan sebuah bagian yang lebih kecil dari <div> dalam dokumen
<header>Mendefinisikan sebuah header dalam dokumen
<footer>Mendefinisikan sebuah footer dalam dokumen
<main>Menentukan konten utama untuk dokumen
<section>Mendefinisikan sebuah bagian yang lebih besar dari <div> dalam dokumen
<article>Mendefinisikan sebuah artikel
<aside>Mendefinisikan konten selain konten utama, biasanya digunakan pada sidebar didalam sebuah situs
<details>Mendefinisikan rincian tambahan yang bisa dilihat dan disembunyikan pengguna
<dialog>Mendefinisikan sebuah kotak dialog atau jendela
<summary>Mendefinisikan heading yang terlihat untuk tag <details>
<data>Menghubungkan konten yang diberikan menggunakan bahasa yang dimengerti oleh meisn

Meta Info


TagDeskripsiHTML5
<head>Mendefinisikan informasi tentang dokumen
<meta>Mendefinisikan meta data yang ada didalam dokumen
<base>Menentukan URL dasar / target untuk semua URL relatif dalam dokumen
<basefont>Menentukan warna standar, ukuran, dan font untuk semua teks dalam dokumen. karena tidak didukung oleh HTML5 gunakan CSS sebagai gantinya

Programming


TagDeskripsiHTML5
<script>Mendefinisikan script untuk klien
<noscript>Mendefinisikan konten alternative untuk pengguna yang tidak mendukung tag <script>
<applet>Tidak didukung oleh HTML5, gunakan <embed> atau <object> sebagai gantinya
<embed>Mendefinisikan sebuah wadah untuk aplikasi eksternal (non-HTML)
<object>Mendefinisikan sebuah objek yang disematkan
<param>Mendefinisikan parameter untuk sebuah objek

Sebagai bonusnya karena kamu telah membaca artikel Pintar Sekolah, maka dibawah ini saya sajikan element atau tag yang baru saja hadir di HTML5 berdasarkan W3Schools. Perlu diketahui ya bahwa tag dibawah ini bukan semua tag HTML5, melainkan tag yang baru di HTML5.


TagDeskripsiHTML5
<article>Mendefinisikan sebuah artikel dalam sebuah dokumen
<aside>Mendefinisikan konten selain konten utama, biasanya digunakan pada sidebar disebuah situs
<bdi>Mengisolasi bagian teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luarnya
<details>Mendefinisikan rincian tambahan yang dapat dilihat atau disembunyikan pengguna
<dialog>Mendefinisikan sebuah kotak dialog atau jendela
<figcaption>Mendefinisikan sebuah caption untuk tag <figure>
<figure>Mendefinisikan konten mandiri
<footer>Mendefinisikan footer untuk dokumen atau bagian
<header>Mendefinisikan header untuk dokumen atau bagian
<main>Mendefinisikan konten utama untuk dokumen
<mark>Mendefinisikan teks yang ditandai atau disorot
<menuitem>Mendefinisikan sebuah perintah / item menu yang dapat dipanggil pengguna dari menu popup
<meter>Mendefinisikan pengukuran skalar dalam rentang yang diketahui (alat ukur)
<nav>Mendefinisikan tautan navigasi
<progress>Membuat sebuah progress
<rp>Mendefinisikan apa yang harus ditunjukkan di browser yang tidak mendukung anotasi ruby
<rt>Mendefinisikan sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
<ruby>Mendefinisikan anotasi ruby ​​(untuk tipografi Asia Timur)
<section>Mendefinisikan sebuah bagian dalam sebuah dokumen
<summary>Mendefinisikan heading yang terlihat untuk tag <details>
<time>Mendefinisikan sebuah tanggal atau waktu
<wbr>Mendefinisikan kemungkinan jeda baris

Dengan mengetahui kode atau tag HTML lengkap dengan memahami semua penjelasannya, kamu akan dimudahkan ketika belajar membuat website

Nantikan artikel menarik lainnya tentang Teknologi Informasi hanya di blog Pintar Sekolah. Mohon dikoreksi jika ada yang salah dan jangan lupa bagikan ke teman-teman kamu.

Seorang siswa dari XI RPL 1 dan bersekolah di SMKN 1 Karawang. Hobi menulis dan sangat menggemari dunia web development, internet dan desain.

8 komentar

Wihh lengkap banget, saya jdi belajar, soalnya banyak yg blm saya tahu.

Sangat bermanfaat sekali. Saya pribadi sedang belajar tentang html.

Nah, ini yg paling saya cari sekaligus yg paling bikin pusing... saya pelajari dulu om

Semoga dengan adanya artikel ini bisa memudahkan kamu untuk lebih dalam lagi mempelajari HTML

tutorial apa ya gan? Untuk tutorial cara membuat dokumen HTML akan dibuat setelah artikel tentang CSS terlebih dahulu di waktu yang akan datang

Silahkan berkomentar atau berpendapat melalui form dibawah. Berkomentarlah sesuai dengan isi artikel, link tidak akan ditampilkan, dan komentar yang mengandung unsur SARA tidak diperkenankan.
Jadilah orang yang bijak dan bisa menghargai orang lain
EmoticonEmoticon