Saat Anda membangun situs web baru, penting untuk memiliki fondasi awal yang baik. Pada artikel ini, saya akan menjelaskan apa itu boilerplate HTML 5 dan cara membuat template dasar untuk digunakan dalam proyek Anda
Apa itu boilerplate HTML 5?
Berdasarkan ,
kode boilerplate atau hanya boilerplate adalah bagian dari kode yang diulang di banyak tempat dengan sedikit atau tanpa variasi
Boilerplate dalam HTML adalah template yang akan Anda tambahkan di awal proyek Anda. Anda harus menambahkan boilerplate ini ke semua halaman HTML Anda
Contoh boilerplate HTML 5
Mari kita lihat contoh dasar
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML 5 Boilerplate</title> <link rel="stylesheet" href="style.css"> </head> <body> <script src="index.js"></script> </body> </html>Apa itu doctype dalam HTML?
Baris pertama dalam kode HTML Anda harus berupa deklarasi doctype. Sebuah doctype memberi tahu browser versi HTML apa halaman itu ditulis
<!DOCTYPE html>_Jika Anda lupa menyertakan baris kode ini di file Anda, maka beberapa tag HTML 5 seperti <!DOCTYPE html>0, <!DOCTYPE html>1, dan <!DOCTYPE html>2 mungkin tidak didukung oleh browser
Apa itu elemen root HTML?
Tag <!DOCTYPE html>3 adalah elemen tingkat atas dari file HTML. Anda akan menumpuk tag <!DOCTYPE html>4 dan <!DOCTYPE html>5 di dalamnya
<!DOCTYPE html> <html lang="en"> <head></head> <body></body> </html>_Atribut <!DOCTYPE html>6 di dalam tag pembuka <!DOCTYPE html>3 menetapkan bahasa untuk halaman. Sebaiknya sertakan juga untuk alasan aksesibilitas, karena pembaca layar akan tahu cara melafalkan teks dengan benar
Apa itu tag kepala dalam HTML?
Tag <!DOCTYPE html>4 berisi informasi yang diproses oleh mesin. Di dalam tag <!DOCTYPE html>_4, Anda akan menyarangkan metadata yang merupakan data yang menjelaskan dokumen ke mesin
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML 5 Boilerplate</title> <link rel="stylesheet" href="style.css"> </head>Apa itu pengkodean karakter UTF-8?
UTF-8 adalah pengkodean karakter standar yang harus Anda gunakan di halaman web Anda. Ini biasanya akan menjadi tag <!DOCTYPE html> <html lang="en"> <head></head> <body></body> </html>_0 pertama yang ditampilkan di elemen <!DOCTYPE html>4
<meta charset="UTF-8">Menurut Konsorsium World Wide Web,
Pengkodean berbasis Unicode seperti UTF-8 dapat mendukung banyak bahasa dan dapat menampung halaman dan formulir dalam campuran apa pun dari bahasa tersebut. Penggunaannya juga meniadakan kebutuhan akan logika sisi server untuk secara individual menentukan pengkodean karakter untuk setiap halaman yang disajikan atau setiap pengiriman formulir yang masuk
Apa tag meta viewport dalam HTML?
Tag ini merender lebar halaman menjadi lebar ukuran layar perangkat. Jika Anda memiliki perangkat seluler dengan lebar 600px, jendela browser juga akan memiliki lebar 600px
Skala awal mengontrol tingkat zoom. Nilai 1 untuk skala awal mencegah zoom default oleh browser
<meta name="viewport" content="width=device-width, initial-scale=1.0">Apa yang dimaksud dengan Kompatibel dengan X-UA?
Tag <!DOCTYPE html> <html lang="en"> <head></head> <body></body> </html>_0 ini menentukan mode dokumen untuk Internet Explorer. <!DOCTYPE html> <html lang="en"> <head></head> <body></body> </html>3 adalah mode tertinggi yang didukung
<meta http-equiv="X-UA-Compatible" content="ie=edge">Apa itu tag judul HTML?
Tag <!DOCTYPE html> <html lang="en"> <head></head> <body></body> </html>4 adalah judul halaman web. Teks ini ditampilkan di bilah judul browser
<title>HTML 5 Boilerplate</title>lembar gaya CSS
Kode ini akan menautkan CSS khusus Anda ke halaman HTML. <!DOCTYPE html> <html lang="en"> <head></head> <body></body> </html>5 mendefinisikan hubungan antara file HTML dan stylesheet eksternal.
Tag skrip dalam HTML
Tag skrip eksternal akan ditempatkan tepat sebelum tag body penutup. Di sinilah Anda dapat menautkan kode JavaScript eksternal Anda
<script src="index.js"></script>Kesimpulan
Anda harus menambahkan boilerplate HTML 5 ke setiap halaman HTML Anda. Kode awal ini berisi informasi penting seperti doctype, metadata, stylesheet eksternal, dan tag skrip
IKLAN
IKLAN
IKLAN
Saya seorang musisi dan programmer
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai