Pembelajaran HTML 05 Tata Cara Penulisan Yang Benar

Beberapa hari lalu, saya sudah memosting mengenai dasar-dasar dan menejelaskan bahwa html ini seperti sebuah pohon yang terstruktur, kamu bisa membacanya Pembelajaran HTML 04 Tree Khusus Pemula 2022. Nah pada artikel kali ini akan membahas aturan penulisan dasar html 5 dan perlu di catat ya bahwa html 5 dan xhtml sangatlah berbeda, bagi kamu yang sudah pernah belajar xhtml pasti sudah merasakan perbedaannya ya dari materi-materi yang saya buat sebelumnya.

Keuntungan dari html 5 ketimbang xhtml adalah flesibilitas atau mungkin mengarah ke kelonggaran dalam penulisan. Contohnya saja bahwa pada xhtml untuk penulisan tag dan atribut itu wajib menggunakan huruf kecil, sangat berbeda dengan html 5 yang bisa menggunakan huruf besar dan kecil ya. sebagai catatan xhtml itu sudah tidak diteruskan lagi atau dikembangkan lagi. Jadi dibuatlah versi terbaru yaitu html 5 untuk menutupi kekurangan xhtml.

1. Case Sensitivity HTML 5

Apa sih itu case sensitivity? case sensitivity inti dari pengertiannya sebagai pembeda penulisan huruf besar dan huruf kecil, seperti saya singgung dikalimat diatas sebelumnya.

Di dalam XHTML, seluruh tag, nama atribut, dan nilai atribut harus ditulis di dalam huruf kecil. Akan tetapi dalam HTML5, penulisan huruf besar dan huruf kecil akan dianggap sama. Baik tag maupun tag sama-sama diperbolehkan di dalam HTML5.

Oleh karena faktor kebiasaan dan agar terkesan lebih rapi, saya sangat menyarankan kamu untuk menggunakan huruf kecil pada penulisan seluruh tag, atribut, dan nilai atribut. Pengecualiannya adalah pada penulisan DTD, yakni ditulis menggunakan huruf besar: <!DOC-TYPE html>. Walaupun kita juga bisa menulisnya menggunakan huruf kecil, seperti <!doctype html>, tapi mayoritas web programmer menggunakan huruf besar untuk penulisan DTD.

2. Self Closing Tag

Beberapa tag di dalam HTML ada yang tidak memiliki pasangan tag pembuka dan tag penutup, contohnya adalah tag <meta>, dan <img>. Tag-tag ini disebut juga sebagai void element. Di dalam XHTML, tag yang berdiri sendiri harus ditutup dengan cara menambahkan tanda garis miring depan '/' (forward slash) sebelum kurung siku penutup tag.

Sebagai contoh, tag yang digunakan untuk membuat baris baru, di dalam XHTML ditulis menjadi . Penulisan seperti ini disebut juga dengan self closing tag. Di dalam HTML5, aturan ini tidak lagi diwajibkan. Penulisan maupun sama-sama dianggap "sah".

Beberapa programmer ada yang tetap menggunakan �gaya penulisan� XHTML seperti: karena terkesan lebih rapi. Tapi ada pula yang berpendapat bahwa ini adalah cara 'kuno', dan cukup menulisnya dengan: . Anda boleh mengikuti cara penulisan yang manapun, asal konsisten sepanjang kode HTML agar tidak membuat bingung

3. Tag Penutup

Hal yang sepele tapi terkadang terlupakan oleh seorang programer adalah terkadang lupa untuk menutup tag dan ada juga yang salah dalam pengejaan atau salah dalam memberikan tag penutup. Seperti yang sudah saya bahas pada materi-materi html 5 sebelumnya bahwa sebagian besar tag ditulis berpasangan, kamu harus hati-hati agar tidak lupa menulis pasangan tag penutup-nya. Kesalahan ini bisa berakibat tampilan halaman web jadi berantakan.

Sebagai contoh, tag dan tag digunakan untuk mempertegas sebuah kata atau kalimat. Tag akan ditampilkan dengan huruf miring (italic), dan tag akan ditampilkan dengan huruf tebal (bold). Kedua tag ini banyak dipakai dalam paragraf.

Jika kita "lupa" menutup tag atau tag tampilan seluruh halaman bisa jadi rusak. Sebagai contoh kamu ingin menulis kalimat ini :

"Saya ingin belajar bahasa pemrograman php, c++ dan javascript di alodospem dengan mudah"

Tapi karena kamu lupa menutup tag seperti script ini :

halo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Alodospem | Pembelajaran HTML 03 Pengenalan Struktur Dasar</title>
</head>
<body>
    <h1>Belajar HTML 05 Pemula dialodospem</h1>
    <p>
        Saya ingin belajar bahasa pemrograman <em> php, c++ dan javascript <em> di <!--- Perhatikan <em> dan <strong> tidak memiliki tag penutup -->
        <strong> alodospem <strong>dengan mudah <!--- Perhatikan <em> dan <strong> tidak memiliki tag penutup -->
    </p> 
</body>
</html>

Script halo.html tanpa tag

Hasilnya halo.html :

Gambar hasil halo.html tanpa tag

tentu saja kalimat pada hasil diatas tidak sesuai dimana yang saya inginkan adalah membuat kata "php, c++ dan javascript" menjadi miring dan membuat kata "alodospem" sajalah yang tebal tapi akibat saya tidak menutup tag dan maka semua kalimat setelah tag tersebut akan dieksekusi oleh web browser jadi oleh karena itu kamu harus menutupnya sampai dimana kata yang ingin kamu pakai saja. script yang benar adalah sebagai berikut ini :

halo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Alodospem | Pembelajaran HTML 03 Pengenalan Struktur Dasar</title>
</head>
<body>
    <h1>Belajar HTML 05 Pemula dialodospem</h1>
    <p>
        Saya ingin belajar bahasa pemrograman <em> php, c++ dan javascript </em> di <!--- Perhatikan <em> dan <strong> sudah memiliki tag penutup -->
        <strong> alodospem </strong>dengan mudah <!--- Perhatikan <em> dan <strong> sudah memiliki tag penutup -->
    </p> 
</body>
</html>

hasil dari halo.html dengan tag penutup dan :

walau hanya masalah lupa menambahkan tag penutup atau salah dalam ejaan penutupan tag pada atribut akibatnya hasil yang kita inginkan sangat jauh berbeda.

5. Whitespace

Seperti namanya yang mengandung kata "space" yang berarti spasi. Karakter spasi sendiri selalu tidak ditampilkan pada layar, spasi sendiri biasanya hanya terlihat ada jarak antar 1 kata dengan kata yang lainnya, tak hanya spasi sendiri tab dan karakter enter juga tidak terlihat dan itu disebut sebagi karakter carrage return.

Walaupun whitespace tidak akan diproses, menyisipkan spasi dan tab ke dalam kode HTML akan membuatnya lebih mudah dibaca.

Berhubungan dengan whitespace, dalam HTML terdapat tag yang bisa digunakan sebagai pengganti 'Enter'. Tag merupakan singkatan dari break, akan membuat teks setelahnya tampil pada baris baru. Tag ini merupakan salah satu tag yang sangat sering anda jumpai. Selain itu, HTML juga memiliki tag <hr> (Horizontal Line) untuk membuat garis horizontal. Berikut contoh penggunaannya.

Kesimpulan

Dengan ingin kamu sudah ada gambarkan bahwa penting sekali dalam memahami Tata Cara Penulisan HTML , walau hanya masalah kecil tapi hal tersebut dapat berdampak pada hasilnya nanti.

Pembelajaran Selanjutnya?

Wah selamat pembelajaran ke 5 mengenai pembahasan html 5 ini sudah kamu selesaikan. Wah selanjutnya apa ya? ini dia materi bocoran untuk selanjutnya :

Pembelajaran HTML 06 Cara Membuat Komentar (segera hadir)

Pembaca yang baik selalu meninggalkan jejak atau hanya sekedar reaction pada kolom komentar, agar saya sebagai penulis juga semangat dalam melanjutkan artikel ini. Berkomentarlah dengan baik dan sopan dan saling menghargai

Bagikan ke media sosial :