Pada artikel sebelumnya, kita telah membahas tentang editor teks terbaik yang terkait dengan artikel ini. Sekarang kita akan membahas apa itu tag, elemen, dan atribut serta contohnya dalam HTML
Tag, elemen, dan atribut dalam HTML merupakan komponen dasar HTML dalam membuat website. Itu sebabnya Anda perlu mempelajari ketiga hal ini jika Anda ingin mempelajari HTML lebih lanjut
Daftar isi
Apa itu Tag HTML?
Pengertian tag HTML adalah tanda pada HTML yang berfungsi untuk mengirimkan perintah-perintah tertentu yang akan dilakukan oleh web browser. Urutan yang dikirim juga berbeda-beda, tergantung isi tag yang diketik
Tag itu diapit dengan kurung siku (). Tag HTML ada yang memiliki penutup, ada yang hanya berupa pembuka.
Namun untuk tag yang tidak memiliki cap, sangat disarankan untuk menambahkan garis miring di akhir nama tag. Itu karena jika satu tag (tanpa penutup) tidak diberi garis miring, itu tidak akan dianggap sebagai tag di XHTML
Contoh tag yang memiliki penutup
Huruf tebal
Tautkan ke halaman lain
Judul
dll.
Contoh tag yang tidak memiliki cap
dll.
Contoh cara menggunakan tag yang salah
<b>Ini huruf tebal<b/> <i>Ini huruf miring<i/>Kesalahannya ada di sampulnya, seharusnya seperti ini
<b>Ini huruf tebal</b> <i>Ini huruf miring</i>_Tag ini bisa diartikan sebagai perintah dalam bahasa markup HTML. Untuk sebab itu penulisannya harus benar sesuai dengan yang sebenarnya. Tag dalam HTML bersifat in-case sensitive. Itu artinya, tag dengan tag akan dianggap sama.
Setelah membahas apa itu tag dalam HTML, sekarang kita akan membahas pengertian elemen dan contohnya dalam HTML
Apa itu Elemen?
Jika sebelumnya kita belajar tentang tag, maka sekarang kita belajar tentang elemen. Elemen adalah karakter yang ada di dalam tag (dari tag pembuka hingga tag penutup). Misalnya seperti ini
<b>Makinrajin</b>Nah, untuk tulisan “Makinrajin” itu termasuk ke dalam element . Intinya, apapun yang berada di dalam sebuah tag pembuka dan tag penutup itulah yang dinamakan dengan element.
Hubungan antar elemen dalam HTML terbagi menjadi 5 jenis, apa saja jenisnya?
1. Elemen Induk
Dilihat dari namanya saja, dapat diketahui bahwa elemen induk adalah elemen yang menjadi 'induk' dari elemen yang berada di dalam elemen tersebut. Elemen induk adalah elemen yang memiliki elemen lain di dalamnya tepat pada satu level. Untuk lebih jelasnya, Anda dapat melihat kode program di bawah ini
<html> <head> <title>Judul Makinrajin</title> </head> <body> <ul> <li>Pertama</li> <li>Kedua</li> </ul> </body> </html>Dalam kasus di atas, tag adalah parent element dari tag . Tag juga merupakan parent element dari tag
- . Tetapi, perlu diingat bahwa tag bukan merupakan parent element dari tag
- . Itu karena, tag bukan ‘orang tua / parent’ dari tag
- , tetapi ‘kakek’nya tag
- .
Yang menjadi parent element dari tag
- adalah tag
- sendiri. Sekarang Anda sudah mengerti konsep parent element ? Kalau iya sekarang kita lanjut ke child element.
- tetap bukan child element dari tag , melainkan dari tag
- . Karena tag
- bukan anaknya tag .
3. Elemen Saudara
Kata saudara kandung memiliki arti saudara kandung. Jadi, yang termasuk dalam unsur saudara kandung adalah unsur yang memiliki saudara kandung (satu ayah dan satu ibu) atau dengan kata lain anak kandung dari ayah dan ibu tersebut. Anda dapat melihat contoh kode program di bawah ini
<html> <head> <title>Judul Makinrajin</title> </head> <body> <ul> <li>Pertama</li> <li>Kedua</li> </ul> <ol> <li>Satu</li> <li>Dua</li> </ol> </body> </html>Masih ingat tadi, sibling adalah saudara kandung. Jadi, penerapan di kode program HTML adalah tag
- dan tag HTML
- dan apapun yang terletak di dalam tag itu sendiri. Begitu juga dengan tag yang merupakan ancestor element dari tag . Sudah paham kan ?
5. Elemen Keturunan
Keturunan berarti keturunan. Jadi, maksudnya adalah suatu unsur dapat dikatakan sebagai unsur keturunan bila unsur tersebut termasuk dalam keturunan unsur lain. Agar lebih jelas, Anda dapat mengamati sintaks di bawah ini
<html> <head> <title>Judul Makinrajin</title> </head> <body> <ul> <li>Pertama</li> <li>Kedua</li> </ul> <ol> <li><strong>Satu</strong></li> <li>Dua</li> </ol> </body> </html>Contoh kode program di atas agak saya ubah dari contoh sebelumnya supaya Anda bisa paham ketika diubah polanya. Dalam contoh sintaks di atas, tag merupakan descendant element dari tag
- ,
- , , dan . Perlu diingat, tag bukan termasuk descendant element dari tag
- dan ya. Karena tag HTML tidak berada di dalam tag
- maupun .
Apa itu Atribut dalam HTML?
Sebenarnya, apa arti dari atribut itu? . Kunci dari atributnya adalah name=”value”. Jika terdapat name=”value” pada sebuah tag, maka dapat dikatakan bahwa tag tersebut memiliki atribut
Contoh penggunaan atribut
<hr width="100%"/> _Nah, untuk width=”100% itu adalah atribut dari tag yang artinya akan diberi width (lebar) sebanyak 100%. Width adalah name nya dan 100% adalah valuenya. Ketika Anda sudah menggunakan css external, maka Anda akan sering menggunakan atribut id dan class. Contoh :
<button class="tombol-merah"></button> _Itu adalah contoh penggunaan class dengan memanggil class red-button yang sudah Anda buat sebelumnya di CSS. Kami telah menyiapkan panduan belajar CSS untuk Anda agar Anda dapat mendesain website dengan baik
Sekarang Anda telah selesai mempelajari tentang apa itu tag, elemen, dan atribut dalam HTML. Sekarang saatnya bagi Anda untuk melanjutkan bab pembelajaran HTML berikutnya
Apa yang dimaksud dengan tag HTML dan apa fungsinya?
Apa itu Tag HTML? . Urutan yang dikirim juga berbeda-beda, tergantung isi tag yang diketik. Tag diapit tanda kurung siku ( ). sebuah tanda yang ada pada HTML yang berfungsi untuk mengirimkan perintah tertentu yang akan dilakukan oleh web browser. Perintah yang dikirimkan juga berbeda-beda, tergantung isi dari tag yang diketikkan. Tag itu diapit dengan kurung siku ( ).Apa itu tag HTML?
Berikut daftar tag yang harus ada di HTML. .— untuk deklarasi tipe dokumen;— tag utama dalam HTML;— untuk bagian kepala dokumen;— untuk judul web;— untuk bagian tubuh dokumenBerapa banyak fungsi tag?
Tandai untuk Membuat Paragraf . Contoh. Misalkan kita ingin menampilkan sebuah puisi, kita bisa melakukannya seperti ini dengan tag. Meskipun dalam kode HTML kami telah menulis setiap byte puisi di baris baru.
untuk membuat baris baru. Contoh: Misalkan kita ingin menampilkan pantun, bisa saja kita buat seperti ini di dengan tag. Meskipun pada kode HTML kita sudah menulis tiap bait pantun dalam baris yang baru.
Apa fungsi tag judul HTML?
Tag Judul adalah elemen HTML yang digunakan untuk membuat judul halaman web . Tag Judul digunakan oleh mesin pencari sebagai judul daftar pencarian, yang digarisbawahi dengan hyperlink biru. - ,
- adalah sibling element. Karena mereka berada langsung di dalam tag . Berbeda dengan tag
- dengan tag
- , mereka bukan sibling element tetapi ‘orang tua’ dengan ‘anaknya’.
Jadi Anda sudah memahami hubungan antar elemen dalam HTML?
4. Elemen Leluhur
Sekarang saya bertanya kepada Anda, apa yang dimaksud dengan leluhur? . Jadi kalau di dalam tag HTML, ancestor adalah elemen yang mengandung elemen lain di dalam elemen tersebut. Lihat saja contoh kode programnya
<html> <head> <title>Judul Makinrajin</title> </head> <body> <ul> <li>Pertama</li> <li>Kedua</li> </ul> <ol> <li>Satu</li> <li>Dua</li> </ol> </body> </html>Jadi, dalam contoh di atas bisa diartikan bahwa tag merupakan ancestor dari tag , , ,
- ,
- ,
- dan apapun yang terletak di dalam tag itu sendiri. Begitu juga dengan tag yang merupakan ancestor element dari tag . Sudah paham kan ?
- bukan anaknya tag .
2. Elemen Anak
Elemen anak adalah kebalikan dari elemen induk. Jika elemen induk adalah 'induk' langsung dari suatu elemen, maka elemen anak adalah 'anak' langsung dari suatu elemen
<html> <head> <title>Judul Makinrajin</title> </head> <body> <ul> <li>Pertama</li> <li>Kedua</li> </ul> </body> </html>Jika dalam parent element, tag adalah parent element dari tag , maka sekarang terbalik. Tag adalah child element dari tag . Begitu juga dengan tag lain. Tetapi, tag
- tetap bukan child element dari tag , melainkan dari tag