Dokumen HTML mencakup deklarasi jenis dokumen dan elemen root <html>. Di dalam elemen <html> terdapat bagian head dan body dokumen.
Meskipun bagian head dokumen tidak terlihat di luar kode, bagian ini sangat penting agar situs dapat berfungsi. Berisi semua informasi meta, termasuk informasi untuk hasil media sosial dan mesin telusur, ikon untuk tab browser dan pintasan layar utama seluler, serta perilaku dan presentasi konten Anda. Di bagian ini, Anda akan menemukan komponen yang, meskipun tidak
terlihat, ada di hampir setiap halaman web.
Untuk membuat situs MachineLearningWorkshop.com (MLW), mulailah dengan menyertakan komponen yang harus dianggap penting untuk setiap halaman web: jenis dokumen, bahasa manusia konten, set karakter, dan, tentu saja, judul atau nama situs atau aplikasi.
Menambahkan ke setiap dokumen HTML
Ada beberapa elemen yang penting untuk setiap halaman web. Browser merender konten jika elemen ini tidak ada, tetapi Anda harus menyertakannya.
<!DOCTYPE html>
Hal pertama dalam dokumen HTML apa pun adalah preamble. Untuk HTML, yang Anda butuhkan hanyalah
<!DOCTYPE html>. Ini terlihat seperti elemen HTML, tetapi sebenarnya adalah
node khusus yang disebut doctype. Doctype memberi tahu browser untuk menggunakan mode standar.
Jika tidak ada, browser akan menggunakan mode rendering yang berbeda yang dikenal sebagai
quirks mode.
Menyertakan doctype akan membantu mencegah quirks mode.
<html>
Elemen <html> adalah elemen root untuk dokumen HTML. Elemen ini adalah induk
dari <head> dan <body>, yang berisi semua hal dalam dokumen HTML selain
doctype. Jika dihilangkan, bahasa akan tersirat, tetapi Anda harus menyertakannya untuk mendeklarasikan bahasa dokumen.
Bahasa konten
Atribut lang
dalam tag <html> menentukan bahasa
utama dokumen. Nilainya adalah kode bahasa ISO yang diikuti dengan wilayah opsional.
Misalnya, bahasa Prancis di Kanada adalah fr-CA, sedangkan di Burkina Faso adalah
fr-BF. Deklarasi ini membantu pembaca layar, mesin telusur, dan
layanan terjemahan mengidentifikasi bahasa dokumen.
Anda dapat menggunakan atribut lang pada tag lain untuk mengidentifikasi pengecualian pada
bahasa utama dokumen. Seperti penggunaannya di head, atribut lang
dalam body tidak memiliki efek visual. Tag ini menambahkan semantik, sehingga teknologi pendukung dan layanan otomatis dapat mengidentifikasi bahasa konten tertentu.
Selain menetapkan bahasa untuk dokumen dan pengecualian pada bahasa dasar tersebut, atribut ini dapat digunakan dalam pemilih CSS.
<span lang="fr-fr">Ceci n'est pas une pipe.</span> dapat ditargetkan dengan
pemilih bahasa dan atribut
[lang|="fr"]
dan :lang(fr).
<head>
Di antara tag <html> pembuka dan penutup, kita menemukan dua turunan:
<head> dan <body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head> berisi metadata untuk situs atau aplikasi, sedangkan <body>
berisi konten yang terlihat. Bagian selanjutnya berfokus pada komponen
yang disarangkan di dalam elemen <head>.
Komponen yang diperlukan di dalam <head>
Metadata dokumen, termasuk judul dokumen, set karakter, setelan
area tampilan, deskripsi, URL dasar, link stylesheet, dan ikon, dapat ditemukan di elemen
<head>. Meskipun Anda mungkin tidak memerlukan semua fitur ini, selalu sertakan set karakter, judul, dan setelan area tampilan.
Encoding karakter
Elemen pertama dalam <head> harus berupa deklarasi encoding karakter charset. Tag ini muncul sebelum judul untuk memastikan browser dapat merender karakter dalam judul tersebut dan semua karakter dalam dokumen lainnya.
Encoding default
di sebagian besar browser adalah windows-1252, bergantung pada lokalitas. Namun, Anda harus
menggunakan UTF-8, yang memungkinkan
encoding satu hingga empat byte untuk semua karakter.
Untuk menyetel encoding karakter ke UTF-8, sertakan:
<meta charset="utf-8" />
Dengan mendeklarasikan UTF-8 (tidak peka huruf besar/kecil), Anda bahkan dapat menyertakan emoji dalam judul.
Encoding karakter diwariskan ke semua hal dalam dokumen, bahkan
<style> dan <script>. Deklarasi kecil ini berarti Anda dapat menyertakan emoji dalam
nama class dan selectorAPI. Jika Anda menggunakan emoji, pastikan untuk menggunakannya dengan cara yang meningkatkan kegunaan tanpa merusak aksesibilitas.
Judul dokumen
Setiap halaman, halaman beranda, dan semua halaman tambahan, harus memiliki judul yang unik.
Konten untuk judul dokumen, teks di antara tag pembuka dan penutup
<title>, ditampilkan di tab browser, daftar jendela yang terbuka, histori, hasil penelusuran, dan, kecuali jika didefinisikan ulang dengan
tag <meta>, di kartu media sosial.
<title>Machine Learning Workshop</title>
Metadata area tampilan
Tag meta viewport sangat penting untuk responsivitas situs, memastikan konten dirender dengan baik terlepas dari lebar area pandang. Meskipun tag meta viewport telah ada sejak tahun 2007, tag ini baru-baru ini didokumentasikan dalam spesifikasi. Tindakan ini mengontrol ukuran dan skala area tampilan, sehingga mencegah konten menyusut agar sesuai dengan layar yang lebih kecil.
<meta name="viewport" content="width=device-width" />
Kode sebelumnya berarti "buat situs responsif, dimulai dengan membuat lebar konten sama dengan lebar layar". Selain width, Anda dapat menetapkan
zoom dan skalabilitas, tetapi keduanya secara default ditetapkan ke nilai yang dapat diakses. Jika Anda ingin
menjelaskan secara eksplisit, sertakan:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Viewport adalah bagian dari audit aksesibilitas Lighthouse. Situs Anda akan lulus jika dapat diskalakan dan tidak menetapkan ukuran maksimum.
Sejauh ini, struktur file HTML kita adalah:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Konten <head> lainnya
Ada banyak hal lain yang berperan dalam <head>. Semua metadata, pada kenyataannya.
Meskipun sebagian besar elemen yang akan Anda temukan di <head> dibahas dalam modul ini, kami akan membagikan lebih banyak lagi di modul Metadata.
Anda telah melihat set karakter meta dan judul dokumen, tetapi ada banyak metadata lain di luar tag <meta> yang harus disertakan.
CSS
<head> adalah tempat Anda menyertakan gaya untuk HTML. Ada jalur pembelajaran khusus untuk CSS jika Anda ingin mempelajari gaya, tetapi Anda perlu mengetahui cara menyertakannya dalam dokumen HTML.
Ada tiga cara untuk menyertakan CSS: <link>, <style>, dan atribut style.
Dua cara utama untuk menyertakan gaya dalam file HTML adalah dengan menyertakan
resource eksternal menggunakan elemen <link> dengan atribut rel yang ditetapkan ke
stylesheet, atau menyertakan CSS langsung di head dokumen dalam
tag <style> pembuka dan penutup.
Tag <link> adalah metode yang lebih disukai untuk menyertakan stylesheet. Menautkan satu atau beberapa stylesheet eksternal bagus untuk pengalaman developer dan performa situs: Anda dapat mempertahankan CSS di satu tempat, bukan di mana-mana, dan browser dapat meng-cache file eksternal, yang berarti file tersebut tidak perlu didownload lagi setiap kali ada navigasi halaman.
Sintaksisnya adalah <link rel="stylesheet" href="styles.css">, dengan styles.css adalah nama file dan lokasi relatif untuk stylesheet Anda. Anda mungkin melihat atribut
type="text/css", tetapi atribut ini tidak wajib diisi. Atribut rel menentukan
hubungan, yang dalam hal ini adalah stylesheet. Jika Anda tidak menyertakan atribut rel, CSS Anda tidak akan ditautkan.
Anda akan segera menemukan beberapa nilai rel lainnya, tetapi pertama-tama Anda akan mempelajari cara lain untuk menyertakan CSS.
Jika ingin gaya stylesheet eksternal Anda berada dalam lapisan susun, tetapi Anda tidak memiliki akses untuk mengedit file CSS, sebaiknya sertakan CSS dengan @import di dalam <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Saat menggunakan @import untuk mengimpor lembar gaya ke dalam dokumen, secara opsional ke dalam lapisan susun, pernyataan @import harus menjadi pernyataan pertama dalam <style> atau lembar gaya tertaut, di luar deklarasi set karakter.
Meskipun lapisan bertingkat masih cukup baru dan Anda mungkin tidak melihat
@import di head <style>, Anda akan sering melihat properti kustom yang dideklarasikan di
blok gaya head:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Gaya, yang ditambahkan dengan <link>, <style>, atau keduanya, harus ada di head. Meskipun
berfungsi saat disertakan dalam isi dokumen, Anda sebaiknya menambahkan gaya di
header untuk alasan performa. Hal ini mungkin tampak berlawanan dengan intuisi, karena Anda mungkin berpikir
bahwa Anda ingin konten Anda dimuat terlebih dahulu. Namun, lebih baik jika browser mengetahui cara merender konten saat dimuat. Menambahkan gaya terlebih dahulu mencegah
pengecatan ulang yang tidak perlu yang terjadi jika elemen diberi gaya setelah pertama kali
dirender.
Ada satu cara untuk menyertakan gaya yang tidak akan pernah Anda gunakan dalam <head> dokumen Anda: gaya inline. Anda mungkin tidak akan pernah menggunakan gaya inline di head karena stylesheet agen pengguna menyembunyikan head secara default. Namun, jika Anda ingin membuat editor CSS tanpa JavaScript, misalnya, agar dapat menguji elemen kustom halaman, Anda dapat membuat head terlihat dengan display: block, lalu menyembunyikan semua yang ada di head, dan kemudian dengan atribut style inline, membuat blok gaya yang dapat diedit kontennya terlihat.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Anda dapat menambahkan gaya inline ke elemen <style>.
Penggunaan elemen <link> lainnya
Elemen link digunakan untuk membuat hubungan antara dokumen HTML dan
resource eksternal. Beberapa resource ini dapat didownload, sedangkan yang lain bersifat informatif. Jenis hubungan ditentukan oleh nilai atribut rel. Ada 25 nilai yang tersedia untuk atribut rel
yang dapat digunakan dengan <link>, <a>, dan <area>, atau <form>, dengan beberapa nilai yang
dapat digunakan dengan semuanya. Sebaiknya sertakan yang terkait dengan informasi meta di head dan yang terkait dengan performa di <body>.
Sekarang Anda akan menyertakan tiga jenis lainnya di header: icon, alternate, dan
canonical. Anda akan menambahkan jenis keempat,
rel="manifest", di modul berikutnya.
Favicon
Gunakan tag <link> dengan rel="icon" untuk mengidentifikasi favicon untuk dokumen Anda. Favicon adalah ikon kecil yang muncul di tab browser, biasanya di sebelah kiri judul dokumen. Saat tab menyusut, judul dapat menghilang,
tetapi ikon tetap terlihat. Sebagian besar favicon adalah logo perusahaan atau aplikasi.
Jika Anda tidak mendeklarasikan favicon, browser akan mencari file bernama
favicon.ico di direktori tingkat teratas (folder root situs). Dengan
<link>, Anda dapat menggunakan nama dan lokasi file yang berbeda:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Kode sebelumnya menyatakan "gunakan mlwicon.png sebagai ikon untuk skenario yang
memerlukan ukuran 16 px, 32 px, atau 48 px." Atribut ukuran menerima nilai any
untuk ikon yang dapat diskalakan atau daftar nilai widthXheight persegi yang dipisahkan spasi;
dengan nilai lebar dan tinggi adalah 16, 32, 48, atau lebih besar dalam urutan
geometris tersebut, unit piksel dihilangkan, dan X tidak peka huruf besar/kecil.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Ada dua jenis ikon khusus non-standar untuk browser Safari:
apple-touch-icon untuk perangkat iOS dan mask-icon untuk tab yang disematkan di macOS.
apple-touch-icon hanya diterapkan saat pengguna menambahkan situs ke layar utama:
Anda dapat menentukan beberapa ikon dengan sizes yang berbeda untuk perangkat yang berbeda.
mask-icon hanya akan digunakan jika pengguna menyematkan tab di Safari desktop: ikon itu sendiri harus berupa SVG monokrom, dan atribut color mengisi ikon dengan warna yang diperlukan.
Meskipun Anda dapat menggunakan <link> untuk menentukan gambar yang sama sekali berbeda di setiap halaman atau bahkan setiap pemuatan halaman, jangan lakukan hal ini. Untuk konsistensi dan pengalaman pengguna yang baik, gunakan satu gambar. Google menggunakan favicon yang berbeda untuk setiap aplikasi yang berbeda: ada ikon email, ikon kalender, misalnya. Namun, semua ikon Google menggunakan skema warna yang sama. Anda tahu persis konten tab yang terbuka dari ikonnya.
Versi alternatif situs
Gunakan nilai alternate dari atribut rel untuk mengidentifikasi terjemahan atau representasi alternatif situs.
Anggap saja kita memiliki versi situs yang diterjemahkan ke dalam bahasa Prancis dan Portugis Brasil:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Saat menggunakan alternate untuk terjemahan, atribut hreflang harus ditetapkan.
Nilai alternatif tidak hanya untuk terjemahan. Misalnya, atribut type
dapat menentukan URI alternatif untuk feed RSS saat atribut type
disetel ke application/rss+xml atau application/atom+xml.
Link ke versi PDF palsu situs:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Jika nilai rel adalah alternate stylesheet, maka akan ditentukan
stylesheet alternatif
dan atribut title harus ditetapkan untuk memberi nama gaya alternatif tersebut.
Kanonis
Jika Anda membuat beberapa terjemahan atau versi Machine Learning Workshop, mesin telusur mungkin tidak mengidentifikasi sumber yang berwenang. Gunakan rel="canonical"
untuk mengidentifikasi URL pilihan untuk situs atau aplikasi.
Sertakan URL kanonis di semua halaman yang diterjemahkan, dan di halaman beranda, yang menunjukkan URL pilihan kami:
<link rel="canonical" href="https://www.machinelearning.com" />
Link kanonis rel="canonical" paling sering digunakan untuk memposting silang dengan
publikasi dan platform blog untuk mengatribusikan sumber aslinya. Saat menyindikasikan konten, situs harus menyertakan link kanonis ke sumber aslinya.
Skrip
Tag <script> menyertakan skrip. Jenis defaultnya adalah JavaScript. Jika Anda menggunakan bahasa skrip lain, sertakan atribut type dengan jenis MIME, atau type="module" untuk modul JavaScript.
Hanya JavaScript dan modul JavaScript yang diuraikan dan dieksekusi.
Tag <script> dapat digunakan untuk mengapsulasi kode Anda atau mendownload file eksternal. Di MLW, tidak ada file skrip eksternal karena, berbeda dengan
kepercayaan populer, Anda tidak memerlukan JavaScript untuk situs yang berfungsi. Ini adalah jalur pembelajaran HTML, bukan JavaScript.
Anda akan menyertakan sedikit JavaScript untuk membuat telur Paskah nanti:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Cuplikan ini membuat pengendali peristiwa untuk elemen dengan ID switch.
Dengan JavaScript, Anda harus menghindari mereferensikan elemen sebelum elemen tersebut ada. Karena
switch belum ada, kita tidak akan menyertakan pengendali peristiwa.
Saat menambahkan elemen sakelar lampu, kita akan menambahkan <script> di bagian bawah
<body>, bukan di <head>. Mengapa? Dua alasan. Kita ingin memastikan elemen ada sebelum skrip yang mereferensikannya ditemui karena kita tidak mendasarkan skrip ini pada peristiwa DOMContentLoaded.
Selain itu, JavaScript tidak hanya
memblokir rendering,
tetapi browser menghentikan pengunduhan semua aset saat skrip didownload dan
tidak melanjutkan pengunduhan aset lain hingga JavaScript selesai
dieksekusi. Oleh karena itu, Anda sering kali menemukan permintaan JavaScript di akhir dokumen, bukan di head.
Ada dua atribut yang dapat mengurangi sifat pemblokiran download dan eksekusi JavaScript: defer dan async. Dengan defer, rendering HTML tidak
diblokir selama download, dan JavaScript hanya dieksekusi setelah rendering dokumen
selesai. Dengan async, rendering tidak diblokir selama
download, tetapi setelah skrip selesai didownload, rendering
dijeda saat JavaScript dieksekusi.
async. Catatan: Skrip modul yang dimuat dengan menggunakan <script type="module"> mengaktifkan defer secara default.
Untuk menyertakan JavaScript MLW dalam file eksternal, Anda dapat menulis:
<script src="js/switch.js" defer></script>
Menambahkan atribut defer
menunda eksekusi skrip hingga setelah semuanya dirender,
sehingga mencegah skrip merusak performa. Atribut async dan defer
hanya valid pada skrip eksternal.
Dasar
Ada elemen lain yang hanya ditemukan di <head>. Elemen <base> yang jarang digunakan memungkinkan penetapan URL dan target link default. Atribut
href menentukan URL dasar untuk semua link relatif.
Atribut target, yang valid di <base> serta di link dan formulir, menetapkan tempat link tersebut harus dibuka. Nilai default _self membuka file yang ditautkan dalam konteks yang sama dengan dokumen saat ini. Opsi lainnya mencakup _blank, yang
membuka setiap link di jendela baru, _parent dari konten saat ini, yang
mungkin sama dengan self jika pembuka bukan iframe, atau _top, yang berada di
tab browser yang sama, tetapi dikeluarkan dari konteks apa pun untuk menempati seluruh tab.
Sebagian besar developer menambahkan atribut target ke beberapa link, jika ada, yang ingin mereka buka di jendela baru pada link atau formulir itu sendiri, bukan menggunakan <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Jika situs kami berada dalam iframe di situs seperti Yummly, menyertakan elemen <base> berarti saat pengguna mengklik link apa pun dalam dokumen kami, link akan dimuat di luar iframe, sehingga menempati seluruh jendela browser.
Salah satu kekurangan elemen ini adalah link anchor diselesaikan dengan
<base>. <base> secara efektif mengonversi link <a href="#ref"> menjadi
<a target="_top" href="https://machinelearningworkshop.com#ref">, memicu
permintaan HTTP ke URL dasar dengan fragmen yang dilampirkan.
Beberapa hal lainnya tentang <base>:
- Hanya boleh ada satu elemen
<base>dalam dokumen. - Harus ada sebelum URL relatif digunakan, termasuk kemungkinan skrip atau referensi stylesheet.
Sekarang kode akan terlihat seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Komentar HTML
Skrip diapit tanda kurung sudut, tanda hubung, dan tanda seru, yang merupakan cara
Anda mengomentari HTML. Apa pun yang berada di antara <!-- dan --> tidak terlihat atau diuraikan. Anda dapat menempatkan komentar HTML di mana saja di halaman, kecuali dalam blok skrip atau gaya, tempat Anda harus menggunakan komentar JavaScript dan CSS.
Anda telah mempelajari dasar-dasar tentang apa yang ada di dalam <head>, tetapi Anda ingin mempelajari lebih dari sekadar dasar-dasarnya. Di bagian selanjutnya, kita akan mempelajari tag meta, dan cara mengontrol apa yang ditampilkan saat situs Anda ditautkan di media sosial.
Uji pemahaman Anda
Uji pengetahuan Anda tentang struktur dokumen.
Bagaimana cara mengidentifikasi bahasa dokumen?
language ke tag HTML.lang ke tag HTML.Add the <lang> ke <head>.Pilih elemen yang dapat disertakan dalam <head>.
<p><title><meta>