Dokumen HTML menyertakan deklarasi jenis dokumen dan elemen root <html>. Elemen <html> berisi bagian awal dokumen dan isi dokumen.
Meskipun bagian awal dokumen tidak terlihat di luar kode, bagian ini sangat penting agar situs dapat berfungsi. Bagian ini berisi semua informasi meta, termasuk informasi untuk hasil mesin telusur dan 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 konten, kumpulan 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 akan merender konten jika elemen ini tidak ada, tetapi Anda harus menyertakannya.
<!DOCTYPE html>
Hal pertama dalam dokumen HTML adalah bagian pembuka. Untuk HTML, Anda hanya memerlukan
<!DOCTYPE html>. Elemen 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 tidak ada, 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 terhadap bahasa utama dokumen. Seperti penggunaannya di bagian awal, atribut lang dalam isi tidak memiliki efek visual. Atribut ini menambahkan semantik, sehingga teknologi pendukung dan layanan otomatis dapat mengidentifikasi bahasa konten tertentu.
Selain menetapkan bahasa untuk dokumen dan pengecualian terhadap bahasa dasar tersebut, atribut ini dapat digunakan dalam pemilih CSS.
<span lang="fr-fr">Ceci n'est pas une pipe.</span> dapat ditargetkan dengan
atribut dan pemilih bahasa
[lang|="fr"]
dan :lang(fr).
<head>
Di antara tag <html> pembuka dan penutup, kita menemukan dua elemen 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 lainnya dari bagian ini berfokus pada komponen
yang berada di dalam elemen <head>.
Komponen yang diperlukan di dalam <head>
Metadata dokumen, termasuk judul dokumen, kumpulan karakter, setelan area tampilan, deskripsi, URL dasar, link stylesheet, dan ikon, ditemukan di elemen
<head> Meskipun Anda mungkin tidak memerlukan semua fitur ini, selalu sertakan kumpulan karakter, judul, dan setelan area tampilan.
Encoding karakter
Elemen pertama dalam <head> harus berupa charset karakter
encoding declaration. Elemen ini muncul sebelum judul untuk memastikan browser dapat merender karakter dalam judul tersebut dan semua karakter di bagian lain dokumen.
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 dari semua karakter.
Untuk menetapkan 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 diwarisi ke semua hal dalam dokumen, bahkan
<style> dan <script>. Deklarasi kecil ini berarti Anda dapat menyertakan emoji dalam nama class dan selectorAPI. Jika menggunakan emoji, pastikan untuk menggunakannya dengan cara yang meningkatkan kegunaan tanpa membahayakan aksesibilitas.
Judul dokumen
Setiap halaman, halaman beranda Anda 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 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 area tampilan sangat penting untuk responsivitas situs, sehingga konten dapat dirender dengan baik, terlepas dari lebar area tampilan. Meskipun tag meta area tampilan sudah ada sejak tahun 2007, tag ini baru didokumentasikan dalam spesifikasi baru-baru ini. Tag ini mengontrol ukuran dan skala area tampilan, sehingga konten tidak menyusut agar sesuai dengan layar yang lebih kecil.
<meta name="viewport" content="width=device-width" />
Kode sebelumnya berarti "buat situs responsif, mulai 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 ingin menetapkannya secara eksplisit, sertakan:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Area tampilan adalah bagian dari audit aksesibilitas Lighthouse. Situs Anda akan lulus jika dapat diskalakan dan tidak memiliki ukuran maksimum yang ditetapkan.
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> lainnya
Ada banyak hal lain yang masuk ke dalam <head>. Semua metadata, sebenarnya.
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 kumpulan karakter meta dan judul dokumen, tetapi ada banyak
metadata 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 harus 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 bagian awal dokumen Anda dalam tag <style> pembuka dan penutup.
Tag <link> adalah metode yang lebih disukai untuk menyertakan stylesheet. Menautkan satu atau beberapa stylesheet eksternal baik untuk pengalaman developer maupun performa situs: Anda dapat mempertahankan CSS di satu tempat, bukan tersebar di mana-mana, dan browser dapat menyimpan cache file eksternal, yang berarti file tersebut tidak perlu didownload lagi dengan setiap 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 diperlukan. Atribut rel menentukan hubungan, yang dalam hal ini adalah stylesheet. Jika Anda menghilangkan 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 Anda ingin gaya stylesheet eksternal berada dalam lapisan kaskade, tetapi
Anda tidak memiliki akses untuk mengedit file CSS, Anda harus menyertakan CSS dengan
@import di dalam a
<style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
Saat menggunakan @import untuk mengimpor stylesheet ke dalam dokumen Anda, secara opsional ke dalam
lapisan kaskade, pernyataan @import harus menjadi pernyataan pertama dalam
<style> atau stylesheet tertaut, di luar deklarasi kumpulan karakter.
Meskipun lapisan kaskade masih cukup baru dan Anda mungkin tidak melihat
@import di <style> bagian awal, Anda akan sering melihat properti kustom yang dideklarasikan dalam
blok gaya bagian awal:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Gaya, yang ditambahkan dengan <link>, <style>, atau keduanya, harus berada di bagian awal. Gaya akan berfungsi jika disertakan dalam isi dokumen, tetapi Anda harus menambahkan gaya di bagian awal karena alasan performa. Hal ini mungkin tampak tidak intuitif, karena Anda mungkin berpikir ingin konten Anda dimuat terlebih dahulu. Namun, lebih baik jika browser mengetahui cara merender konten saat dimuat. Menambahkan gaya terlebih dahulu akan 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 di <head> dari
dokumen Anda: gaya inline. Anda mungkin tidak akan pernah menggunakan gaya inline di bagian awal karena stylesheet agen pengguna menyembunyikan bagian awal secara default. Namun, jika Anda ingin membuat editor CSS tanpa JavaScript, misalnya, sehingga Anda dapat menguji elemen kustom halaman, Anda dapat membuat bagian awal terlihat dengan display: block, lalu menyembunyikan semua hal di bagian awal, 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>
Anda dapat menambahkan gaya inline ke elemen <style>.
Penggunaan lain dari elemen <link>
Elemen link digunakan untuk membuat hubungan antara dokumen HTML dan resource eksternal. Beberapa resource ini dapat didownload, 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 bagian awal dan yang terkait dengan performa di <body>.
Anda akan menyertakan tiga jenis lainnya di header sekarang: 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 mungkin 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 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 menyatakan "gunakan mlwicon.png sebagai ikon untuk skenario yang menggunakan ukuran 16 piksel, 32 piksel, atau 48 piksel". 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 non-standar khusus 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 tersebut. Untuk konsistensi dan pengalaman pengguna yang baik, gunakan satu gambar. Google menggunakan favicon yang berbeda untuk setiap aplikasi yang berbeda: misalnya, ada ikon email, ikon kalender. Namun, semua ikon Google menggunakan skema warna yang sama. Anda tahu persis konten tab yang terbuka dari ikon.
Versi alternatif situs
Gunakan nilai alternate dari atribut rel untuk mengidentifikasi terjemahan atau representasi alternatif situs.
Anggap 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 ditetapkan ke application/rss+xml atau application/atom+xml.
Link ke versi PDF situs yang dibuat-buat:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Jika nilai rel adalah alternate stylesheet, nilai tersebut akan menentukan
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 posting silang dengan
publikasi dan platform blogging untuk memberikan kredit kepada sumber asli. Saat situs menyindikasikan konten, situs tersebut harus menyertakan link kanonis ke sumber asli.
Skrip
Tag <script> menyertakan skrip. Jenis default-nya adalah JavaScript. Jika Anda
menggunakan bahasa skrip lain, sertakan atribut type dengan jenis MIME, atau type="module" untuk modul JavaScript.
Hanya modul JavaScript dan JavaScript yang diuraikan dan dieksekusi.
Tag <script> dapat digunakan untuk merangkum kode Anda atau mendownload file eksternal. Di MLW, tidak ada file skrip eksternal karena, berbeda dengan kepercayaan umum, 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
dari <body> bukan di <head>. Mengapa? Dua alasan. Kita ingin memastikan
elemen ada sebelum skrip yang mereferensikannya ditemukan karena kita tidak
mendasarkan skrip ini pada peristiwa DOMContentLoaded.
Selain itu, JavaScript tidak hanya
memblokir rendering,
tetapi browser berhenti mendownload semua aset saat skrip didownload dan
tidak melanjutkan mendownload aset lain hingga JavaScript selesai
dieksekusi. Karena alasan ini, Anda sering menemukan permintaan JavaScript di akhir dokumen, bukan di bagian awal.
Ada dua atribut yang dapat mengurangi sifat pemblokiran download dan eksekusi JavaScript: defer dan async. Dengan defer, rendering HTML tidak diblokir selama proses download, dan JavaScript hanya dieksekusi setelah dokumen selesai dirender. Dengan async, rendering juga tidak diblokir selama proses download, tetapi setelah skrip selesai didownload, rendering akan dijeda saat JavaScript dieksekusi.
Untuk menyertakan JavaScript MLW dalam file eksternal, Anda dapat menulis:
<script src="js/switch.js" defer></script>
Menambahkan atribut defer
akan menunda eksekusi skrip hingga setelah semuanya dirender,
sehingga mencegah skrip membahayakan performa. Atribut async dan defer hanya valid pada skrip eksternal.
Dasar
Ada elemen lain yang hanya ditemukan di <head>. Elemen yang jarang
digunakan <base> memungkinkan Anda menetapkan 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 akan dibuka. 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 dari konten saat ini, yang mungkin sama dengan self jika pembukanya bukan iframe, atau _top, yang berada di tab browser yang sama, tetapi muncul 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 kita berada di dalam iframe di situs seperti Yummly,
menyertakan elemen <base> berarti saat pengguna mengklik link apa pun dalam
dokumen kita, link akan dimuat di luar iframe, menempati 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 lainnya tentang <base>:
- Hanya boleh ada satu elemen
<base>dalam dokumen. - Elemen ini harus muncul 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" 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 dienkapsulasi dalam 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 skrip atau blok gaya, tempat Anda harus menggunakan komentar JavaScript dan CSS.
Anda telah membahas dasar-dasar tentang apa yang ada di <head>, tetapi Anda ingin mempelajari
lebih lanjut. Di bagian berikutnya, 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> elemen ke <head>.Pilih elemen yang dapat disertakan dalam <head>.
<p><title><meta>