Apa maksud tag elemen atribut pada html

Tholib Mafazi Rahman

Table of Contents Show

Apa itu Tag HTML?
Daftar Kode HTML Lengkap (Tag HTML dan Fungsinya)
Apa itu Elemen HTML?
Jenis Elemen HTML Berdasarkan Cara Penulisannya
Jenis Elemen HTML Berdasarkan Tampilannya
Elemen Bersarang atau Nested Element
Apa itu Atribut HTML?
Daftar Atribut HTML Lengkap dan Fungsinya
Video yang berhubungan

HTML menyediakan berbagai macam Elemen atau Tag dengan fungsinya masing-masing. dengan Tag dan Elemen tersebut sebuah Dokumen HTML mampu menampilkan teks,table,form, dsb pada Web Browser.

Selain menampilkan teks,table, form, dsb. HTML juga bisa menampilkan objek-objek multimedia seperti gambar, suara, video. Untuk informasi dasar, Html menyediakan elemen-elemen dasar seperti : elemen html, head, title, body.

Daftar isi

1. Tag HTML
2. Elemen HTML
3. Atribut HTML
4. Komentar

Tag Html merupakan markup/pembungkus yang terdiri dari 2 bagian yang disebut dengan tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> dan tag akhir dinyatakan dalam bentuk </nama tag>.
contoh <namatag> ..isi.. </namatag>.

Dalam sebuah Tag tidak hanya berisi teks, namun juga bisa Tag lain. artinya setiap Tag HTML bisa menjadi isi dari Tag Html lainnya. Contoh Lorem ipsum Dolor Sit Amet, bisa dilihat bahwa tag ditulis di antara tag dan .

Tag Html tidak bersifat case sensitive. Artinya, Anda bisa menulis dengan huruf besar maupun huruf kecil. Misalnya Tag <html> bisa Anda tulis dengan huruf besar yaitu <HTML> tidak akan terjadi masalah karena tag HTML tidak bersifat case sensitive.

Elemen HTML adalah nama tag atau isi dari tag yang berada diantara tag pembuka dan tag penutup. Sebuah dokumen HTML didefinisikan menggunakan Elemen-Elemen Html. Elemen HTML sendiri merupakan semua yang berada diantara start tag sampai end tag.

Elemen Html dapat dibuat secara bersarang disebut Nested Html. Nested Html merupakan sebuah Elemen atau beberapa Elemen yang berada di dalam suatu Elemen lain pada HTML. Berikut contohnya.

contoh kode/program/sintaks html

<head>

<title>

Judul - Gotutorid.com

</title>

</head>

Dari contoh diatas bisa dilihat bahwa Elemen title ditulis di dalam elemen head. Ada beberapa Elemen khusus yang tidak bisa dijadikan induk Elemen, bisa dikatakan tidak bisa dibuat bersarang. Elemen tersebut adalah elemen yang tidak memiliki pasangan, seperti , <hr>. dsb.

Suatu Dokumen HTML terdiri dari beberapa elemen yang saling berkaitan satu sama lain. Tiap-tiap elemen diapit oleh tanda lebih kecil (<) dan tanda lebih besar (>). Elemen dasar yang membentuk suatu dokumen HTML antara lain : elemen html, head, title, body.

Atribut Html merupakan bagian dari Elemen Html. Atribut bisa Anda gunakan sebagai informasi tambahan pada suatu Tag Html, informasi tersebut bisa berupa perintah untuk mengatur background, size, dsb. Contoh

contoh kode/program/sintaks html

<body>

Home

</a>

</body>

Pada contoh diatas terdapat atribut href dengan nilai htpps://gotutorid.com yang berada didalam tag <a>, atribut href tersebut berfungsi untuk mengarahkan link ke alamat tujuan sesuai dengan url yang tercantum.

Seperti dalam bahasa pemrograman yang lainnya, HTML juga memiliki komentar yang dapat digunakan untuk menjelaskan bagian-bagian dari isi web dokumen. Penulisan komentar dalam HTML sebagai berikut.

contoh kode/program/sintaks html

Suatu komentar pada Html ditandai dengan Tanda  sebagai penutupnya.

Bagikan ke Teman Anda di:

Semua Artikel yang ada di gotutorid.com ini sewaktu-waktu bisa berubah dan akan dilakukan update jika diperlukan. Jadi, jangan lewatkan kesempatan Anda untuk membaca semua artikel yang ada di-situs ini sebelum dirubah tanpa sepengetahuan Anda :D

Pada artikel sebelumnya kita telah mencoba membuat dan menjalankan file HTML di web browser untuk pertama kalinya walaupun kita belum mengetahui maksud dari kode-kode HTML tersebut. Nah, sebagai lanjutannya kita akan mempelajari aspek penting dari sebuah halaman website, yakni pengertian Tag, Elemen, dan Atribut pada HTML. Ketiganya merupakan dasar dari terbentuknya sebuah halaman web yang kita lihat di internet.

Tutorial sebelumnya: Cara membuat dan menjalankan file HTML untuk pertama kali

Tag adalah sebuah tanda yang digunakan HTML untuk memberitahukan kepada web browser untuk apa fungsi dari sebuah teks. Apakah teks tersebut ditulis sebagai sebuah paragraf, list, atau sebagai link. Tanda ini lah yang dikenal dengan istilah Tag. Di dalam HTML hampir semua tag yang ada ditulis secara berpasangan, yakni tag pembuka dan tag penutup. Penulisan tag berada di antara dua buah kurung siku (< dan >).

Objek yang akan dikenai perintah tag harus berada di antara tag pembuka dan tag penutup. Objek yang dimaksud di sini bisa berupa teks, gambar, maupun video. Untuk lebih jelasnya silakan dilihat format dasar penulisan tag pada HTML berikut:

<tag_pembuka>Objek</tag_penutup> Berikut adalah beberapa contoh penulisan tag dalam HTML:

1. Contoh pertama

Ini adalah sebuah paragraf Keterangan:

Pada contoh ini kita menggunakan tag p yang berfungsi untuk membuat paragraf.  adalah tag pembuka, sedangkan  adalah tag penutup. Perbedaan antara keduanya terletak pada tanda forward slash (/). Sedangkan teks “Ini adalah sebuah paragraf” merupakan objek yang dikenai perintah tag. Sehingga pada web browser hasilnya akan terlihat seperti ini:

Ini adalah sebuah paragraf

2. Contoh ke-2

Kalimat ini ditulis dengan teks biasa. Sedangkan yang ini ditulis dengan huruf miring. Dan yang ini menggunakan huruf tebal Keterangan:

Tag  berfungsi untuk memberikan perintah kepada web browser untuk menampilkan teks dengan bentuk garis miring (i singkatan dari italic).
Tag  berfungsi untuk menebalkan tulisan (b singkatan dari bold)

Berikut hasilnya di web browser:

Kalimat ini ditulis dengan teks biasa. Sedangkan yang ini ditulis dengan huruf miring. Dan yang ini menggunakan huruf tebal.

Catatan:

Penulisan HTML tidak case-sensitive (tidak membedakan antara huruf kecil dengan huruf besar), ini artinya penulisan  akan dianggap sama dengan .

Ada beberapa tag yang tidak memiliki pasangan (tag pembuka dan tag penutup), seperti   untuk break (pindah baris baru) atau <hr> untuk membuat horizontal line (garis horizontal). Tag ini dikenal dengan sebutan void tag atau self closing tag. Untuk penulisannya bisa ditulis dengan   atau  .

Element merupakan isi dari tag yang berada di antara tag pembuka dan tag penutup, juga termasuk tag itu sendiri dan atribut yang dimilikinya. Untuk lebih jelasnya silakan perhatikan contoh di bawah ini: Ini adalah paragraf 1 Ini adalah paragraf 2 Keterangan:

Pada contoh di atas bisa kita lihat bahwa " Ini adalah paragraf 1 " merupakan element p. Element tidak hanya berisi teks, namun bisa juga berisi tag lain seperti “ Ini adalah paragraf 2 </b”.

Hasilnya akan terlihat seperti ini: Ini adalah paragraf 1

Ini adalah paragfraf 2

Atribut merupakan informasi tambahan yang diberikan kepada tag. Informasi yang dimaksud bisa berupa perintah untuk warna dari teks, ukuran huruf teks, menentukan posisi teks, dan masih banyak lagi. Setiap atribut memiliki pasangan berupa nama dan nilai atau ditulis dengan name="value". Penulisan value harus diapit dengan tanda kutip, bisa menggunakan tanda kutip satu (') atau tanda kutip dua ("). Untuk lebih jelasanya mari kita lihat contoh penulisan kodenya di bawah ini: Paragraf ini berada di tengah halaman Keterangan:

Pada contoh di atas bisa kita lihat bahwa align=”center” adalah atribut. Align merupakan nama dari atribut, sedangkan center adalah nilai atau value dari atribut tersebut. Ini berarti HTML memerintahkan kepada web browser bahwa paragraf tersebut diposisikan di tengah halaman atau rata tengah.

Di dalam HTML terdapat banyak atribut yang beberapa di antaranya hanya cocok untuk tag tertentu saja. Selain itu, perlu diketahui juga bahwa tidak semua tag yang membutuhkan atribut, namun di dalam pemrograman web kita akan sering menjumpai sebuah tag yang menggunakan atribut untuk manipulasi halaman web menggunakan JavaScript maupun CSS.

Sampai di sini kita telah mempelajari salah satu bagian terpenting dalam HTML, yaitu Pengertian Tag, Element, dan Atribut di dalam HTML. Untuk tutorial HTML dasar berikutnya kita akan mempelajari Struktur Dasar HTML.

Tag, atribut dan elemen merupakan 3 komponen utama dalam HTML. Semua kode HTML yang menyusun halaman web pasti mengandung 3 komponen ini dan ketiganya saling berkaitan. Elemen tersusun dari tag dan objek yang ada diapitnya. Sedangkan atribut memberi informasi tambahan di dalam tag. Bingung? Berikut ini gambarannya.

Gambar di atas adalah contoh kode HTML untuk membuat link. Elemen adalah semua kode dari awal (tag pembuka) hingga akhir (tag penutup). Sedangkan tag adalah kode yang berwarna biru yang terdiri dari tag pembuka dan tag penutup. Sedangkan atribut adalah yang berwarna merah (nama atribut) dan yang berwarna orange (nilai/value atribut).

Contoh tersebut hanyalah gambaran awal dan sedikit tentang tag, atribut dan elemen. Untuk lebih jelas dalam memahami ketiga komponen tersebut baiknya kita bahas satu-persatu lebih mendalam mulai dari pengertian, fungsi hingga contoh-contohnya. Simak juga materi tentang list pada html.

Apa itu Tag HTML?

Tag HTML adalah teks khusus yang digunakan untuk menandai suatu konten yang menentukan bagaimana aplikasi web browser menampilkan konten tersebut secara visual. Konten yang dimaksud dapat berupa teks, gambar, audio, ataupun video.

Tag HTML terdiri dari tag pembuka dan tag penutup dimana diantara kedua tag tersebut terdapat konten. Penulisan tag pembuka diapit oleh kurung siku. Sedangkan tag penutup juga sama diapit oleh kurung siku namun ditambahkan slash (garis miring) di depan nama tag tersebut.

<tag_pembuka>konten yang ditampilkan</tag_penutup>

Berikut ini contoh penerapannya untuk membuat tulisan tebal:

ini adalah tulisan tebal

Maka jika dijalankan di aplikasi web browser akan menjadi:

ini adalah tulisan tebal

Penjelasan:

adalah tag pembuka
adalah tag penutup
Teks “ini adalah tulisan tebal” merupakan konten yang akan ditebalkan.

Tidak semua tag yang ada pada HTML membutuhkan penutup. Terdapat beberapa tag yang cara penulisannya tanpa penutup yang dinamakan self-closing tags. Namun, dalam penulisannya dianjurkan untuk menambahkan slash sebelum penutup kurung siku. Misalnya: , <hr />, <img />, <input />, <embed />.

Daftar Kode HTML Lengkap (Tag HTML dan Fungsinya)

Kode Tag HTML	Fungsi
<!DOCTYPE>	Menentukan jenis dokumen
<html>	Pembuka dan penutup HTML
<head>	Menentukan informasi halaman
<title>	Menentukan judul halaman
<body>	Tempat menampilkan konten
<h1>..</h6>	Membuat judul teks
<p>	Menentukan paragraf
<hr>	Mebuat garis horizontal
<!–…–>	Membuat komentar
<b>	Menebalkan teks
<blockquote>	Menentukan kutipan dari sumber lain
<code>	Menentukan kode komputer
<em>	Membuat teks miring atau ditekankan
<i>	Membuat teks miring
<pre>	Menentukan teks diformat
<q>	Menentukan kutipan pendek
<s>	Mencoret teks
<small>	Menentukan teks yang lebih kecil
<strong>	Membuat teks tebal atau teks penting
<sub>	Menentukan teks langganan
<sup>	Menentukan teks superscript
<time>	Menentukan tanggal / waktu
<u>	Membuat teks garis bawah
<form>	Menentukan formulir HTML
<input>	Membuat form input
<textarea>	Membuat form teks yang lebih besar
<button>	Menentukan tombol yang dapat diklik
<select>	Menentukan daftar drop-down
<option>	Menentukan opsi dalam daftar drop-down
<label>	Menentukan label untuk elemen input
<iframe>	Menentukan bingkai inline
<img>	Menentukan gambar
<canvas>	Digunakan untuk menggambar grafik
<figure>	Menentukan konten mandiri
<svg>	Menentukan wadah untuk grafik SVG
<audio>	Menentukan konten suara
<source>	Menentukan banyak sumber multimedia
<a>	Mendefinisikan hyperlink
<link>	Menentukan hubungan antara dokumen dan sumber daya eksternal
<nav>	Menentukan link navigasi
<ul>	Menentukan daftar tidak terurut
<ol>	Menentukan daftar yang terurut
<li>	Menentukan item pada list
<dl>	Menentukan daftar deskripsi
<dt>	Menentukan istilah / nama dalam daftar deskripsi
<dd>	Menentukan deskripsi istilah / nama dalam daftar deskripsi
<table>	Menentukan tabel
<th>	Menentukan header dalam tabel
<tr>	Menentukan baris dalam tabel
<td>	Menentukan sel atau kotak dalam tabel
<thead>	Mengelompokkan konten header dalam sebuah tabel
<tbody>	Mengelompokkan konten isi dalam tabel
<tfoot>	Mengelompokkan konten footer dalam sebuah tabel
<style>	Menentukan informasi gaya untuk dokumen
<div>	Membagi halaman dalam blok
<span>	Membagi halaman dalam blok kecil
<header>	Menentukan header untuk bagian halaman
<footer>	Menentukan footer untuk bagian halaman
<main>	Menentukan konten utama halaman
<section>	Menentukan bagian dalam halaman
<artikel>	Menentukan artikel
<aside>	Menentukan konten selain dari konten halaman
<meta>	Menentukan metadata halaman
<script>	Menentukan skrip
<noscript>	Menentukan konten alternatif untuk pengguna yang tidak mendukung skrip
<embed>	Menentukan wadah untuk aplikasi eksternal
<object>	Menentukan objek yang disematkan
<caption>	Menentukan keterangan tabel
<cite>	Menentukan judul sebuah karya
<abbr>	Menentukan singkatan atau akronim

Kumpulan tag HTML di atas dan contohnya akan kita pelajari satu-persatu sesuai fungsinya pada pembahasan nanti. Setelah memahami tag pada HTML selanjutnya kita akan membahas hal yang dibentuk oleh tag yaitu elemen. Pelajari juga materi tentang cara membuat tabel di html.

Apa itu Elemen HTML?

Elemen HTML adalah semua kode HTML yang dimulai dari tag pembuka hingga tag penutup.

Jenis Elemen HTML Berdasarkan Cara Penulisannya

Terdapat 2 jenis elemen yaitu elemen normal dan elemen tunggal atau elemen kosong (void element).

1. Elemen Normal

Cara penulisan untuk elemen normal adalah dimulai dari tag pembuka dan diakhiri dengan tag penutup.

<nama_tag>isi konten</nama_tag>

Contoh penerapan:

konten dengan tulisan tebal

Penjelasan: Kode HTML diatas adalah contoh elemen untuk membuat tulisan tebal dimulai dari tag pembuka yaitu dan diakhiri dengan tag penutup yaitu yang mengapit kontennya yaitu “konten dengan tulisan tebal“.

2. Elemen Tunggal atau Elemen Kosong

Elemen tunggal/elemen kosong yang biasa disebut dengan void element memiliki cara penulisan yang berbeda. Pada jenis elemen ini tidak ada tag penutup. Sebagai gantinya, ditambahkan slash pada akhir tag pembuka.

Contoh:

Penjelasan: Kode diatas adalah untuk menampilkan gambar. Tag yang digunakan adalah tag img dengan atribut src untuk menentukan letak file gambarnya. Kemudian ditambahkan tanda slash / setelahnya. Simak juga struktur dasar html.

Jenis Elemen HTML Berdasarkan Tampilannya

Terdapat 2 jenis elemen jika dilihat dari tampilan pada web browser yaitu block-level elemen dan inline elemen.

1. Block-level Elemen

Block-level elemen tampilannya selalu dimulai dari baris baru. Secara default, elemen ini tidak akan berada disamping elemen sebelumnya tapi akan berada di bawah elemen sebelumnya. Contohnya elemen <h1> dan .

teks biasa. <h1>elemen pertama.</h1> elemen kedua.

Tampilan di browser:

Penjelasan: Elemen <h1> termasuk jenis block-level jadi akan dimulai dengan baris baru dibawah teks “teks biasa”. Begitu juga elemen akan dimulai dengan baris baru karena juga termasuk jenis block-level.

2. Inline Elemen

Inline elemen artinya elemen sebaris. Elemen ini tidak dimulai dengan baris baru tetapi akan melanjutkan disamping elemen lain yang juga inline elemen. Contohnya adalah elemen dan .

teks biasa. elemen pertama. elemen kedua.

Tampilan di browser:

Penjelasan: Elemen adalah jenis inline elemen. Jadi akan ditampilkan disamping “teks biasa”. Begitu juga elemen karena juga inline elemen maka juga ditampilkan disamping .

Dalam membuat halaman web tentunya kita tidak hanya menggunakan 1 elemen. Kita dapat menumpuk dan mengkolaborasikan beberapa elemen agar menjadi halaman web yang kita inginkan. Untuk itu selanjutnya kita perlu memahami tentang elemen bersarang (nested element).

Elemen Bersarang atau Nested Element

Elemen bersarang atau biasa juga disebut dengan nested element adalah elemen yang didalamnya terdapat elemen lain. Dimana penulisannya harus terstruktur dan tidak boleh tumpang tindih.

<nama_tag_1> <nama_tag_2>konten</nama_tag_2> </nama_tag_1>

Sesuai format diatas, tag yang paling dalam harus ditutup terlebih dahulu baru kemudian menutup tag diatasnya. Berikut ini contoh penerapan yang benar.

<html> <body> Konten halaman </body> </html>

Penjelasan: Kode diatas dimulai dengan tag html, didalamnya terdapat tag body. Di dalam tag body terdapat tag p untuk membuat paragraf.

Agar lebih jelas berikut ini contoh penulisan elemen bersarang yang salah.

<html> <body> Konten halaman </html> </body>

Penjelasan: Kesalahan pada contoh diatas adalah pada tata letak tag penutup html dan p. Harusnya tag p ditutup terlebih dahulu, kemudian menutup body lalu menutup tag html sesuai dengan contoh yang benar sebelumnya. Simak juga materi cara membuat iframe di html.

Setelah membahas elemen selanjutnya kita akan membahas tentang informasi tambahan untuk elemen yaitu atribut. Sebernarnya apa itu atribut?

Apa itu Atribut HTML?

Atribut HTML adalah informasi tambahan yang diberikan untuk elemen yang dituliskan pada tag pembuka. Cara penulisannya adalah nama_atribut=”value_atribut”.

Satu elemen bisa ditambahkan beberapa atribut sekaligus. Ingat, value_atribut harus diapit dengan petik ganda atau bisa juga petik tunggal.

Contohnya:

<a href="https://www.google.com/" title="kunjungi Google">Google</a>

Penjelasan: Contoh diatas adalah sebuah elemen HTML link ke Google. Pada tag pembuka terdapat tambahan 2 atribut yaitu href dan title. href digunakan untuk memberi informasi tambahan alamat url Google sedangkan title gunakan untuk menambahkan informasi tambahan tooltip saat mouse diarahkan ke link tersebut.

Terdapat 2 jenis atribut pada HTML yaitu atribut global dan atribut khusus. Atribut global dapat digunakan pada semua tag atau elemen HTML. Sedangkan atribut khusus hanya dapat digunakan untuk tag yang disupport atribut tersebut. Berikut ini atribut global yang ada di HTML.

Daftar Atribut HTML Lengkap dan Fungsinya

Atribut	Fungsinya
id	Menentukan id unik elemen.
class	Menentukan nama class yang digunakan pada CSS.
style	Menentukan gaya CSS secara inline (langsung).
title	Menentukan tooltip atau teks saat mouse berada di atas elemen tersebut.
accesskey	Menentukan tombol pintas untuk mengaktifkan / memfokuskan elemen.
contenteditable	Menentukan apakah konten elemen dapat diedit atau tidak.
data-*	Menyimpan data khusus pribadi ke halaman atau aplikasi.
dir	Menentukan arah teks untuk konten dalam suatu elemen.
draggable	Menentukan apakah suatu elemen dapat diseret atau tidak.
dropzone	Menentukan zona drop pada aksi drag and drop.
hidden	Menentukan bahwa suatu elemen tidak ditampilkan.
lang	Menentukan bahasa konten elemen.
spellcheck	Menentukan apakah elemen harus diperiksa ejaan dan tata bahasanya atau tidak.
tabindex	Menentukan urutan tab dari suatu elemen.
translate	Menentukan apakah konten elemen harus diterjemahkan atau tidak.

Atribut-atribut diatas hanyalah atribut global. Untuk atribut khusus yang lebih lengkap beserta fungsi dan cara penggunaannya akan kita pelajari pada materi tutorial HTML masing-masing tag beserta atributnya. Jika ada yang perlu ditanyakan, silahkan kirim di kolom komentar.

Web developer yang juga suka dengan dunia sysadmin. Pernah belajar Teknik Informatika di Indonesia.