Beranda / html / Komputer / Pemrograman / Web

Elemen HTML | Tutorial HTML 4

Oleh Sopyan Posting Komentar
Assalamualaikum sobat, di artikel kali ini kami akan membagikan tutorial tentang elemen HTML, berikut adalah tutorialnya.

Elemen HTML

Apa itu Elemen HTML ? Sebuah elemen HTML didefinisikan oleh tag awal, beberapa konten dan tag akhir. 

Tapi ada juga elemen HTML yang tidak memiliki konten dan juga tag akhir (misalnya tag <br>), tag semacam ini disebut sebagai elemen kosong.

Berikut adalah beberapa contoh elemen HTML :

<h1>Ini adalah judul pertama </h1>
<p>Ini adalah paragraf</p>

Tag awal Konten elemen Tag akhir Deskripsi
<h1> Ini adalah heading pertama </h1> Ini adalah tag heading pertama
<p> Ini adalah paragraf </p> ini adalah tag paragraf
<br> tidak punya konten tidak punya konten tag ini digunakan untuk membuat baris baru

Elemen HTML Bersarang 

Elemen HTML dapat dibuat bersarang (artinya elemen HTML dapat mengandung elemen HTML lain di dalamnya).

Semua dokumen HTML terdiri dari beberapa elemen bersarang.

Contohnya sebagai berikut, di dalam contoh berikut terdapat 4 elemen HTML (<html>,<body>,<h1> dan <p>).

Contoh Program 1 : Dokumen HTML Sederhana

<!DOCTYPE html>
<html>
        <body>
                <h1>Judul Pertamaku</h1>
                <p>Paragraf Pertamaku</p>
        </body>
</html>

Hasil Program 1


dokumen html sederhana

Penjelasan Program 1

program html sederhana
Pada kode program diatas <html> adalah elemen root dan mendefinisikan seluruh elemen HTML.

Di dalam elemen <html>...</html> terdapat elemen html lainnya yaitu <body>...</body> yang merupakan tubuh dari dokumen HTML yang akan ditampilkan di browser.

Di dalam elemen <body>...</body> terdapat elemen <h1> untuk membuat judul atau heading pertama dan elemen <p> untuk membuat sebuah paragraf.

Jangan Pernah Melewatkan Tag Akhir

Meskipun beberapa elemen HTML akan tampil secara benar meskipun kita lupa menambahkan tag akhir. Tapi kita tidak boleh bergantung pada hal ini, karena error dan hasil yang tidak terduga dapat terjadi jika kita lupa menambahkan tag akhir.

Contoh Program 2 : Uji Coba Tanpa Tag Akhir


<!DOCTYPE html>
<html>
<body> 

<p>Ini adalah paragraf.
<p>Ini adalah paragraf lainnya.

</body>
</html>

Hasil Program 2

html tanpa tag akhir

Penjelasan Program 2


program html tanpa tag akhir

Di baris 5 dan baris 6 kita menggunakan tag <p> tanpa menggunakan tag akhir </p>, meskipun hasilnya tidak membuat kesalahan tapi kita harus membiasakan diri mengetik tag akhirnya agar hasil dari program sesuai dengan keinginan kita.

Elemen HTML Kosong

Elemen kosong adalah elemen HTML yang tidak memiliki konten dan tag akhir. Salah satu contohnya adalah tag <br>.

Tag <br> digunakan untuk membuat sebuah baris baru.

Contoh Program 3 : Menggunakan Tag br

<!DOCTYPE html>
<html>
        <body>
                
                <p>Ini adalah paragraf <br> dengan baris baru</p>
                
        </body>
</html>

Hasil Program 3

hasil program tag br

Penjelasan Program 3

contoh program tag br
Pada baris 5 kita menggunakan tag <br> yang akan memberikan baris baru pada teks paragraf yang kita buat.

HTML Tidak Case Sensitive

HTML bukanlah kode yang case sensitive, yang artinya meskipun kita menggunakan huruf kapital ataupun huruf kecil untuk menulis kode-kodenya, hal tersebut tidak akan membuat dokumen yang kita buat menjadi error. Misalnya kita menulis <p> ataupun <P>. Hal itu tidaklah masalah.

Namun kita direkomendasikan untuk mengetik kode dengan huruf kecil karena kebanyakan orang menggunakan huruf kecil, dan untuk dokumen yang lebih ketat seperti XHTML ditulis menggunakan huruf kecil.

Referensi Tag HTML

Berikut adalah referensi tag HTML yang telah kita pelajari.

Tag awal Deskripsi
<!DOCTYPE> Mendefinisikan tipe dari dokumen
<html> Mendefinisikan akar dari dokumen HTML
<body> Tubuh dari dokumen HTML yang tampil di browser
<h1> hingga h6 Untuk membuat judul atau heading
<p> ini adalah tag paragraf
<a> Mendefinisikan sebuah hyperlink
<img> Mendefinisikan sebuah gambar
<br> tag ini digunakan untuk membuat baris baru

Itulah tutorial mengenai elemen HTML, semoga artikel kali ini dapat membantu kalian lebih memahami mengenai elemen HTML. Sampai jumpa di artikel selanjutnya.

Posting Komentar untuk "Elemen HTML | Tutorial HTML 4"