Dokumen HTML menyertakan deklarasi jenis dokumen dan elemen root <html>. Bertingkat dalam elemen <html> adalah kepala dokumen dan isi dokumen. Meskipun bagian atas dokumen tidak terlihat oleh pengunjung yang terlihat, sebaiknya buat situs Anda berfungsi. Panel ini berisi semua informasi meta, termasuk informasi untuk mesin telusur dan hasil media sosial, 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 pada konten, himpunan karakter, dan, tentu saja, judul atau nama situs atau aplikasi.
Tambahkan ke setiap dokumen HTML
Ada beberapa fitur yang harus dianggap penting untuk setiap halaman web. Browser akan tetap merender konten jika elemen tersebut tidak ada, namun menyertakannya. Selalu.
<!DOCTYPE html>
Hal pertama dalam dokumen HTML adalah field preamble. Untuk HTML, yang Anda butuhkan hanyalah <!DOCTYPE html>. Ini mungkin terlihat seperti elemen HTML, tetapi tidak. Ini adalah jenis node khusus yang disebut "doctype". Doctype akan memberi tahu browser untuk menggunakan mode standar. Jika dihilangkan, browser akan menggunakan mode rendering berbeda yang disebut quirks mode. Menyertakan doctype akan membantu mencegah mode quirks.
<html>
Elemen <html> adalah elemen root untuk dokumen HTML. Ini adalah induk dari <head> dan <body>, yang berisi semua yang ada dalam dokumen HTML selain doctype. Jika dihilangkan, atribut akan tersirat, tetapi penting untuk menyertakannya, karena ini adalah elemen tempat bahasa konten dokumen dinyatakan.
Bahasa konten
Atribut bahasa lang yang ditambahkan ke tag <html> menentukan bahasa utama dokumen. Nilai atribut lang adalah kode bahasa ISO dua atau tiga huruf yang diikuti dengan wilayah. Wilayah ini bersifat opsional, tetapi direkomendasikan, karena bahasa dapat sangat bervariasi di antara wilayah. Misalnya, bahasa Prancis sangat berbeda di Kanada (fr-CA) dengan Burkina Faso (fr-BF). Deklarasi bahasa ini memungkinkan pembaca layar, mesin telusur, dan layanan terjemahan untuk memahami bahasa dokumen.
Atribut lang tidak terbatas pada tag <html>. Jika terdapat teks dalam halaman yang dalam bahasa yang berbeda dari bahasa dokumen utama, atribut lang harus digunakan untuk mengidentifikasi pengecualian untuk bahasa utama dalam dokumen. Sama seperti ketika disertakan di kepala, atribut lang di dalam isi tidak memiliki efek visual. Solusi ini hanya menambahkan semantik, sehingga teknologi pendukung dan layanan otomatis dapat mengetahui bahasa konten yang terpengaruh.
Selain menyetel bahasa untuk dokumen dan pengecualian untuk bahasa dasar tersebut, atribut dapat digunakan dalam pemilih CSS. <span lang="fr-fr">Ceci n'est pas une pipe.</span> dapat ditargetkan dengan pemilih atribut dan bahasa [lang|="fr"] dan :lang(fr).
<head>
Bertingkat 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>, atau header metadata dokumen, berisi semua metadata untuk situs atau aplikasi. Isi berisi konten yang terlihat. Bagian selanjutnya berfokus pada komponen yang ditemukan bertingkat di dalam <head></head> pembuka dan penutup
Komponen yang diperlukan di dalam <head>
Metadata dokumen, termasuk judul dokumen, himpunan 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 himpunan karakter, judul, dan setelan area pandang.
Pengkodean karakter
Elemen pertama dalam <head> harus berupa deklarasi encoding karakter charset. Atribut ini ditampilkan 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, karena metode ini memungkinkan encoding satu hingga empat byte dari semua karakter, bahkan karakter yang bahkan tidak Anda ketahui. Selain itu, ini adalah jenis encoding yang diperlukan oleh HTML5.
Untuk menyetel encoding karakter ke UTF-8, sertakan:
<meta charset="utf-8" />
Dengan menyatakan UTF-8 (tidak peka huruf besar/kecil), Anda bahkan dapat menyertakan emoji dalam judul (tetapi jangan).
Encoding karakter diwariskan ke semua hal dalam dokumen, bahkan <style> dan <script>. Deklarasi kecil ini berarti Anda dapat menyertakan emoji di nama class dan selectorAPI (sekali lagi, jangan). Jika Anda menggunakan emoji, pastikan untuk menggunakannya dengan cara yang meningkatkan kegunaan tanpa mengganggu aksesibilitas.
Judul dokumen
Halaman beranda dan semua halaman tambahan masing-masing harus memiliki judul yang unik. Konten untuk judul dokumen, teks di antara tag <title> pembuka dan penutup, ditampilkan di tab browser, daftar jendela yang terbuka, histori, hasil penelusuran, dan, kecuali jika ditentukan ulang dengan tag <meta>, di kartu media sosial.
<title>Machine Learning Workshop</title>
Metadata area pandang
Tag meta lain yang harus dianggap penting adalah tag meta area pandang, yang membantu daya respons situs, sehingga konten dapat dirender dengan baik secara default, berapa pun lebar area pandang. Meskipun tag meta area pandang sudah ada sejak Juni 2007, saat iPhone pertama kali dirilis, tag meta area pandang tersebut baru saja didokumentasikan dalam spesifikasi. Karena memungkinkan pengontrolan ukuran dan skala area pandang, dan mencegah agar konten situs tidak diperkecil agar sesuai dengan situs 960 px ke layar 320 px, kami sangat direkomendasikan.
<meta name="viewport" content="width=device-width" />
Kode sebelumnya berarti "membuat situs menjadi responsif, dimulai dengan membuat lebar konten menjadi lebar layar". Selain width, Anda dapat menetapkan zoom dan skalabilitas, tetapi keduanya ditetapkan secara default ke nilai yang dapat diakses. Jika Anda ingin bersikap eksplisit, sertakan:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Area pandang adalah bagian dari audit aksesibilitas Lighthouse; situs Anda akan lulus jika dapat diskalakan dan belum ditetapkan ukuran maksimumnya.
Sejauh ini, garis besar untuk 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> lain
Ada banyak hal lain yang masuk ke dalam <head>. Sebenarnya semua {i>metadata<i}. Sebagian besar elemen yang akan Anda temukan di <head> dibahas di sini, sekaligus menyimpan banyak opsi <meta> untuk bab berikutnya.
Anda telah melihat himpunan karakter meta dan judul dokumen, tetapi ada banyak metadata lainnya 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: atribut <link>, <style>, dan style.
Dua cara utama untuk menyertakan gaya di file HTML adalah dengan menyertakan resource eksternal menggunakan elemen <link> dengan atribut rel yang disetel ke stylesheet, atau menyertakan CSS langsung di head dokumen dalam tag <style> pembuka dan penutup.
Tag <link> adalah metode yang disarankan untuk menyertakan stylesheet. Menautkan satu atau beberapa lembar gaya eksternal bagus untuk pengalaman developer dan performa situs: Anda dapat mempertahankan CSS di satu tempat, bukan tersebar di mana-mana, dan browser dapat menyimpan file eksternal ke cache, artinya CSS tidak harus didownload lagi dengan setiap navigasi halaman.
Sintaksisnya adalah <link rel="stylesheet" href="styles.css">, dengan styles.css adalah URL stylesheet Anda. Anda akan sering melihat type="text/css". Tidak perlu. Jika Anda menyertakan gaya yang ditulis dalam sesuatu selain CSS, type diperlukan, tetapi karena tidak ada jenis lain, atribut ini tidak diperlukan. Atribut rel menentukan hubungan: dalam hal ini stylesheet. Jika Anda menghapus kolom ini, CSS tidak akan ditautkan.
Anda akan segera menemukan beberapa nilai rel lainnya, tetapi mari kita bahas cara lain untuk menyertakan CSS terlebih dahulu.
Jika Anda ingin gaya lembar gaya eksternal berada dalam lapisan bertingkat tetapi tidak memiliki akses untuk mengedit file CSS guna memasukkan informasi lapisan di dalamnya, Anda dapat menyertakan CSS dengan @import di dalam <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Saat menggunakan @import untuk mengimpor lembar gaya ke dokumen Anda, secara opsional ke lapisan bertingkat, pernyataan @import harus menjadi pernyataan pertama di <style> atau stylesheet tertaut, di luar deklarasi kumpulan karakter.
Meskipun lapisan bertingkat masih cukup baru dan Anda mungkin tidak menemukan @import di <style> head, Anda akan sering melihat properti kustom yang dideklarasikan di blok gaya head:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Gaya, baik melalui <link> maupun <style>, atau keduanya, harus berada di bagian awal. Mereka akan berfungsi jika disertakan dalam isi dokumen, tetapi Anda ingin gaya Anda di awal untuk alasan performa. Hal ini mungkin terdengar tak masuk akal, karena Anda ingin konten Anda dimuat terlebih dahulu, tetapi Anda sebenarnya ingin browser mengetahui cara merender konten saat dimuat. Menambahkan gaya terlebih dahulu akan mencegah penggambaran ulang yang tidak perlu yang terjadi jika elemen diberi gaya setelah pertama kali dirender.
Kemudian, ada satu cara untuk menyertakan gaya yang tidak akan pernah Anda gunakan dalam <head> dokumen: gaya inline. Anda mungkin tidak akan pernah menggunakan gaya inline di kepala karena lembar gaya agen pengguna menyembunyikan head secara default. Namun, jika Anda ingin membuat editor CSS tanpa JavaScript, misalnya, agar dapat menguji elemen khusus halaman, Anda dapat membuat head terlihat dengan display: block, lalu menyembunyikan semuanya di head, dan kemudian dengan atribut style inline, membuat blok gaya yang dapat diedit konten terlihat.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Meskipun Anda dapat menambahkan gaya inline di <style>, akan jauh lebih menyenangkan untuk menata gaya <style> di style Anda. Aku melenceng.
Penggunaan lain dari elemen <link>
Elemen link digunakan untuk membuat hubungan antara dokumen HTML dan resource eksternal. Sebagian resource ini dapat didownload, sedangkan yang lainnya bersifat informatif. Jenis hubungan ditentukan oleh nilai atribut rel. Saat ini 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 hal yang terkait dengan informasi meta di head dan yang terkait dengan performa di <body>.
Sekarang, Anda akan menyertakan tiga jenis lain di header: icon, alternate, dan canonical. (Anda akan menyertakan jenis keempat, rel="manifest", dalam modul berikutnya).
Favicon
Gunakan tag <link>, dengan pasangan atribut/nilai rel="icon" guna mengidentifikasi favicon yang akan digunakan untuk dokumen Anda. Favicon adalah ikon yang sangat kecil yang muncul di tab browser, umumnya di sebelah kiri judul dokumen. Saat jumlah tab terbuka terlalu banyak, tab akan mengecil dan judulnya mungkin sama sekali hilang, namun ikonnya selalu terlihat. Sebagian besar favicon adalah logo perusahaan atau aplikasi.
Jika Anda tidak mendeklarasikan favicon, browser akan mencari file bernama favicon.ico di direktori tingkat atas (folder root situs). Dengan <link>, Anda dapat menggunakan nama file dan lokasi yang berbeda:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Kode sebelumnya mengatakan "gunakan mlwicon.png sebagai ikon untuk skenario ketika 16 px, 32 px, atau 48 px masuk akal". Atribut ukuran menerima nilai any untuk ikon skalabel atau daftar nilai widthXheight persegi yang dipisahkan spasi; dengan nilai lebar dan tinggi 16, 32, 48, atau lebih besar dalam urutan geometris tersebut, unit piksel akan 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 non-standar khusus untuk browser Safari: apple-touch-icon untuk perangkat iOS dan mask-icon untuk tab tersemat 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 melakukannya. Untuk konsistensi dan pengalaman pengguna yang baik, gunakan satu gambar. Twitter menggunakan burung biru: saat melihat burung biru di tab browser, Anda tahu bahwa tab terbuka untuk halaman Twitter tanpa mengklik tab. Google menggunakan favicon yang berbeda untuk setiap aplikasinya: ada ikon email, ikon kalender, misalnya. Tetapi semua ikon Google menggunakan skema warna yang sama. Sekali lagi, Anda tahu persis konten tab yang terbuka hanya dari ikon tersebut.
Versi alternatif situs
Kami menggunakan nilai alternate dari atribut rel untuk mengidentifikasi terjemahan, atau representasi alternatif, dari situs.
Mari kita anggap ada beberapa 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 alternatifnya adalah untuk lebih dari sekadar terjemahan. Misalnya, atribut type dapat menentukan URI alternatif untuk feed RSS jika atribut type ditetapkan ke application/rss+xml atau application/atom+xml. Mari tautkan ke versi PDF palsu dari situs tersebut.
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Jika nilai rel adalah alternate stylesheet, nilai ini akan menentukan stylesheet alternatif dan atribut title harus disetel dan diberi nama untuk gaya alternatif tersebut.
Kanonis
Jika Anda membuat beberapa terjemahan atau versi Workshop Machine Learning, mesin telusur mungkin akan bingung dengan versi mana yang merupakan sumber resmi. Untuk itu, gunakan rel="canonical" guna 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 postingan silang dengan publikasi dan platform blog untuk memberikan kredit ke sumber asli; saat situs mendistribusikan konten, link kanonis harus disertakan ke sumber asli.
Skrip
Tag <script> digunakan untuk menyertakan skrip. Jenis defaultnya adalah JavaScript. Jika Anda menyertakan bahasa skrip lainnya, sertakan atribut type dengan jenis mime, atau type="module" jika itu adalah modul JavaScript. Hanya modul JavaScript dan JavaScript yang diurai dan dijalankan.
Tag <script> dapat digunakan untuk mengenkapsulasi kode atau mendownload file eksternal. Di MLW, tidak ada file skrip eksternal karena bertentangan dengan banyak orang, Anda tidak memerlukan JavaScript untuk situs web fungsional, dan ini adalah jalur pembelajaran HTML, bukan JavaScript.
Anda akan menyertakan sedikit JavaScript untuk membuat Pesan tersembunyi 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 tidak ingin mereferensikan suatu elemen sebelum elemen tersebut ada. Kolom ini belum ada, jadi kita tidak akan menyertakannya. Saat menambahkan elemen tombol lampu, kita akan menambahkan <script> di bagian bawah <body>, bukan di <head>. Mengapa? Ada dua alasan. Kami ingin memastikan elemen ada sebelum skrip yang merujuknya ditemukan karena kami tidak mendasarkan skrip ini pada peristiwa DOMContentLoaded. Terutama, JavaScript tidak hanya pemblokiran render, tetapi browser berhenti mendownload semua aset saat skrip didownload dan tidak melanjutkan download aset lainnya hingga JavaScript selesai dieksekusi. Karena alasan ini, Anda akan sering menemukan permintaan JavaScript di akhir dokumen, bukan di bagian 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 dijalankan setelah dokumen selesai dirender. Dengan async, rendering juga tidak diblokir selama download, tetapi setelah skrip selesai didownload, rendering akan dijeda saat JavaScript dijalankan.
Untuk menyertakan JavaScript MLW di file eksternal, Anda dapat menulis:
<script src="js/switch.js" defer></script>
Menambahkan atribut defer akan menunda eksekusi skrip hingga semuanya dirender, sehingga mencegah skrip mengganggu performa. Atribut async dan defer hanya valid pada skrip eksternal.
Base
Ada elemen lain yang hanya ditemukan di <head>.. Tidak terlalu sering digunakan, elemen <base> memungkinkan penetapan target dan URL 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 akan dibuka. Setelan default _self akan membuka file tertaut dalam konteks yang sama dengan dokumen saat ini. Opsi lainnya mencakup _blank, yang membuka setiap link di jendela baru, _parent konten saat ini, yang mungkin sama seperti {i>self<i} jika pembuka bukan iframe, atau _top, yang ada di tab browser yang sama, tetapi muncul dari konteks apa pun untuk mengambil seluruh tab.
Sebagian besar developer menambahkan atribut target ke beberapa link, jika ada, yang ingin dibuka di jendela baru pada link atau formulir itu sendiri, bukan menggunakan <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Jika situs kita berada di dalam iframe pada situs seperti Yummly, yang menyertakan elemen <base> berarti saat pengguna mengklik link apa pun dalam dokumen kita, link tersebut akan dimuat keluar dari iframe, sehingga memenuhi seluruh jendela browser.
Salah satu kelemahan 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">, yang memicu permintaan HTTP ke URL dasar dengan fragmen terlampir.
Beberapa hal lain yang perlu diperhatikan tentang <base>: hanya boleh ada satu elemen <base> di dokumen, dan elemen ini harus ada sebelum URL relatif digunakan, termasuk kemungkinan referensi skrip atau stylesheet.
Kode sekarang 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" src="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
Perhatikan bahwa skrip diapit oleh beberapa tanda kurung sudut, tanda hubung, dan tanda 'bang'. Ini adalah cara Anda mengomentari HTML. Kita akan membiarkan skrip sebagai komentar hingga kita memiliki konten sebenarnya di halaman. Apa pun di antara <!-- dan --> tidak akan terlihat atau diuraikan. Komentar HTML dapat ditempatkan di mana saja pada halaman, termasuk kepala atau isi, dengan pengecualian skrip atau blok gaya, di mana Anda harus menggunakan komentar JavaScript dan CSS.
Anda telah mempelajari dasar-dasar mengenai <head>, tetapi Anda ingin mempelajarinya lebih dari dasar-dasarnya. Di bagian selanjutnya, kita akan mempelajari tag meta, dan cara mengontrol apa yang ditampilkan saat situs Anda ditautkan di media sosial.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang struktur dokumen.
Bagaimana Anda 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>