Dasar Pemrograman

Web
HTML Lanjut

Fakultas : FTI
Program Studi : TEKNIK INFORMATIKA

Tatap Muka

04
Kode Matakuliah : H423A
Disusun oleh : Dea Andini Andriati, S.Kom.,
M.M.S.I
 DESKRIPSI MATERI PERTEMUAN 4

Materi Pertemuan 4 Pendalaman HTML

Deskripsi Materi • Semantic HTML - Mengorganisasikan Halaman Konten
• Header, Footer, Main dan Nav
• Articles, Aside, dan Section
• Generic Element
• Mengorganisasikan Konten pada Halaman Prof il
• Menerapkan Elemen <header>, <main> dan <f ooter>.

• Menggunakan <div>, <aside>, <article>, dan <section> pada Konten

Sub Capaian Mahasiswa diharapkan mampu menganalisa masalah dan kebutuhan
Pembelajaran Mata sehingga dapat merancang dan membuat sebuah web s ederhana
Kuliah (Sub CPMK) menggunakan HTML dan CSS
Deskrispsi Tugas -

Kontrak Perkuliahan Kehadiran

- Jadwal perkuliahan dilakukan setiap hari Selasa, pukul 13.00 –
15.30 WIB
- Wajib hadir,paling lambar 15 menit dari perkuliahan dimulai
- Maksimal ketidakhadiran sebanyak 3x
- Apabila berhalangan untuk hadir, harap inf ormasikan ke grup
Whatsapp
Bobot Nilai
- 10 % Kehadiran
- 25 % UTS
- 25 % UAS
- 40 % Tugas, Kuis, Keaktif an

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

2 Nama Dosen – No Telp http://www.undira.ac.id
 Apa itu Semantic HTML?
Semantic HTML adalah konsep dalam pengembangan web yang berf ungsi menyediakan makna atau
arti lebih dalam kode HTML.
Dalam semantic HTML, masing-masing elemen memiliki nama yang mencerminkan arti dari kontennya,
bukan hanya presentasinya. Semantic membantu mesin pencari dan perangkat pembaca layar (screen
reader) untuk memahami struktur dan konten dari halaman web dengan lebih maksimal.
Artinya, jika kamu ingin membuat kode yang mudah dipahami, tidak hanya oleh manusia tapi juga oleh
mesin, semantic HTML adalah solusi yang tepat.

Gambar 1. Semantic – Non Semantic

Perbedaan keduanya cukup sederhana.

Semantic HTML menggunakan elemen yang menggambarkan arti dari konten, seperti <article> ,
<<section>, dan < nav >. Sedangkan non-semantic HTML menggunakan elemen seperti < div > dan
<span > yang tidak mengungkapkan inf ormasi apa pun tentang kontennya.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

3 Nama Dosen – No Telp http://www.undira.ac.id
 Gambar 2. Contoh <div> <nav> Semantic – Non Semantic

Pada contoh semantic HTML, kita menggunakan tag < nav > yang secara eksplisit menunjukkan ini
adalah bagian navigasi. Sedangkan pada contoh non-semantic HTML, kita menggunakan tag < div >
yang tidak memberikan inf ormasi apa pun tentang kontennya.

Mengapa Harus Pakai Elemen Semantik?

#1 Aksesibilitas
Elemen-elemen semantic dalam HTML memudahkan screen reader dan teknologi bantuan lainnya
untuk menginterpretasikan konten halaman web.
Sebagai contoh, menggunakan tag seperti < header >, < f ooter >, dan < nav > akan membantu screen
reader mengidentif ikasi dan mengakses bagian-bagian penting dalam sebuah halaman. Hal ini
membantu audiens yang memiliki keterbatasan visual atau gangguan lainnya untuk mengakses dan
menjelajahi website lebih mudah.

#2 Untuk SEO (Search Engine Optimization)

Semantic HTML juga berperan penting dalam SEO. Mesin pencari seperti Google memahami struktur
halaman web melalui elemen-elemen semantic dan menilai relevansinya dengan topik yang dicari
audiens.
Contohnya, menggunakan tag < h1 > untuk judul utama akan memberi tahu mesin pencari bahwa teks
di dalamnya adalah inf ormasi penting dari halaman tersebut. Inf ormasi ini dapat meningkatkan ranking
halaman dalam hasil pencarian, sehingga menarik lebih banyak pengunjung ke website.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

4 Nama Dosen – No Telp http://www.undira.ac.id
#3 Pemeliharaan kode
Penggunaan elemen-elemen semantic dalam HTML membantu rekan-rekan developer yang mungkin
akan bekerja pada kode tersebut di masa depan. Elemen-elemen seperti < article >, < section >, dan
< aside > membuat struktur kode lebih jelas dan logis. Kemudahan ini memungkinkan mereka
memahami, mengubah, atau memperluas kode tanpa harus menghabiskan lebih banyak waktu
menelusuri dan memahami strukturnya.

#4 Kemudahan dalam pengembangan tim

Kode yang ditulis dengan semantic HTML lebih mudah dipahami oleh anggota tim lainnya. Ketika setiap
elemen memiliki arti yang jelas, kolaborasi antara anggota tim menjadi lebih lancar, sehingga
mengurangi risiko kesalahan interpretasi dan mempercepat proses pengembangan.

#5 Kompatibilitas dengan device dan browser lain

Elemen semantic membantu dalam menjaga konsistensi tampilan dan f ungsionalitas di berbagai device
dan browser. Fungsi ini mengurangi waktu dan upaya yang dibutuhkan untuk uji kompatibilitas,
membantu dalam menciptakan pengalaman pengguna yang seragam.

Jenis-jenis Elemen Semantic HTML untuk Struktur

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

5 Nama Dosen – No Telp http://www.undira.ac.id
Cara Menggunakan Elemen Semantic HTML

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

6 Nama Dosen – No Telp http://www.undira.ac.id
#3 Menambahkan teks dengan elemen semantic
Judul dan paragraf (< h1 > - < h6 >,
: gunakan elemen ini untuk judul dan paragraf . Disarankan untuk menggunakan heading text secara
berurutan (seperti dari < h1 >, kemudian < h2 >, lanjut ke < h3 > dan seterusnya) karena akan
memengaruhi SEO.

Urutan yang benar membantu mesin pencari memahami struktur konten dengan lebih baik. Jika ingin
mengubah size tulisan (misalnya membuat teks yang biasanya berada di < h2 > menjadi lebih kecil)
kamu dapat menggunakan CSS daripada harus melompati urutan heading, agar tetap menjaga struk tur
semantiknya.

Kutipan (< blockquote >, < q >): gunakan untuk menyertakan kutipan dalam teks.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

7 Nama Dosen – No Telp http://www.undira.ac.id
Membuat Layout dengan Elemen Semantik
Buatlah f ile baru dengan nama layout.html, kemudian isi dengan kode berikut:

Setelah itu, buka dengan web browser.

Maka hasilnya:

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

8 Nama Dosen – No Telp http://www.undira.ac.id
Hasilnya akan terlihat biasa saja dan sama seperti contoh-contoh sebelumnya. Ini karena kita belum
memberikan style CSS.

Style untuk Elemen Semantik

Cara memberikan style untuk elemen semantuk sama saja seperti memberikan style pada elemen
lainnya. Tinggal membuat atribut style, lalu mengisinya dengan kode style CSS.
Sekarang coba ubah contoh yang tadi menjadi seperti ini:

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

9 Nama Dosen – No Telp http://www.undira.ac.id
Kita memberikan warna latar untuk elemen body dan juga beberapa elemen semantik.
Maka hasilnya:

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

10 Nama Dosen – No Telp http://www.undira.ac.id
Mencoba Elemen Semantik Lainnya
Tidak semua elemen semantik bertujuan untuk membuat layout, ada juga beberapa elemen semantik
lainnya yang bertujuan untuk membuat elemen tertentu.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

11 Nama Dosen – No Telp http://www.undira.ac.id
2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning
12 Nama Dosen – No Telp http://www.undira.ac.id
2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning
13 Nama Dosen – No Telp http://www.undira.ac.id
DAFTAR PUSTAKA

Abadi Friska, Faisal M Reza. 2020. Pemrograman Web Dasar 1. Scripta Cendekia

Limbong Tonni, Sriadhi. 2021.Pemrograman Web Dasar. Yayasan Kita Menulis.

Nurjamiyah et al. 2022. Pemrograman Web Untuk Pemula Hingga Mahir. Tahta Media Group

Nofira Andri et al. 2023. Praktik Pemrograman Web. CV Kireinara

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

14 Nama Dosen – No Telp http://www.undira.ac.id