Bagi pemula yang ingin berkecimpung di dunia pengembangan web mungkin saja dihadapkan dengan kompleksitas materi yang harus dipelajari. Kamukah salah satunya? Kalau iya, kamu memulai di artikel yang tepat, karena HTML adalah salah satu bahasa yang harus kamu kuasai sebagai web developer. 

Melalui artikel ini, kita akan membahas secara mendalam mengenai penulisan script code pengkodean atau coding  HTML.

Apa itu HTML?

HTML, singkatan dari HyperText Markup Language, adalah bahasa mark up pemrograman yang digunakan untuk membuat struktur dasar sebuah halaman web. HTML berfungsi sebagai pondasi atau kerangka dari setiap situs web yang kamu kunjungi.

Mengapa HTML Penting?

Tanpa HTML, halaman web akan tampak kosong dan tidak terstruktur. Bayangkan jika sebuah bangunan tanpa pondasi, tentu tidak akan kuat dan kokoh, bukan? Begitu juga dengan halaman web, HTML adalah pondasi yang membuat halaman web dapat "berdiri" dengan struktur yang rapi.

Sintaks Dasar untuk Coding HTML

Sebelum lanjut lebih jauh, mari kita meluruskan bahwa istilah “coding HTML” sebenarnya tidaklah tepat. Alasannya, HTML bukan bahasa pemrograman sehingga tidak melibatkan konsep pemrograman tradisional seperti variabel, loop, dan conditional statement.

Meskipun demikian, istilah "coding HTML" sering digunakan secara informal untuk merujuk pada proses pembuatan dan penulisan kode, snippet, atau tag HTML untuk merancang dan menyusun halaman web. 

Untuk menuliskan kode script HTML, sintaks atau aturan penulisan menjadi konsep dasar yang harus dipahami semua web developer. Sintaks HTML berisi serangkaian elemen atau tag, yang digunakan untuk mendefinisikan jenis konten. 

Tag biasanya berpasangan dan mengandung konten di antara tag pembuka dan penutup. Misalnya, < p > adalah tag pembuka dan < /p > adalah tag penutup. Konten yang berada di antara kedua tag ini akan ditampilkan sebagai paragraf di halaman web. 

Menutup setiap tag HTML adalah bagian penting dari sintaks HTML. Selain itu, ada beberapa aturan penulisan dalam script code HTML yang perlu diperhatikan:

• Memberikan atribut ‘alt’ elemen < img >

Atribut ini memberikan deskripsi tambahan untuk elemen-elemen gambar dan berfungsi penting untuk aksesibilitas website. Semisal, pengguna dengan keterbatasan penglihatan atau yang menggunakan text-to-speech/voice reading extension, tetap bisa mendengar deskripsi alternatif yang diberikan melalui atribut ‘alt’ saat membaca halaman web.

• Susun HTML sesuai hierarkinya

Elemen HTML harus diletakkan dalam hierarki yang benar dan terstruktur dengan baik. Artinya, elemen yang dibuka harus ditutup sebelum membuka elemen lainnya di dalamnya. 

Misalnya, jika ada elemen < div > yang dibuka, maka elemen tersebut harus ditutup sebelum membuka elemen baru di baru di dalamnya. Ini membantu menjaga struktur yang jelas dan memastikan setiap elemen berada pada tempat yang tepat dalam struktur halaman.

Text Editor untuk Penulisan Script Code HTML

Dalam dunia pengembangan web, HTML editor yang kamu gunakan memengaruhi pengalaman selama membangun halaman web. VS Code adalah pilihan populer di antara developer karena fitur-fiturnya yang kaya dan integrasi alat pengembangan lanjutan. Dengan dukungan ekstensi dan antarmuka yang user-friendly. VS Code juga memudahkan penulisan dan debug kode. 

Di sisi lain, Notepad adalah editor teks sederhana yang ada di hampir setiap komputer Windows. Meskipun tidak memiliki fitur khusus untuk pengembangan, Notepad tetap menjadi pilihan bagi mereka yang ingin memulai tanpa kerumitan. Kedua opsi ini menawarkan pendekatan yang berbeda, jadi pilihlah sesuai dengan preferensi dan kebutuhanmu.

Contoh Penulisan Script Code HTML

Berikut contoh penulisan dan tampilannya di browser untuk website fashion e-commerce rekaan bernama Ari&Style.

Script:

Dengan kode HTML di atas, berikut contoh salah satu tampilan output-nya di browser:

‍

‍

Kode di atas menjelaskan beberapa elemen dasar lainnya dalam HTML:

• < header >: Biasanya berisi judul situs dan navigasi utama.
• < nav >: Digunakan untuk blok navigasi, biasanya berisi daftar link.
• < ul >: Mendefinisikan daftar tidak berurutan, di mana setiap item daftar ditandai dengan bullet.
• < li >: Menentukan item dalam daftar.
• < a >: Membuat hyperlink.
• < footer >: Biasanya berisi informasi tentang penulis, hak cipta, dan link ke dokumen terkait.

Berikutnya, mari berlatih dengan 20 contoh script code HTML sederhana di bawah ini untuk setiap bagian halaman website secara lebih mendetail:

#1 Membuat Judul Halaman

#2 Membuat Paragraf

#3 Membuat Tautan/Link

#4 Membuat Gambar

#5 Membuat Bullet List

#6 Membuat Heading Berbeda

#7 Membuat Teks Bold

#8 Membuat Select Dropdown

#9 Menyisipkan Video YouTube

#10 Membuat Tabel Sederhana

#11 Mengatur Subscript

#12 Mengatur Superscript

#13 Menambahkan CTA Button

#14 Membuat Formulir

#15 Mengatur Font

#16 Mengatur Text Size

#17 Mengatur Text Color

#18 Meng-highlight Text

#19 Menambahkan Quote

#20 Membuat Cross-through Text

Peran HTML dalam Web Development

Peran HTML dalam front-end development bukan hanya sebatas membangun struktur dan markup konten. Meskipun CSS bertanggung jawab atas tampilan dan styling, dan JavaScript untuk interaktivitas dan perilaku dinamis, HTML tetap menjadi dasar dari semua itu. 

HTML memberikan struktur, makna, dan tata letak yang menjadi landasan bagi komponen-komponen lain dalam pengembangan front-end.

Dalam konteks front-end development, HTML bekerja sama erat dengan CSS dan JavaScript untuk menciptakan pengalaman pengguna yang kaya dan interaktif di halaman web. Peran HTML adalah membangun fondasi dan kerangka kerja yang memungkinkan CSS dan JavaScript berfungsi dengan baik. 

Penutup

Dengan pemahaman yang baik tentang HTML, seorang web developer dapat menciptakan tata letak web yang terstruktur, aksesibilitas yang lebih baik, dan membangun dasar yang kokoh untuk pengembangan front-end yang sukses. 

Dalam pekerjaan sehari-hari seorang web developer, HTML akan selalu menjadi elemen kunci dalam membangun user experience yang baik dan memastikan bahwa konten dapat diakses oleh semua pengguna.