Tag dan Atribut pada HTML | Belajar HTML - Hallo teman- teman kali ini Code Politan akan membahas pertanyaan seputar tag dan atribut pada html, dimulai dari pertanyaan apa yang dimaksud dengan tag dan atribut pada HTML? apa saja kumpulan tag pada HTML? bagaimana penggunaan dan penulisan tag dan atribut yang baik pada html? dari beberapa pertanyaan tersebut kita akan kupas satu persatu, sebelum kita membahas tentang tag dan atribut perlu di ingat kembali bahwa dokumen HTML ini disusun oleh tag- tag markup dan setiap tag pada HTML menjelaskan perintah isi dokumen yang berbeda- beda.

BACA JUGA : Pengertian Elemen pada HTML | Belajar HTML

Apa itu Tag? Apa yang dimaksud dengan Tag pada HTML?

Tag adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML dan Fungsi Tag adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek di tampilkan berdasarkan Tag yang di gunakan, objek disini bisa berupa teks, video, audio dan gambar.

Bagaimana Cara menggunakan Tag pada HTML?

Penggunaan Tag itu berada diantara dua karakter < dan > dengan demikian perintah tersebut dapat dikenali oleh browser dan memberitahu web browser bagaimana suatu objek ditampilkan. Secara umum penggunaan tag pada HTML itu berpasang- pasangan dimulai dengan <tag_pembuka> Isi dari konten  </tag_penutup>, namun ada juga tag yang dalam penulisannya berdiri sendiri seperti <nama_tag/> tag tersebut disebut dengan Void Element.

Contoh Menggunakan Tag pada HTML yang SALAH

Code :

<h1>Isi Konten</p>
Belajar HTML di CodePolitan sangat menyenangkan

Tampilan :

Perhatikan tag pembuka di atas adalah H1 dan tag penutupnya adalah P, penulisan seperti itu merupakan contoh yang SALAH, karena tag pembuka H1 menjadi tidak memiliki tag penutup sehingga semua tulisan yang masuk dikategorikan sebagai dokumen H1.

Contoh Menggunakan Tag pada HTML yang BENAR

Code :

<h1> Isi Konten </h1>
Belajar HTML di CodePolitan sangat menyenangkan

Tampilan :

Perhatikan tag pembuka di atas adalah H1 dan tag penutupnya adalah H1, penulisan seperti itu merupakan contoh yang BENAR, karena tag pembuka H1 memiliki tag penutup H1 sehingga penulisan yang terkena dampak H1 hanyalah tulisan yang berada pada elemen H1 saja.

Kumpulan Tag pada HTML

Karena banyak sekali Tag dan atribut pada HTML, saya akan bantu untuk mendefinisikan kegunaan Macam- macam Tag secara satu persatu, pada tabel dibawah ini:

`element``

Tag		Penjelasan
	``	Mendefinisikan Komentar
	``	Mendefinisikan tipe atau jenis dokumen
	``	Mendefinisikan hyperlink
	``	Mendefinisikan sebuah singkatan atau akronim
	``	Tag ini tidak didukung pada HTML5. Gunakan sebagai penggantinya pada HTML5. Mendefinisikan akronim
	``	Mendefinisikan informasi kontak penulis atau pemilik dokumen
	``	Tag ini tidak didukung pada HTML5. Gunakan atau sebagai penggantinya pada HTML5. Mendefinisikan embedded applet
	``	Mendefinisikan sebuah area didalam image-map
		Mendefinisikan sebuah artikel
		Mendefinisikan selain dari konten halaman
		Mendefinisikan konten suara
	``	Mendefinisikan teks bold atau cetak tebal
	``	Menentukan basis URL atau target untuk semua URL relatif dalam dokumen
	``	Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Menentukan warna default, ukuran, dan font untuk semua teks dalam dokumen
		Isolat bagian teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu sendiri
	``	Mengganti arah teks saat ini
	``	Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan teks besar
	` `	Mendefinisikan bagian yang dikutip dari sumber lain
	``	Mendefinisikan tubuh atau badan dokumen
	` `	Mendefinisikan satu baris tunggal atau sama dengan fungsi enter
	``	Mendefinisikan sebuah tombol
		Digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript)
	`
Mendefinisikan caption dari sebuah tabel
	``	Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan teks yang posisinya berada ditengah
	``	Mendefinisikan Judul karya
	``	Mendefinisikan bagian dari code pada komputer
	`
Menentukan sifat kolom untuk setiap kolom dalam
	`
Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
		Menentukan daftar pilihan yang telah ditentukan untuk kontrol input
	` `	Mendefinisikan deskripsi / nilai istilah dalam daftar deskripsi
	``	Mendefinisikan teks yang telah dihapus dari dokumen
		Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
	``	Merupakan contoh mendefinisikan istilah
		Mendefinisikan sebuah kotak dialog atau jendela
	``	Tag ini tidak didukung pada HTML5. Gunakan sebagai penggantinya pada HTML5. Mendefinisikan daftar direktori
	` `	Mendefinisikan sebuah bagian dalam sebuah dokumen
	` `	Mendefinisikan daftar deskripsi
	` `	Mendefinisikan istilah / nama dalam daftar deskripsi
	``	Mendefinisikan menekankan teks
		Mendefinisikan sebuah wadah untuk eksternal (non-HTML) aplikasi
	``	Sebauh Grup untuk pengelompokan dalam form
		Mendefinisikan sebuah caption untuk element
		Menentukan konten mandiri
	``	Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan font, warna, dan ukuran dari sebuah teks
		Mendefinisikan sebuah footer dari sebuah dokumen atau section
	``	Mendefinisikan sebuah form HTML untuk input pengguna
	``	Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah jendela (frame) dalam sebuah frameset
	``	Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah satu set frames
	` sampai `	Mendefinisikan headings pada HTML
	``	Mendefinisikan informasi tentang dokumen
		Mendefinisikan sebuah header untuk dokumen atau bagian dokumen
	` `	Mendefinisikan perubahan tematik dalam konten atau memberikan garis pada dokumen
	``	Mendefinisikan root dari sebuah dokumen HTML
	``	Mendefinisikan sebuah bagian dari teks dengan suara alternatif atau suasana hati
	` Elemen, Tag dan atribut pada HTML sebenarnya saling berkaitan, hanya saja disini atribut memiliki tugas khusus untuk memberikan informasi atau sifat tambahan yang akan diberikan kepada tag dan elemen yang mengandung atribut tersebut.   Bagaimana Cara menggunakan Atribut pada Tag HTML? Penulisan Atribut selalu diletakan dalam <tag_pembuka> setelah nama tag, sebagai contoh: <tag_pembuka <em>name</em>="<em>value</em>">. Dari tag dan atribut tersebut yang dimaksud dengan atribut adalah name="value". Informasi ini berupa instruksi tambahan yang tersusun dari dua bagian yaitu atribut Name dan atribut Value dalam penulisannya atribut value harus ditulis diantara tanda kutip ganda atau tanda kutip tunggal. Apa yang dimaksud dengan atribut  Name dan  atribut Value? Atribut Name adalah nama informasi atau nama sifat apa yang akan di tambahkan kepada tag dan elemen yang mengandung atribut tersebut. Sedangkan Atribut Value adalah Nilai dari sebuah informasi atau nilai sifat apa yang akan di berikan kepada tag dan elemen yang mengandung atribut tersebut. Kapan kita harus menggunakan tanda kutip tunggal atau tanda kutip ganda? Dalam penggunaanya tanda kutip tunggal dan ganda sama saja tergantung kepada programmernya mau pilih yang mana asal konsisten, namun ada aturan pembungkusan tanda kutip dalam beberapa kondisi ketika value dalam atribut itu harus bernilai tanda kutip , proses pembungkusan tersebut dapat ditulis seperti berikut ini:  Atau Contoh Menambahkan Atribut dalam Tag pada HTML yang SALAH Code : Perhatikan tag yang digunakan adalah tag IMG, "" disana merupakan atribut  dan "" adalah atribut yang sudah ditulis dengan benar. Lalu letak salahnya dimana? perhatikan penulisan atribut width pada code diatas , dengan cara penulisan seperti itu informasi tambahan yang diberikan melalui atribut tersebut tidak dapat dibaca oleh web browser sehingga tampil pada web browser tidak ada perubahan atau merupakan tampilan dari ukuran yang sebenarnya. Contoh Menambahkan Atribut dalam Tag pada HTML yang BENAR Code : Perhatikan tag yang digunakan adalah tag IMG, "" disana merupakan atribut  dan "" adalah atribut yang sudah ditulis dengan benar. Perhatikan penulisan atribut width pada code diatas , dengan cara penulisan seperti ini informasi tambahan yang diberikan melalui atribut tersebut dapat dibaca oleh web browser sehingga tampil pada web browser berubah sesuai dengan atribut name dan atribut value yang diberikan. Oke, Pembahasan Tag dan Atribut pada HTML sudah selesai, kita akan sambung belajar HTMLnya pada kesempatan berikutnya, sampai ketemu lagi keep watch and learn at CodePolitan. Kumpulan Atribut pada HTML yang sering digunakan Atribut Penjelasan alt Menentukan teks alternatif untuk gambar, ketika gambar tidak dapat ditampilkan disable Menentukan bahwa elemen input harus dinonaktifkan href enentukan URL (Alamat web) untuk link id Menentukan ID link untuk elemen src Menentukan URL (Alamat web) untuk gambar style menentukan style CSS inline untuk suatu elemen title Menampilkan tool tip tentang informasi tambahan pada elemen sebenarnya masih banyak lagi atribut yang bisa digunakan pada HTML, namun tergantung kepada tag apa yang digunakan, karena beberapa tag memiliki atribut khususnya masing- masing. Referensi Tag dan Atribut pada HTML: www.tutorialspoint.com www.w3schools.com www.w3schools.com/tags