More About HTML

Pada sub-modul sebelumnya, kita sudah menyiapkan sebuah konten,

menambahkan elemen dasar sebuah berkas HTML (html, head, title, dan
body) dan kita mengidentifikasi sebagian konten. Pada materi ini kita akan
berkenalan lebih dalam mengenai elemen yang ada pada HTML. Sehingga,
kita dapat memilih elemen yang sesuai dalam menampilkan sebuah konten
pada website yang akan kita bangun nantinya.

Dalam sub-modul ini kita akan mempelajari bagaimana cara menambahkan

elemen seperti paragraf, heading, gambar, list, format teks, hingga
menerapkan struktur layout dasar menggunakan elemen dengan
pendekatan semantic HTML.

Pada akhir sub-modul ini kita akan membuat halaman website yang
menerapkan gambar, list, serta elemen lainnya.

Atribut HTML
Pada sub-modul sebelumnya kita sudah mengenal apa itu elemen. Elemen
dituliskan dengan awalan tag pembuka <> dan diakhiri dengan tag penutup
</>. Ada satu hal lagi yang bisa kita tuliskan pada sebuah elemen, lebih
tepatnya pada sebuah tag pembuka, yaitu Attribute. Atribut ini berfungsi
memberikan informasi tambahan pada sebuah elemen. Atribut dituliskan
pada tag pembuka sebuah elemen setelah nama dari elemennya tersebut
ditulis. Contohnya:
<p lang="id">Kota metropolitan terbesar di Provinsi Jawa Barat,
sekaligus menjadi ibu kota provinsi tersebut.</p>

Pada contoh kode tersebut, kita menetapkan artibut bahasa (dengan

penulisan lang) dengan nilai “id” atau Indonesia (kode bahasa bisa
kita explore pada link
berikut: https://www.w3schools.com/tags/ref_language_codes.asp) pada
sebuah elemen paragraf.

Untuk menuliskan sebuah atribut kita memerlukan nama dari atribut itu
diikuti dengan nilai atribut tersebut dalam bentuk string (Dituliskan dalam
tanda kutip dua). Untuk lebih jelasnya, perhatikan gambar berikut:
 Atribut pada elemen juga dapat dituliskan lebih dari satu. Kita bisa
menuliskan kembali seluruh struktur atribut di samping dari atribut yang
sudah ada. Contohnya pada elemen paragraf di atas, kita akan memberikan
sebuah atribut translate, sehingga penulisannya menjadi seperti ini:

<p lang="id" translate="no">Kota metropolitan terbesar di Provinsi Jawa

Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>

Dengan menambahkan atribut translate dan memberikan nilai “no” pada

elemen paragraf tersebut, maka konten dari elemen yang dimaksud tidak
akan diterjemahkan oleh layanan sistem translate otomatis seperti Google
Translate.

Lantas atribut apa saja yang dapat digunakan pada elemen HTML? Pada
elemen HTML terdapat dua jenis atribut, yaitu Global Attribute dan atribut
yang hanya bisa digunakan pada elemen tertentu. Untuk atribut yang
spesifik pada sebuah elemen, kita akan mengulasnya   pada pembahasan
elemen tersebut. Untuk Global Attribute, berikut daftar atribut yang bisa kita
gunakan di seluruh elemen HTML.

accesskey Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada

sebuah element.
class Menentukan satu atau lebih classname untuk sebuah elemen.
contenteditable Menentukan konten dari elemen merupakan konten yang dapat
diubah atau tidak.
data-* Digunakan untuk menyimpan sebuah data pribadi khusus ke halaman atau
aplikasi.
dir Menentukan arah teks untuk konten pada suatu elemen.
draggable Menentukan apakah suatu elemen dapat di-drag atau tidak.
dropzone Menentukan apakah data yang di-drag adalah data yang disalin,
dipindahkan, atau ditautkan saat dijatuhkan.
hidden Menentukan apakah suatu elemen ditampilkan atau tidak pada
browser.
id Menetapkan id pada elemen.
lang Menentukan bahasa pada konten elemen.
spellcheck Menentukan apakah elemen harus diperiksa ejaannya dan tata
bahasanya atau tidak.
style Menentukan styling secara satu baris untuk suatu elemen.
tabindex Menentukan urutan dari suatu elemen.
title Menentukan informasi tambahan tentang suatu elemen.
translate Menentukan apakah konten elemen harus diterjemahkan atau tidak.

Paragraf
Paragraf adalah elemen paling mendasar dari sebuah dokumen teks. Pada
HTML, kita bisa menunjukkan sebuah paragraf dengan menggunakan
elemen <p>. Contohnya seperti ini
1. <p>Kata Bandung berasal dari kata bendung atau bendungan karena
terbendungnya sungai Citarum 
2. oleh lava
3.    Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>
4.  
5.  
6. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari kalimat
Nga-Bandung-an Banda Indung, yang
7.    merupakan kalimat sakral dan luhur karena mengandung nilai ajaran
Sunda. Nga-Bandung-an artinya
8.    menyaksikan atau bersaksi...</p>

Ketika menggunakan paragraf pada browser, teks selalu ditampilkan

dengan garis baru dan terdapat sedikit jarak (space) antar elemennya.
Jarak tersebut nantinya bisa kita atur ketika sudah menerapkan styling.
Paragraf dapat terdiri dari teks, elemen gambar, dan inline element lainnya.
Tetapi hindarilah penggunaan element paragraf untuk konten
seperti heading atau list, karena terdapat elemen lain yang lebih tepat untuk
digunakan.
“Pastikan kita selalu menggunakan elemen (tags) saat menuliskan teks
pada dokumen HTML. Teks yang berada pada dokumen HTML tanpa tags
disebut “anonymous text” dan ini dapat menyebabkan dokumen HTML
menjadi tidak valid.”

Heading
Pada sub-modul sebelumnya, kita sudah melihat contoh
penggunaan header yang diterapkan pada konten yang kita siapkan. Kita
menggunakan <h1> dan <h2> dalam mengindikasi judul dan sub judul di
dalam kontennya. Pada HTML
terdapat <h1> hingga <h6> elemen heading yang dapat kita gunakan.

Ketika kita menambahkan heading pada konten, Heading ini

merepresentasikan garis besar halaman pada sebuah browser. Alat bantu
baca seperti screen reader membaca garis besar halaman untuk bantu
memetakan dan mengarahkan pengguna selama menjelajahi halaman.
Selain itu, heading juga merupakan elemen yang dicari oleh mesin
pencarian contohnya Google Search.

Berikut ini contoh penerapan heading empat level pada sebuah dokumen.
Tiap level heading dituliskan dengan cara yang sama.
1. <h1>Bandung</h1>
2.  
3. <h2>Geografis</h2>
4. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk
morfologi wilayahnya bagaikan sebuah mangkok raksasa</p>
5.  
6. <h2>Wisata</h2>
7. <p>Kota Bandung telah menjadi tujuan utama dalam menikmati liburan
akhir pekan terutama dari masyarakat yang berasal
8.    dari Jakarta sekitarnya.</p>
9.  
10. <h3>Farm House Lembang</h3>
11. <h4>Lokasi</h4>
12. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi
objek wisata yang tidak pernah sepi pengunjung.</p>
13.  
14. <h4>Kondisi</h4>
15. <p>Selain karena letaknya strategis, kawasan ini juga
menghadirkan nuansa wisata khas Eropa. Semua itu diterapkan dalam
16.    bentuk
17.    spot swafoto Instagramable.</p>
18.  
19. <h3>Observatorium Bosscha</h3>
20. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda
Zeiss, Schmidt Bimasakti, Refraktor Bamberg,
21. Cassegrain GOTO, dan Teleskop Surya.</p>

Pada browser standarnya heading akan ditampilkan dengan

tulisan tebal (bold text), dimulai dari h1 dengan ukuran teks paling besar
kemudian berurutan sesuai dengan level heading-nya. 
List
Seperti yang sudah disebutkan pada pembahasan paragraf, tidak semua
teks dibungkus oleh paragraf, salah satunya list. Kita pun terbiasa
membuat list dalam kehidupan sehari-hari, baik membuat to-do list atau
daftar yang terstruktur sekalipun. 

Pada HTML terdapat tiga tipe list:

 Unordered lists : daftar yang ditampilkan tidak memiliki urutan. 

 Ordered lists : daftar yang ditampilkan secara terurut.
 Description lists : daftar yang terbuat dari beberapa istilah diikuti
dengan deskripsi dari istilah tersebut.

Unordered List
Seperti namanya, unordered list merupakan daftar yang tidak
mementingkan urutan. Standarnya, unordered list menampilkan bullet pada
tiap item list-nya (tetapi kita bisa mengubahnya dengan styling). 

Untuk menetapkan konten sebagai unordered list kita

gunakan <ul></ul> kemudian di dalam elemen tersebut kita gunakan
tags <li></li> untuk menetapkan item pada list tersebut. Contoh
penerapannya sebagai berikut:
1. <ul>
2.    <li>Item 1</li>
3.    <li>Item 2</li>
4.    <li>Item 3</li>
5.    <li>Item 4</li>
6. </ul>

Di antara tag elemen <li>, kita dapat mengisikan konten apapun termasuk

elemen HTML lain. Contohnya kita dapat memasukan sebuah heading atau
paragraf pada item.

1. <ul>
2.    <li><h1>Sebuah Heading sebagai item list</h1></li>
3.    <li><h2>Sebuah Heading level 2 sebagai item list</h2></li>
4.    <li><p>Sebuah paragraf sebagai item list</p></li>
5. </ul>
Kita juga bisa menyimpan kembali elemen <ul> untuk membuat sebuah
nested list.

1. <ul>
2.    <li>List item 1</li>
3.    <li>List item 2</li>
4.    <li>List item 3
5.        <ul>
6.            <li>List item 3.1</li>
7.            <li>List item 3.2</li>
8.            <li>List item 3.3</li>
9.        </ul>
10.    </li>
11.    <li>List item 4</li>
12. </ul>

Ordered List
Ordered list digunakan untuk membuat list yang mementingkan urutan.
Contohnya, membuat daftar instruksi langkah demi langkah sehingga
dibutuhkan urutan yang sesuai. Ordered list bekerja seperti unordered list,
namun perbedaanya pada tiap item menampilkan angka bukan
sebuah bullet. Angka yang ditampilkan, otomatis berurut tiap itemnya,
sehingga kita tidak perlu menuliskan secara kasar urutan nomornya. Hal ini
tentu mempermudah kita untuk mengorganisir tiap itemnya.

Untuk menetapkan konten sebagai ordered list kita gunakan <ol></ol>.

Sama seperti Unordered list, tiap item dalam list ditetapkan dengan
menggunakan tags <li></li>.
1. <ol>

2.    <li>Langkah pertama</li>

3.    <li>Langkah kedua</li>

4.    <li>Langkah ketiga</li>

5.    <li>Langkah selanjutnya</li>

6. </ol>

Sama seperti pada unordered list, di antara tag elemen <li> kita dapat

mengisikan konten apapun termasuk elemen HTML lain.
Pada ordered list, tipe urutan angkanya dapat kita atur melalui sebuah
atribut type. Contohnya, selain nomor urutan angka dapat menggunakan
alfabet ataupun angka romawi.
1. <ol type="I">
2.    <li>Langkah pertama</li>
3.    <li>Langkah kedua</li>
4.    <li>Langkah ketiga</li>
5.    <li>Langkah selanjutnya</li>
6. </ol>
7.  
8. <ol type="A">
9.    <li>Langkah pertama</li>
10.    <li>Langkah kedua</li>
11.    <li>Langkah ketiga</li>
12.    <li>Langkah selanjutnya</li>
13. </ol>

Berikut nilai - nilai yang dapat digunakan pada atribut type pada

elemen <ol>:

Nilai Deskripsi
1 Menggunakan angka dalam urutan item (default)
a Menggunakan huruf kecil dalam urutan item
A Menggunakan huruf besar dalam urutan item
i Menggunakan huruf romawi kecil dalam urutan item
I Menggunakan huruf romawi besar dalam urutan item
Selain tipe angka pada urutan, kita juga bisa menetapkan nilai awal pada
sebuah ordered list dengan menggunakan atribut start. Contohnya, jika kita
ingin memulai sebuah list dari angka 7, maka kita tetapkan
atribut start dengan nilai 7 pada elemen <ol>.
1. <ol start="7">

2.    <li>Langkah ketujuh</li>

3.    <li>Langkah kedelapan</li>

4.    <li>Langkah kesembilan</li>

5.    <li>Langkah selanjutnya</li>

6. </ol>
Normalnya urutan list diawali dengan urutan paling rendah dengan
menambahkan atribut reversed pada elemen <ol>, urutan dalam
sebuah list akan dibalik. Atribut ini berbeda dengan atribut yang lain (yang
sudah dibahas sebelumnya), atribut ini tidak memerlukan sebuah nilai
ketika menggunakannya. Atribut ini hanya menandakan sebuah list untuk
membalikan urutan angka pada tiap itemnya.

Menambahkan List pada Halaman Profil

Setelah mempelajari penerapan list pada HTML, sekarang kita coba
terapkan elemen list yang berperan sebagai navigasi pada halaman profil
yang sebelumnya sudah kita buat. 

“Pada langkah ini dan selanjutnya, Sebaiknya gunakanlah teks editor yang
disarankan pada materi text editor agar proses penulisan dan pengelolaan
berkas HTML dapat lebih cepat”.

Silakan buka kembali berkas index.html pada teks editor. Tambahkan

elemen unordered list di bawah dari elemen paragraf pertama pada berkas
HTML sebagai berikut.
1. <body>
2. <h1>Bandung</h1>
3. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus
menjadi ibu kota provinsi tersebut.</p>
4. <ul>
5.    <li>Sejarah</li>
6.    <li>Geografis</li>
7.    <li>Wisata</li>
8. </ul>
9. <h2>Sejarah</h2>

Gambar
Tanpa gambar sebuah website tentu tidak akan menarik, bukan? Ada
beberapa alasan mengapa website perlu gambar. Contohnya kita perlu
menampilkan logo perusahaan, ilustrasi, diagram, dan sebagainya. 

Pada HTML untuk menampilkan sebuah gambar kita bisa menggunakan

tag <img>. Berbeda dengan elemen lain, elemen <img> tidak menuliskan
konten diantara tag pembuka dan tag penutup sebagaimana tag lainnya.
Namun untuk menetapkan gambar yang ditampilkan kita gunakan sebuah
atribut src. Contohnya seperti ini: 
1. <img
src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPe
mrogramanWeb/image-assets/dicoding-logo.png" alt="Dicoding Logo">

Pada contoh kode di atas, perlu kita perhatikan bahwa

element <img> merupakan sebuah elemen kosong (tidak memiliki konten
sehingga tidak ada closing tag).

Selain itu, yang perlu kita perhatikan adalah atribut yang ada pada elemen
tersebut, terdapat dua atribut yang harus kita gunakan ketika menerapkan
elemen <img>.

Yang pertama, atribut src. Atribut ini berfungsi sebagai sumber dari gambar
yang ditampilkan. Atribut ini dapat bernilai url gambar atau path gambar
lokal dari gambar yang digunakan.

Selanjutnya adalah atribut alt. Atribut ini sebenarnya tidak wajib untuk

diterapkan, hanya saja atribut ini akan sangat berguna ketika gambar tidak
berhasil ditampilkan. Nilai atribut ini merupakan gambaran dari gambar
yang ditampilkan dalam bentuk tulisan. Sehingga ketika gambar gagal
ditampilkan maka akan memunculkan teks alternatif yang dapat mewakili
arti dari gambar tersebut.  

Selanjutnya terdapat atribut lain yang bisa Anda gunakan pada elemen ini,
contohnya title. Atribut title berfungsi sebagai informasi tambahan untuk
sebuah gambar. Informasi tersebut akan muncul ketika kita mengarahkan
sebuah cursor pada gambar yang ditampilkan.

Jenis format gambar

Berikut adalah jenis format gambar yang umum digunakan pada pembuatan
website.

Nama Ekstensi Format Keterangan

File
Graphics Interchange Format .gif Dapat digunakan untuk gambar animasi.
Ukuran file biasanya kecil.
 Kualitas gambar terbatas.
Joint Photographic Expert .jpg, .jpeg, .jfif, . Kualitas text pada gambar dapat menjadi buruk.
Group image pjpeg, .pjp Ukuran file lumayan kecil.
Pada website biasanya digunakan untuk gambar yang
tidak banyak text.
Portable Network Graphics .png Text lebih bisa terbaca dibandingkan jenis Jpeg.
Ukuran file dapat menjadi besar sehingga mengurangi
kecepatan memuat situs.
WebP .webp Dibandingkan dengan gambar berkualitas sama pada
jpeg atau png, ukuran file pada webp dapat menjadi
lebih kecil.
Namun tidak semua web browser dapat membaca webp.
Scalable Vector Graphics .svg Kualitas gambar terjaga dan ukuran file kecil.
Namun tidak cocok untuk gambar yang terlalu kompleks
seperti foto.
Pada website biasanya digunakan untuk logo atau icon.

Mengatur ukuran pada gambar

Untuk mengatur ukuran gambar yang ditampilkan juga tentunya
menggunakan sebuah atribut. Untuk menentukan lebar gambar kita
gunakan atribut width, dan untuk menentukan tinggi tentu gunakan
atribut height.

Ketika menggunakan atribut ini disarankan hanya gunakan salah satunya.

Terkecuali kita menentukan nilai lebar dan tingginya sesuai dengan rasio
dari ukuran gambar aslinya.

Contohnya, jika kita tetap memaksa untuk menentukan ukuran panjang dan
lebar sebuah gambar tanpa menyesuaikan rasionya, maka gambar yang
ditampilkan tidak akan proporsional.
<img
src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogra
manWeb/image-assets/dicoding-logo.png" alt="Dicoding Logo" width="500px"
height="200px"> <!-- Jangan lakukan ini! -->

Dengan menetapkan hanya satu atribut ukurannya, maka ukuran lainnya

akan mengikuti sesuai dengan rasio gambar aslinya. Contohnya, kita bisa
menetapkan ukuran gambar berdasarkan nilai lebarnya saja.
<!-- Menetapkan ukuran gambar berdasarkan lebar -->
<img
src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogra
manWeb/image-assets/dicoding-logo.png" alt="Dicoding Logo" width="500px">

Perhatikan penulisan nilai dari atribut src. Penulisan sedikit berbeda dengan

yang telah kita pelajari. Penulisan alamat gambar tidak dimulai
dengan https://www, karena kita menggunakan gambar lokal yang ada
pada project kita. Sehingga untuk penulisan path-nya mengarah ke lokasi
dari berkas gambar tersebut.

Teks Terformat
Sejauh ini, kita sudah mengenal paragraf, heading dan juga list pada HTML.
Tapi masih ada beberapa lagi yang merupakan spesial teks format yang
dapat kita gunakan yaitu <blockquote>, <pre>, dan <figure>.

Long quotations
Jika pada konten kita memiliki sebuah kutipan ataupun sebuah testimonial,
kita dapat gunakan format long quotations dengan menggunakan
tags <blockquote>. Konten di dalam elemen <blockquote> ini dapat berupa
sebuah paragraf, heading, ataupun list. 
<blockquote>

<p>Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang

saling berhubungan yang umumnya berada pada peladen yang sama berisikan

kumpulan informasi yang disediakan secara perorangan, kelompok, atau

organisasi.</p>

</blockquote>

Pada elemen ini kita dapat menggunakan atribut cite untuk menentukan

sumber URL dari sebuah kutipan (Jika kutipan tersebut bersumber dari
sebuah situs website).
1. <blockquote cite="https://id.wikipedia.org/wiki/Situs_web">
 2.    <p>Situs web (bahasa Inggris: website) adalah sekumpulan halaman

web yang saling berhubungan yang umumnya berada pada peladen yang

sama berisikan kumpulan informasi yang disediakan secara perorangan,

kelompok, atau organisasi.</p>

3. </blockquote>

Preformatted text
Pada sub-modul sebelumnya, kita sudah mengetahui bahwa HTML akan
mengabaikan penulisan spasi yang dituliskan secara berulang dan juga line
breaks (baris baru). Tetapi pada beberapa tipe konten seperti contoh kode
atau puisi hal tersebut sangat berarti. Dengan begitu, terdapat sebuah
elemen yang dapat kita gunakan untuk menampilkan konten sesuai yang
kita tulis pada text editor. Untuk menggunakannya, kita gunakan
elemen <pre> sebagai pembungkus kontennya. Perhatikan contoh berikut:
1. <pre>

2.    SAJAK PUTIH

3.  

4. Bersandar pada tari warna pelangi

5. Kau depanku bertudung sutra senja

6. Di hitam matamu kembang mawar dan melati

7. Harum rambutmu mengalun bergelut senda

8.  

9. Sepi menyanyi, malam dalam mendoa tiba

10. Meriak muka air kolam jiwa

11. Dan dalam dadaku memerdu lagu

12. Menarik menari seluruh aku

13.  

14. Hidup dari hidupku, pintu terbuka

 15. Selama matamu bagiku menengadah

Figure
Elemen ini digunakan untuk merepresentasikan konten tersendiri (self-
contained content) seperti ilustrasi, diagram, foto atau bisa juga sebuah
baris kode. Banyak hal yang dapat digunakan dalam elemen ini. 

Elemen ini digunakan untuk mengelompokkan blok konten yang dapat

dipindahkan posisinya dari blok utama sebuah dokumen tanpa
mempengaruhi arti dari induk dokumen.

Di dalam elemen figure kita dapat menuliskan elemen <figcaption> sebagai

sebuah caption (judul) untuk konten tersebut. Berikut contoh penggunaan
figure pada sebuah konten gambar.
1. <p>Dicoding adalah sebuah perusahaan startup yang bertujuan
mengembangkan ekosistem developer di Indonesia.
2.     Berdiri sejak 5 Januari 2015, Dicoding memiliki platform
pembelajaran elektronik di laman Dicoding.com.</p>
3. <figure>
4.  
  <img 
src="https://github.com/dicodingacademy/BelajarDasarPemrogramanWeb/
raw/image-assets/dicoding-logo.png" alt="Sicoding
Logo" width="200px">
5.     <figcaption>Dicoding</figcaption>
6. </figure>
7. <p>Materi perdana yang menjadi magnet dari awal berdirinya Dicoding
hingga kini adalah kelas Menjadi Android Developer
8.     Expert. Kelas ini dikembangkan oleh Google Developer Expert in
Android, Sidiq Permana dan Head of Dicoding Academy,
9.     Ahmad Imaduddin. Seperti halnya kelas Picodiploma lain, modul
online-nya juga hadir dalam bentuk buku berjudul sama
10. yang telah mendapatkan ijin dan ISBN.</p>
11.

Inline Formatting Text

Pada materi kali ini, kita akan mengenal beberapa formatting
text yang digunakan dalam sebuah baris teks (inline text). Sebelum
menjelaskan elemen inline untuk formatting text yang dapat
digunakan, sepertinya kita perlu membahas sekilas
mengenai block dan inline.
Standarnya elemen HTML memiliki dua sifat yaitu block dan inline.
Elemen yang memiliki sifat block selalu membuat baris baru ketika
 menampilkannya, contohnya seperti elemen paragraf, list, heading,
dan lainnya. Berlawanan dengan elemen yang memiliki sifat inline,
yaitu elemen block. Elemen ini tidak menambahkan baris baru ketika
dibuat. Apa saja elemen tersebut? Mari kita bahas satu persatu.

Anchor
Apa itu anchor? Anchor (jangkar) merupakan elemen yang digunakan untuk
membuat sebuah hyperlink ke halaman atau website lain, file, alamat email,
atau URL lainnya. Untuk menggunakan elemen ini kita gunakan
tag <a>...</a> bersama dengan atribut href untuk menetapkan sebuah
target yang akan dituju. 
1. <p>Hubungi kami di</p>

2. <ul>

3.    <li><a href="https://example.com">Website</a></li>

4.    <li><a href="mailto:[email protected]">Email</a></li>

5.    <li><a href="tel:+62123456">Telepon</a></li>

6.    <li><a href="#address">Alamat</a></li>

7. </ul>

Selain atribut href, terdapat beberapa atribut khusus yang dapat digunakan

pada elemen ini, antara lain:

Atribut Nilai Deskripsi

download filename Menginstruksikan browser untuk mengunduh
pada URL yang ditetapkan daripada
mengarahkannya.  
href URL Menetapkan target yang akan diarahkan/unduh
ketika pengguna menekan hyperlink.
hreflang language_code Menetapkan bahasa dari dokumen target.
ping list_of_URLs Menetapkan URL yang akan diberitahu
dengan mengirimkan post request ping pada
body oleh browser (berjalan di belakang layar)
ketika target URL pada hyperlink ditekan.
Biasanya atribut ini digunakan untuk
 pelacakan.
referrerpolicy no-referrer, Menetapkan referensi untuk dikirim pada
target.
no-referrer-when-downgrade,

origin,

origin-when-cross-origin,

unsafe-url
rel alternate, Menetapkan hubungan antara halaman yang
ditampilkan dengan target.
author,

bookmark,

external,

help,

license,

next,

nofollow,

noreferrer,

noopener,

prev,

search,

tag

target _blank, Menetapkan lokasi ketika membuka target

contohnya pada sebuah tab, window atau pada
_parent, tab itu sendiri.

_self,

_top
media media_type Menetapkan tipe media yang digunakan pada
 target.

Emphasized text
Gunakan elemen <em> untuk menunjukan bagian kata yang perlu kita
tekankan. Elemen ini menunjukan stress emphasis atau konten/kata yang
perlu mendapatkan penekanan atau perhatian khusus. Berikut contoh
penggunaannya.
1. <p><em>Oding</em> adalah seorang pelajar</p>

2. <p>Dia adalah seorang <em>pelajar</em></p>

Pada kalimat pertama, penekanan terdapat pada “siapa” seorang pelajar.

Sedangkan pada kalimat kedua, penekanan terdapat pada “apa” yang
sedang dijabati atau diperani oleh Oding.

Standarnya pada browser sebuah kata yang ditekankan akan ditampilkan

dalam gaya miring pada teks nya.

Important text
Gunakan elemen <strong> untuk menunjukan sebuah teks yang begitu
penting (strong importance), serius, ataupun mendesak. Dalam arti teks
tersebut harus dapat perhatian lebih dari teks biasa lainnya.
1. <p>Kesehatan merupakan hal yang penting, jaga pola makan yang teratur

dan <strong>jangan sampai makan tengah

2. malam!</strong></p>

Standarnya pada browser, sebuah teks yang dibungkus dengan

tag  <strong> akan ditampilkan secara tebal. Dan ketika pengguna
menggunakan pembaca layar (screen reader), suara yang terdengar akan
berbeda. Ini mengartikan bahwa teks tersebut penting tidak hanya sekedar
tebal.
Short quotations
Gunakan elemen <q> untuk menandai sebuah kutipan dalam sebuah teks.
Elemen short quations berbeda dengan <blockquote>. Elemen ini
digunakan untuk kutipan pendek yang terletak di dalam baris (inline).
1. <p>Sebelum pulang kerja, ia berkata kepadaku: <q>Maaf saya tidak bisa

hadir dalam pertemuan nanti</q></p>

Standarnya pada browser sebuah teks yang diberi markup <q> akan

ditampilkan di dalam tanda kutip (Quotation marks).

Citation
Selain sebuah atribut, <cite> juga merupakan sebuah elemen yang
digunakan untuk sebuah rujukan pada sebuah dokumen, contohnya sebuah
buku, majalah, artikel dan lainnya.
1. <p>Informasi selengkapnya bisa Anda dapatkan di <cite><a

href="https://dicoding.com">dicoding.com</a></cite>.</p>

Standarnya pada browser sebuah teks yang diberi markup <cite> akan

ditampilkan dengan cetak miring (italic).

Defining terms
Elemen <dfn> digunakan ketika mendefinisikan sebuah istilah (term).
Elemen ini harus terletak pada elemen lain yang menaunginya. Contohnya
pada sebuah elemen <p> atau elemen <section>. Berikut contoh
penggunaannya:
1. <p><dfn>Website</dfn> merupakan halaman yang menampilkan informasi

melalui teks atau gambar. Website dapat diakses melalui internet

dengan menggunakan browser.</p>

Standar pada browser yakni sebuah teks yang diberi markup <dfn> akan

ditampilkan dengan cetak miring (italic).
Subscript dan Superscript
Subscript <sub> dan superscript <sup> merupakan elemen yang dapat
membuat teks yang ditampilkan nampak kecil, dengan posisi di bawah
(sub) atau di atas (sup) dari teks biasanya. Elemen ini digunakan untuk
menunjukan sebuah rumus kimia ataupun matematika.
1. <p>Sukrosa merupakan suatu disakarida yang dibentuk dari monomer-

monomernya yang berupa unit glukosa dan fruktosa,dengan rumus molekul

C₁₂H₂₂O₁₁.</p>

2.  

3. <p>Salah satu persamaan paling umum dalam semua fisika adalah

E=MC²</p>

Highlighted text
Untuk menandai atau menyorot sebuah teks kita bisa menggunakan
elemen <mark>. Elemen ini digunakan ketika terdapat sebuah teks yang
memiliki peran penting, biasanya teks tersebut merupakan bagian yang
paling relevan atau penting dalam sebuah konteks kalimat.
1. <p>Ini adalah periode perang saudara. Pesawat ruang angkasa

pemberontak, menyerang dari pangkalan tersembunyi, telah

2.    memenangkan kemenangan pertama mereka melawan Kekaisaran Galactic

yang jahat. Selama pertempuran,

3.    <mark>mata-mata

4.        Pemberontak berhasil mencuri rencana rahasia

5.    </mark>

6.    ke senjata pamungkas Kekaisaran, STAR DEATH, stasiun ruang angkasa

7.    berlapis baja dengan kekuatan yang cukup untuk menghancurkan

seluruh planet.

8. </p>
Standarnya pada browser teks yang diberi markup <mark> akan
ditampilkan dengan background kuning dan teks hitam.

Line Break
Terkadang kita mungkin perlu menambahkan sebuah baris baru pada
sebuah baris teks (termasuk di dalam paragraf), tetapi kita mengetahui
bahwa browser akan mengabaikan sebuah penulisan spasi ganda ataupun
garis baru, sehingga kita memerlukan sebuah tanda yang dapat digunakan
untuk memberitahu browser untuk “Tambahkan garis baru di sini!”.

Inline line break element atau <br> dapat digunakan untuk memberitahu

browser untuk memberikan sebuah garis baru pada baris teks. Sama
seperti gambar, elemen ini merupakan elemen kosong sehingga kita tidak
membutuhkan sebuah tag penutup.
1. <p>

2.    Dicoding Space,<br>

3.    Jln. Batik Kumeli No. 50.<br>

4.    Bandung.<br>

5.    40123

6. </p>

Menerapkan Anchor pada Navigasi Halaman Profil

Sebelumnya, pada halaman profil yang kita buat, sudah ada sebuah list
sebagai navigasi. Namun demikian, karena belum ada elemen anchor,
maka navigasi tersebut belum dapat kita gunakan. Oleh karena itu, mari kita
tambahkan elemen anchor pada tiap item list-nya.

Silakan buka kembali berkas index.html pada text editor. Tambahkan

elemen anchor di setiap item list.
1. <ul>

2.        <li><a href="#">Sejarah</a></li>

3.        <li><a href="#">Geografis</a></li>
 4.        <li><a href="#">Wisata</a></li>

5. </ul>

Setelah menambahkan elemen anchor pada item list, maka tampilan item

list akan nampak menjadi hyperlink.

Namun ketika salah satu item dipilih, tidak akan terjadi apa apa, karena
pada atribut href kita belum menetapkan sebuah target. Nilai href dapat
berupa sebuah URL untuk mengarahkan ke sebuah halaman yang berbeda.
Selain itu juga berupa tanda pagar (#) diikuti dengan id elemen untuk
mengarahkan tampilan pada elemen sesuai id yang ditentukan (masih
dalam satu halaman). 

Maka dari itu, mari kita berikan atribut id pada sebuah elemen yang akan
menjadi target navigasi. Berikan atribut id pada seluruh
elemen <h2> dengan id sesuai dengan kontennya.
1. <body>

2.   .......

3.    <ul>

4.        <li><a href="#">Sejarah</a></li>

5.        <li><a href="#">Geografis</a></li>

6.        <li><a href="#">Wisata</a></li>

7.    </ul>

8.    <h2 id="sejarah">Sejarah</h2>

9.  .......

10.  

11.    <h2 id="geografis">Geografis</h2>

12.  .......

13.  
 14.    <h2 id="wisata">Wisata</h2>

15.  .......

16. </body>

Kemudian tuliskan juga id elemen target setelah tanda pagar (#) pada tiap
elemen anchor yang terdapat pada item list.
1. <body>

2.   .......

3.    <ul>

4.        <li><a href="#sejarah">Sejarah</a></li>

5.        <li><a href="#geografis">Geografis</a></li>

6.        <li><a href="#wisata">Wisata</a></li>

7.    </ul>

8.    <h2 id="sejarah">Sejarah</h2>

9.  .......

10.  

11.    <h2 id="geografis">Geografis</h2>

12.  .......

13.  

14.    <h2 id="wisata">Wisata</h2>

15.  .......

16. </body>

Setelah menuliskan id elemen pada target anchor, maka hypertext di

navigasi sudah dapat digunakan.
Semantic HTML - Mengorganisasikan Halaman
Konten
Seperti yang sudah disebutkan pada sub-modul sebelumnya, sebuah
website memiliki hierarki konten yang sama seperti dokumen sehari-hari
yang kita baca, misalnya seperti majalah, dan koran. Sehingga, hierarki
pada sebuah website merupakan hal yang penting. Namun, tentu saja
elemen yang terdapat pada HTML perlu kita kelompokkan menjadi
beberapa bagian.

Sebelum HTML5, kita mengelompokan suatu elemen HTML yang memiliki

konten serupa dalam sebuah generic element <div> (kita akan
membahas div secara dalam nanti). Kita mengelompokkan
sebuah header website dengan menggunakan <div>, membuat sebuah
navigation dengan menggunakan <div> juga, artikel atau section yang
lainnya. Kita biasa gunakan atribut class atau id untuk mengindikasikan
peran dari elemen tersebut. Hal ini membuat struktur pada website hilang
(semantic meaningless).

Pada HTML5, kita dikenalkan pada beberapa elemen yang dapat digunakan
dalam mengelompokkan sebuah elemen dengan lebih jelas dan memiliki
arti (semantic HTML). Elemen-elemen ini memiliki nama sesuai dengan
fungsi atau peran dari elemen tersebut.
Kedua contoh gambar di atas menunjukkan struktur halaman yang sama,
yang mana pada contoh pertama banyak elemen <div> yang dapat diubah
dengan layout elemen HTML5.

Mari kita bahas satu per satu elemennya.

Header dan Footer

Elemen ini dapat kita gunakan untuk:

 Sebuah header dan footer utama yang muncul pada awal dan akhir di

sebuah halaman <body>. 
 Header digunakan sebagai pengantar atau pembuka konten dalam
sebuah elemen <article> atau <section>. 
 Footer digunakan sebagai catatan kaki pada sebuah
elemen <article> atau <section>.
Pada contoh dibawah ini elemen <header> digunakan untuk menampilkan
nama situs dan navigasi utama.
1. <body>

2. <header>

3. <h1>Bandung</h1>

4. <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus

menjadi ibu kota provinsi tersebut.</p>

 5. <nav>

6. <ul>

7. <li><a href="#sejarah">Sejarah</a></li>

8. <li><a href="#geografis">Geografis</a></li>

9. <li><a href="#wisata">Wisata</a></li>

10. </ul>

11. </nav>

12. </header>

13. </body>

Dan elemen <footer> digunakan sebagai informasi hak cipta.

1. <body>

2.   <header>

3.     <h1>Bandung</h1>

4.    

<p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menja

di ibu kota provinsi tersebut.</p>

5.     <nav>

6.       <ul>

7.         <li><a href="#sejarah">Sejarah</a></li>

8.         <li><a href="#geografis">Geografis</a></li>

9.         <li><a href="#wisata">Wisata</a></li>

10.       </ul>

11.     </nav>

12.   </header>
 13.   <footer>

14. &copy; 2019, Dicoding Academy

15.   </footer>

16. </body>

Selain itu, elemen <header> dan <footer> dapat digunakan pada sebuah

elemen <article> atau <section>. Header biasanya menampung judul dan
penulis, footer dapat menampung sebuah link untuk membagikan artikel
pada sebuah sosial media.
1. <article>

2.  <header>

3. <h1>Judul Artikel</h1>

4. <h2>Oleh: Dicoding Indonesia</h2>

5. </header>

6. <p>....... Konten artikel dimulai dari sini ......</p>

7. <footer>

8. <p>Bagikan artikel ini melalui</p>

9. <ul>

10. <li>Twitter</li>

11. <li>Facebook</li>

12. <li>......</li>

13. </ul>

14.   </footer>

15. </article>

Perlu kita ketahui bahwa elemen <header> dan <footer> tidak boleh ditulis

di dalam elemen <header> dan <footer> lainnya (bertumpuk/nested).
Main
Element <main> digunakan untuk menampung/mewadahi konten utama
(dominan) dalam <body>. Konten main dapat terdiri dari banyak section,
ataupun artikel, atau konten apapun di dalam elemen main, selama
termasuk konten utama yang dimiliki oleh website.
1. <body>

2.   <header>

3.     <!-- Konten header website -->

4.   </header>

5.   <main>

6. <section>

7. <article>

8. <p>Sebuah article</p>

9. </article>

10. </section>

11. <article>

12. <p>Sebuah article lain</p>

13. </article>

14.   </main>

15.   <footer>

16.     <!-- Konten footer website -->

17.   </footer>

18. </body>

Catatan:
<!-- --> merupakan tag komentar pada HTML, teks yang terdapat di antara
tag tersebut, tidak akan ditampilkan pada website. Fungsinya untuk
memberikan komentar saja/catatan.

Karena elemen <main> merupakan inti konten pada website, jangan

gunakan elemen main lebih dari satu pada berkas HTML.

Nav
Elemen <nav> digunakan untuk menampung sebuah navigasi yang sifatnya
penting (major), contohnya navigasi utama pada sebuah website.

Tapi tidak menjamin pada sebuah website hanya ada satu navigasi.
Contohnya, sebuah akhir artikel pada blog terdapat tautan navigasi menuju
artikel yang dianggap relevan dengan artikel yang telah kita baca. Navigasi
tersebut tidak dianggap sebagai navigasi yang penting, sehingga kita tidak
perlu menggunakan elemen <nav> untuk menampilkannya.

Pada pembahasan header dan footer, kita sudah melihat contoh

penggunaan dari elemen <nav> yang diletakkan pada elemen <header>. 
1. <nav>

2.   <ul>

3.    <li><a href="#sejarah">Sejarah</a></li>

4.    <li><a href="#geografis">Geografis</a></li>

5.    <li><a href="#wisata">Wisata</a></li>

6.   </ul>

7. </nav>

Sebuah navigation pada dasarnya sangat berguna untuk aksesibilitas

website kita. Contohnya ketika pengguna website kita menggunakan screen
reader dalam mengunjungi website, pengguna akan mudah mencari bagian
yang dia inginkan tanpa harus menelusuri seluruh konten website.

Articles
Elemen <article> bertindak sebagai container untuk independen konten
pada sebuah halaman, artinya konten utuh yang tidak terkait dengan konten
lain. Bisa saja konten yang dimaksud berupa artikel blog, komentar, forum
post, dan konten lainnya.

Jika sebuah halaman terdapat beberapa artikel, maka tiap artikel tersebut
seharusnya berada pada elemen article-nya masing-masing.
1. <article>

2. <h2>Sejarah</h2>

3. <img src="img/history.jpg">

4. <p>Kata Bandung berasal dari kata bendung atau bendungan karena

terbendungnya sungai Citarum oleh lava Gunung

5. Tangkuban Parahu yang lalu membentuk telaga...</p>

6. </article>

7. <article>

8. <h2>Geografis</h2>

9. <img src="img/geografis.jpg">

10. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk

morfologi wilayahnya bagaikan sebuah mangkok raksasa,[9]

11. secara geografis kota ini terletak di tengah-tengah provinsi

Jawa Barat..</p>

12. </article>

13. <article>

14. <h2>Wisata</h2>

15. <img src="img/farm-house.jpg">

16. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah

menjadi tujuan utama dalam menikmati liburan akhir pekan

17. terutama dari masyarakat yang berasal dari Jakarta

sekitarnya...</p>
 18. </article>

Elemen <article> dapat berada pada elemen <article> lainnya (nested)

selama artikel tersebut berkaitan dengan induk elemen <article> yang
menampungnya.

Aside
Elemen <aside> memiliki dua tujuan, tergantung kita menempatkannya di
dalam sebuah elemen <article> atau tidak.

Ketika elemen ini ditempatkan di dalam elemen <article>, pada elemen ini

dapat berisikan informasi yang berhubungan dengan artikel tersebut, tetapi
bukan bagian dari konten artikelnya itu sendiri (dipisahkan dari konten
utama). 

Ketika elemen ini ditempatkan di luar dari elemen <article>, pada elemen ini
dapat berisikan informasi yang berhubungan pada keseluruhan halaman.

Elemen <aside> biasanya terletak di samping dari sebuah elemen yang

menampungnya. 
1. <main>

2. <article>

3. ......

4. </article>

5. <aside>

6. <article>

7. <header>

8. <h2>Kota Bandung</h2>

9. <p>Kota Kembang Paris van Java</p>

10. <figure>

11. <img src="img/bandung-badge.png">

 12. <figcaption>Lambang</figcaption>

13. </figure>

14. </header>

15. </article>

16. </aside>

17. </main>

Section
Sebuah elemen yang memiliki kesamaan konten dan memiliki
sebuah heading di dalamnya dapat dikelompokkan dengan menggunakan
elemen <section>. Dengan begitu elemen ini dapat digunakan pada sebuah
elemen <article> yang memiliki konten panjang dan berpotensi untuk
dikelompokkan.

Di dalam sebuah <section> sebaiknya terdapat elemen heading (h1 - h6),

yang menjadi elemen pertama yang dituliskan pada sebuah section untuk
menunjukkan judul atau tema dari bagian konten yang dikelompokkan.
1. <article>

2. <section>

3. <h2>Wisata</h2>

4. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah

menjadi tujuan utama dalam menikmati liburan akhir pekan

5. terutama dari masyarakat yang berasal dari Jakarta sekitarnya.

Selain menjadi kota wisata belanja, kota Bandung

6. juga dikenal dengan sejumlah besar bangunan lama berarsitektur

peninggalan Belanda.</p>

7. </section>

8. <section>
 9. <h3>Farm House Lembang</h3>

10. <img src="img/farm-house.jpg">

11. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk

morfologi wilayahnya bagaikan sebuah mangkok

12. raksasa,[9] secara geografis kota ini terletak di tengah-

tengah provinsi Jawa Barat, serta berada pada ketinggian

13. ±768 m di atas permukaan laut, dengan titik tertinggi di

berada di sebelah utara dengan ketinggian 1.050 meter di

14. atas permukaan laut dan sebelah selatan merupakan kawasan

rendah dengan ketinggian 675 meter di atas permukaan

15. laut.</p>

16. </section>

17. <section>
18. <h3>Observatorium Bosscha</h3>
19. <img src="img/bosscha.jpg">
20. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda
Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain
21. GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis
teleskop terbesar untuk meneropong bintang. Benda ini
22. diletakkan pada atap kubah sehingga saat teropong digunakan,
atap tersebut harus dibuka. Observatorium Bosscha
23. boleh dikunjungi oleh siapa pun, tanpa tiket. Namun, bagi yang
ingin menggunakan teleskop Zeiss, wajib
24. mendaftarkan diri. Untuk instansi atau lembaga pendidikan,
diberikan jadwal hari Selasa sampai Jumat. Sementara
25. itu, kunjungan individu dibuka setiap hari Sabtu.</p>
26. </section>
27. </article>

Generic Element
Setelah mengenal beberapa elemen yang ada, bagaimana jika tidak
terdapat elemen sesuai yang mampu menggambarkan konten kita? Dalam
dunia nyata, jenis informasi sangat beragam dan mungkin tidak semua
semantik elemen yang kalian ketahui dapat menggambarkan jenis
informasinya. Untungnya, HTML menyediakan dua tipe elemen umum
(generic element) yang bisa kita kustomisasi untuk menggambarkan konten
kita dengan tepat. 

Terdapat dua generic elemen yang dapat kita manfaatkan. 

Div
Yang pertama elemen <div>, elemen ini merupakan sebuah wadah
(container) yang bersifat umum untuk menampung beberapa konten.
Elemen ini tidak akan memberikan efek apapun pada konten atau layout
sebelum menerapkan sebuah style menggunakan CSS.

Sebagai sebuah wadah yang murni, elemen <div> tidak merepresentasikan

apapun. Elemen ini lebih sering digunakan untuk mengelompokkan sebuah
konten sehingga dapat memudahkan styling dengan menggunakan
atribut class atau id.
1. <!DOCTYPE html>

2. <html>

3.  

4. <head>

5.    <title>Div Element</title>

6.    <style>

7.        .shadowbox {

8.            width: 15em;

9.            border: 1px solid #333;

10.            box-shadow: 8px 8px 5px #444;

11.            padding: 8px 12px;

12.            background-image: linear-gradient(180deg, #fff, #ddd

40%, #ccc);

13.        }
 14.    </style>

15. </head>

16.  

17. <body>

18.    <div class="shadowbox">

19.        <p>Paragraf ini berada di dalam elemen div, namun akan

ditampilkan sama seperti paragraf biasanya. Elemen ini lebih sering

digunakan untuk mengelompokkan sebuah konten sehingga dapat

memudahkan styling dengan menggunakan atribut class atau id.

20.        </p>

21.    </div>

22. </body>

23.  

24. </html>

Nah, jika kita menerapkan styling seperti di atas, maka akan terlihat efek
dari penggunaan div ini.

Span
Yang kedua elemen <span>, elemen ini memberikan manfaat yang sama
seperti <div>, bedanya elemen ini digunakan sebagai phrase elements dan
tidak terdapat line breaks ketika menggunakannya.
Sederhananya, <span> merupakan sebuah <div> yang digunakan dalam
sebuah baris teks yang dapat diwadahi oleh paragraf, list, heading atau
lainnya.

Mari kita ambil contoh. Tidak ada elemen pada inline element yang memiliki
arti untuk menampung sebuah informasi telepon. Maka dari itu, tiap item
pada nomor telepon bisa ditampung dalam elemen <span> dan
diklasifikasikan (menggunakan atribut class) dengan nilai “phone”.
1. <ul>

2.    <li>Agil: <span class="phone">08123xxx</span></li>

3.    <li>Widy: <span class="phone">08222xxx</span></li>

4.    <li>Gilang: <span class="phone">08333xxx</span></li>

5. </ul>

Dengan menggunakan elemen <span>, kita dapat menentukan

sebuah styling pada teks tersebut.
1. <style>

2.    .phone {

3.        font-weight: bold;

4.    }

5. </style>

6.  

7. <ul>

8.    <li>Agil: <span class="phone">08123xxx</span></li>

9.    <li>Widy: <span class="phone">08222xxx</span></li>

10.    <li>Gilang: <span class="phone">08333xxx</span></li>

11. </ul>

Jika kita coba lihat pada browser, akan tampak seperti ini:
Contoh lainnya, kita juga bisa gunakan elemen <span> dalam sebuah
paragraf.
1. <style>

2.    .bahan {

3.        color: red;

4.    }

5. </style>

6.  

7. <p>Untuk membuat sebuah bakso kita

membutuhkan <span class="bahan">daging sapi</span>, <span

8.        class="bahan">tepung

tapioka</span>, <span class="bahan">bawang

merah</span> dan <span class="bahan">bawang

9. putih</span> kemudian satu sendok makan <span

class="bahan">gula</span> dan <span class="bahan">garam.</span></p>

10. Mengorganisasikan Konten pada Halaman

Profil
11. Kita sudah mengenal beberapa elemen yang digunakan untuk
mengorganisasikan halaman, seperti <header>, <footer>, <article>,
dan yang lainnya. Selain itu, kita juga sudah mengenal generic
element yang digunakan untuk mengelompokkan elemen secara
umum. Sekarang, saatnya kita mengorganisasikan pada halaman
profil yang sudah kita buat sebelumnya.

Kemudian, tuliskan konten berikut di dalam elemen <body> (tuliskan tepat

sebelum penutup tag </body>).
1. <body>

2.   <!-- ...... -->

3.  
 4.  <h2>Kota Bandung</h2>

5.  <p>Kota Kembang Paris van Java</p>

6.  <figure>

7.    <img src="assets/image/bandung-badge.png">

8.    <figcaption>Lambang</figcaption>

9.  </figure>

10. </body>

Tuliskan juga konten copyright berikut tepat setelah tag penutup </figure>.

1. <body>

2.   <!-- ...... -->

3.

4.  </figure>

5.   <p>Belajar Dasar Pemrograman Web &#169; 2019, Dicoding Academy</p>

6. </body>

Setelah menambahkan beberapa konten tersebut, mari saatnya kita

organisasikan konten-konten yang ada agar dapat tercipta struktur halaman
yang baik.

Menetapkan Elemen <header>, <main> dan <footer>.

Mari kita buat konten yang berada pada body menjadi tiga bagian besar
yaitu header, main dan footer. Kelompokkan konten judul besar dan
navigasi menggunakan elemen <header>.
1. <body>

2.   <header>

3.     <h1>Bandung</h1>
 4.     <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus

menjadi ibu kota provinsi tersebut.</p>

5.     <ul>

6.       <li><a href="#sejarah">Sejarah</a></li>

7.       <li><a href="#geografis">Geografis</a></li>

8.       <li><a href="#wisata">Wisata</a></li>

9.     </ul>

10.   </header>

11.

12. <!-- ...... -->

13. </body>

Sebelumnya, kita mengetahui bahwa elemen list yang dibuat nantinya akan
dijadikan sebuah navigasi, maka di dalam elemen header ini, kita
tambahkan elemen <nav> untuk membungkus elemen list. 
1. <body>

2.  <header>

3.    <h1>Bandung</h1>

4.    <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus

menjadi ibu kota provinsi tersebut.</p>

5.    <nav>

6.      <ul>

7.        <li><a href="#sejarah">Sejarah</a></li>

8.        <li><a href="#geografis">Geografis</a></li>

9.        <li><a href="#wisata">Wisata</a></li>

10.      </ul>
 11.    </nav>

12.  </header>

13.

14. <!-- ..... -->

15. </body>

Kemudian pada konten copyright (konten paragraf paling akhir pada sebuah
body) yang kita tambahkan sebelumnya, masukkan konten tersebut ke
dalam elemen <footer>.
1. <body>

2. <!-- ..... -->

3.  

4. <footer>

5.   <p>Belajar Dasar Pemrograman Web &#169; 2019, Dicoding

Academy</p>

6. </footer>

7. </body>

Terakhir, kelompokkan seluruh konten yang terdapat di antara

elemen <header> dan elemen <footer> dengan menggunakan
elemen <main>.
1. <body>

2. <header>

3. <!-- ..... -->

4. </header>

5. <main>
6. <h2 id="sejarah">Sejarah</h2>

7. <img src="assets/image/history.jpg" alt="sejarah">

8. <p>Kata Bandung berasal dari kata bendung atau bendungan karena

terbendungnya sungai Citarum oleh lava Gunung

9. Tangkuban Parahu yang lalu membentuk telaga. Legenda yang

diceritakan oleh orang-orang tua di Bandung mengatakan

10. bahwa nama Bandung diambil dari sebuah kendaraan air yang

terdiri dari dua perahu yang diikat berdampingan yang

11. disebut perahu bandung yang digunakan oleh Bupati Bandung,

R.A. Wiranatakusumah II, untuk melayari Ci Tarum dalam

12. mencari tempat kedudukan kabupaten yang baru untuk

menggantikan ibu kota yang lama di Dayeuhkolot.</p>

13.

14. <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari

kalimat Nga-Bandung-an Banda Indung, yang merupakan

15. kalimat sakral dan luhur karena mengandung nilai ajaran

Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi.

16. Banda adalah segala sesuatu yang berada di alam hidup yaitu

di bumi dan atmosfer, baik makhluk hidup maupun benda

17. mati. Sinonim dari banda adalah harta. Indung berarti Ibu

atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda

18. berada.</p>

19.

20. <h2 id="geografis">Geografis</h2>

21. <img src="assets/image/geografis.jpg" alt="geografis">

22. <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk

morfologi wilayahnya bagaikan sebuah mangkok raksasa,[9]

23. secara geografis kota ini terletak di tengah-tengah provinsi

Jawa Barat, serta berada pada ketinggian ±768 m di atas

24. permukaan laut, dengan titik tertinggi di berada di sebelah

utara dengan ketinggian 1.050 meter di atas permukaan

25. laut dan sebelah selatan merupakan kawasan rendah dengan

ketinggian 675 meter di atas permukaan laut.</p>

26.

27. <p>Kota Bandung dialiri dua sungai utama, yaitu Sungai

Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang

28. pada umumnya mengalir ke arah selatan dan bertemu di Sungai

Citarum. Dengan kondisi yang demikian, Bandung selatan

29. sangat rentan terhadap masalah banjir terutama pada musim

hujan.</p>

30.

31. <h2 id="wisata">Wisata</h2>

32. <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah

menjadi tujuan utama dalam menikmati liburan akhir pekan

33. terutama dari masyarakat yang berasal dari Jakarta

sekitarnya. Selain menjadi kota wisata belanja, kota Bandung juga

34. dikenal dengan sejumlah besar bangunan lama berarsitektur

peninggalan Belanda.</p>

35.

36. <h3>Farm House Lembang</h3>

37. <img src="assets/image/farm-house.jpg" alt="farm house">

38. <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi

objek wisata yang tidak pernah sepi pengunjung. Selain

39. karena letaknya strategis, kawasan ini juga menghadirkan

nuansa wisata khas Eropa. Semua itu diterapkan dalam bentuk

40. spot swafoto Instagramable.</p>

41. <h3>Observatorium Bosscha</h3>

42. <img src="assets/image/bosscha.jpg" alt="bosscha">

43. <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda

Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain

44. GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis

teleskop terbesar untuk meneropong bintang. Benda ini

45. diletakkan pada atap kubah sehingga saat teropong digunakan,

atap tersebut harus dibuka. Observatorium Bosscha boleh

46. dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang ingin

menggunakan teleskop Zeiss, wajib mendaftarkan diri.

47. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari

Selasa sampai Jumat. Sementara itu, kunjungan individu

48. dibuka setiap hari Sabtu.</p>

49.

50. <h2>Kota Bandung</h2>

51. <p>Kota Kembang Paris van Java</p>

52. <figure>

53. <img src="assets/image/bandung-badge.png" alt="">

54. <figcaption>Lambang</figcaption>
 55. </figure>

56. </main>

57. <footer>

58. <!-- ..... -->

59. </footer>

60. </body>

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

Kita sudah membagi konten pada elemen <body> secara besar menjadi
tiga bagian. Tetapi belum sampai disitu, pada salah satu bagiannya yaitu
pada elemen <main>, masih terdapat konten yang dapat kita kelompokan.
Di sini kita akan menerapkan generic elemen
seperti <div> dan semantic elemen lainnya
seperti <aside>, <article>, dan <section> dalam mengelompokkan
elemennya.

Dimulai dari hierarki teratas, dalam elemen <main> kita bagi konten menjadi

dua bagian, yang pertama sebuah konten utama yang dikelompokan
menggunakan <div> dan konten samping yang dikelompokkan
menggunakan <aside>.
1. <main>

2.   <div>

3.     <h2 id="sejarah">Sejarah</h2>

4.     <img src="assets/image/history.jpg" alt="sejarah">

5.     <p>Kata Bandung berasal dari kata bendung atau bendungan karena

terbendungnya sungai Citarum oleh lava Gunung Tangkuban Parahu yang

lalu membentuk telaga. Legenda yang diceritakan oleh orang-orang tua

di Bandung mengatakan bahwa nama Bandung diambil dari sebuah

kendaraan air yang terdiri dari dua perahu yang diikat berdampingan

yang disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A.

Wiranatakusumah II, untuk melayari Ci Tarum dalam mencari tempat

kedudukan kabupaten yang baru untuk menggantikan ibu kota yang lama

di Dayeuhkolot. </p>

6.  

7.     <p>Berdasarkan filosofi Sunda, kata Bandung juga berasal dari

kalimat Nga-Bandung-an Banda Indung, yang merupakan kalimat sakral

dan luhur karena mengandung nilai ajaran Sunda. Nga-Bandung-an

artinya menyaksikan atau bersaksi. Banda adalah segala sesuatu yang

berada di alam hidup yaitu di bumi dan atmosfer, baik makhluk hidup

maupun benda mati. Sinonim dari banda adalah harta. Indung berarti

Ibu atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda

berada.</p>

8.  
9.     <h2 id="geografis">Geografis</h2>

10.     <img src="assets/image/geografis.jpg" alt="geografis">

11.     <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk

morfologi wilayahnya bagaikan sebuah mangkok raksasa, secara

geografis kota ini terletak di tengah-tengah provinsi Jawa Barat,

serta berada pada ketinggian ±768 m di atas permukaan laut, dengan

titik tertinggi di berada di sebelah utara dengan ketinggian 1.050

meter di atas permukaan laut dan sebelah selatan merupakan kawasan

rendah dengan ketinggian 675 meter di atas permukaan laut.</p>

12.  

13.     <p>Kota Bandung dialiri dua sungai utama, yaitu Sungai

Cikapundung dan Sungai Citarum beserta anak-anak sungainya yang pada

umumnya mengalir ke arah selatan dan bertemu di Sungai Citarum.

Dengan kondisi yangdemikian, Bandung selatan sangat rentan terhadap

masalah banjir terutama pada musim hujan.</p>

14.  

15.     <h2 id="wisata">Wisata</h2>

16.     <p>Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah

menjadi tujuan utama dalam menikmati liburan akhir pekan terutama

dari masyarakat yang berasal dari Jakarta sekitarnya. Selain menjadi

kota wisata belanja, kota Bandung juga dikenal dengan sejumlah besar

bangunan lama berarsitektur peninggalan Belanda.

17. </p>

18.  

19.     <h3>Farm House Lembang</h3>

20.     <img src="assets/image/farm-house.jpg" alt="farm house">

21.     <p>Berada di jalur utama Bandung-Lembang, Farm House menjadi

objek wisata yang tidak pernah sepi pengunjung. Selain karena

letaknya strategis, kawasan ini juga menghadirkan nuansa wisata khas

Eropa. Semua itu diterapkan dalam bentuk spot swafoto

Instagramable.</p>

22.  

23.     <h3>Observatorium Bosscha</h3>

24.     <img src="assets/image/bosscha.jpg" alt="bosscha">

25.     <p>Memiliki beberapa teleskop, antara lain, Refraktor Ganda

Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain GOTO, dan

Teleskop Surya. Refraktor Ganda Zeiss adalah jenis teleskop terbesar

untuk meneropong bintang. Benda ini diletakkan pada atap kubah

sehingga saat teropong digunakan, atap tersebut harus dibuka.

Observatorium Bosscha boleh dikunjungi oleh siapapun, tanpa tiket.

Namun, bagi yang ingin menggunakan teleskop Zeiss, wajib mendaftarkan

diri. Untuk instansi atau lembaga pendidikan, diberikan jadwal hari

Selasa sampai Jumat. Sementara itu, kunjungan individu dibuka setiap

hari Sabtu.</p>

26.   </div>

27.  

28.   <aside>

29.     <h2>Kota Bandung</h2>

30.     <p>Kota Kembang Paris van Java</p>

31.     <figure>
 32.       <img src="assets/image/bandung-badge.png">

33.       <figcaption>Lambang</figcaption>

34.     </figure>

35.   </aside>

36. </main>

Dengan begitu, konten elemen <main> terbagi menjadi dua, yaitu

elemen <div> dan <aside>. Selanjutnya, kita mulai kelompokkan konten
lebih detail lagi pada elemen <div>.

Kita bisa lihat, di dalam elemen <div> terdapat konten yang dapat

digolongkan sebagai artikel. Artikel pertama memuat konten mengenai
sejarah, yang kedua mengenai geografi dan selanjutnya mengenai wisata.
Dengan hasil identifikasi tersebut, maka kita memerlukan tiga buah
elemen <article> untuk mengelompokkan masing-masing konten yang
terkait. Masing-masing elemen <article> akan terdiri dari heading, gambar
dan paragraf. 
1. <div>

2. <article>

3. <h2 id="sejarah">Sejarah</h2>

4. <img src="assets/image/history.jpg" alt="sejarah">

5. <p>

6. Kata Bandung berasal dari kata bendung atau bendungan karena

terbendungnya sungai Citarum oleh lava Gunung

7. Tangkuban Parahu yang lalu membentuk telaga. Legenda yang

diceritakan oleh orang-orang tua di Bandung mengatakan

8. bahwa nama Bandung diambil dari sebuah kendaraan air yang

terdiri dari dua perahu yang diikat berdampingan yang

9. disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A.

Wiranatakusumah II, untuk melayari Ci Tarum dalam

10. mencari tempat kedudukan kabupaten yang baru untuk

menggantikan ibu kota yang lama di Dayeuhkolot.

11. </p>

12. <p>

13. Berdasarkan filosofi Sunda, kata Bandung juga berasal dari

kalimat Nga-Bandung-an Banda Indung, yang merupakan

14. kalimat sakral dan luhur karena mengandung nilai ajaran

Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi.

15. Banda adalah segala sesuatu yang berada di alam hidup yaitu

di bumi dan atmosfer, baik makhluk hidup maupun benda

16. mati. Sinonim dari banda adalah harta. Indung berarti Ibu

atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda

17. berada.

18. </p>

19. </article>

20.

21. <article>

22. <h2 id="geografis">Geografis</h2>

23. <img src="assets/image/geografis.jpg" alt="geografis">

24. <p>

25. Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk

morfologi wilayahnya bagaikan sebuah mangkok

26. raksasa,secara geografis kota ini terletak di tengah-tengah

provinsi Jawa Barat, serta berada pada ketinggian ±768

27. m di atas permukaan laut, dengan titik tertinggi di berada di

sebelah utara dengan ketinggian 1.050 meter di atas

28. permukaan laut dan sebelah selatan merupakan kawasan rendah

dengan ketinggian 675 meter di atas permukaan laut.

29. </p>

30. <p>

31. Kota Bandung dialiri dua sungai utama, yaitu Sungai

Cikapundung dan Sungai Citarum beserta anak-anak sungainya

32. yang pada umumnya mengalir ke arah selatan dan bertemu di

Sungai Citarum. Dengan kondisi yang demikian, Bandung

33. selatan sangat rentan terhadap masalah banjir terutama pada

musim hujan.

34. </p>

35. </article>

36.

37. <article>

38. <h2 id="wisata">Wisata</h2>

39. <p>

40. Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah

menjadi tujuan utama dalam menikmati liburan akhir pekan

41. terutama dari masyarakat yang berasal dari Jakarta

sekitarnya. Selain menjadi kota wisata belanja, kota Bandung

42. juga dikenal dengan sejumlah besar bangunan lama

berarsitektur peninggalan Belanda.

43. </p>

44.

45. <h3>Farm House Lembang</h3>

46. <img src="assets/image/farm-house.jpg" alt="farm house">

47. <p>

48. Berada di jalur utama Bandung-Lembang, Farm House menjadi

objek wisata yang tidak pernah sepi pengunjung. Selain

49. karena letaknya strategis, kawasan ini juga menghadirkan

nuansa wisata khas Eropa. Semua itu diterapkan dalam

50. bentuk spot swafoto Instagramable.

51. </p>

52.

53. <h3>Observatorium Bosscha</h3>

54. <img src="assets/image/bosscha.jpg" alt="bosscha">

55. <p>

56. Memiliki beberapa teleskop, antara lain, Refraktor Ganda

Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain

57. GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah jenis

teleskop terbesar untuk meneropong bintang. Benda ini

58. diletakkan pada atap kubah sehingga saat teropong digunakan,

atap tersebut harus dibuka. Observatorium Bosscha

59. boleh dikunjungi oleh siapapun, tanpa tiket. Namun, bagi yang

ingin menggunakan teleskop Zeiss, wajib mendaftarkan

 60. diri. Untuk instansi atau lembaga pendidikan, diberikan

jadwal hari Selasa sampai Jumat. Sementara itu, kunjungan

61. individu dibuka setiap hari Sabtu.

62. </p>

63. </article>

64. </div>

Coba kita lihat pada elemen <article> terakhir, konten tersebut memiliki

subjudul lainnya yaitu membahas tentang wisata Farm House dan
Observatorium Bosscha. Maka pada konten ini kita dapat mengelompokkan
juga subjudul beserta kontennya dengan menggunakan elemen <section>.
Sehingga seluruh konten yang berada pada elemen <div> memiliki struktur
seperti ini:
1. <div>

2. <article>

3. <h2 id="sejarah">Sejarah</h2>

4. <img src="assets/image/history.jpg" alt="sejarah">

5. <p>

6. Kata Bandung berasal dari kata bendung atau bendungan karena

terbendungnya sungai Citarum oleh lava Gunung

7. Tangkuban Parahu yang lalu membentuk telaga. Legenda yang

diceritakan oleh orang-orang tua di Bandung mengatakan

8. bahwa nama Bandung diambil dari sebuah kendaraan air yang

terdiri dari dua perahu yang diikat berdampingan yang

9. disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A.

Wiranatakusumah II, untuk melayari Ci Tarum dalam

10. mencari tempat kedudukan kabupaten yang baru untuk

menggantikan ibu kota yang lama di Dayeuhkolot.

11. </p>

12. <p>

13. Berdasarkan filosofi Sunda, kata Bandung juga berasal dari

kalimat Nga-Bandung-an Banda Indung, yang merupakan

14. kalimat sakral dan luhur karena mengandung nilai ajaran

Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi.

15. Banda adalah segala sesuatu yang berada di alam hidup yaitu

di bumi dan atmosfer, baik makhluk hidup maupun benda

16. mati. Sinonim dari banda adalah harta. Indung berarti Ibu

atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda

17. berada.

18. </p>

19. </article>

20.

21. <article>

22. <h2 id="geografis">Geografis</h2>

23. <img src="assets/image/geografis.jpg" alt="geografis">

24. <p>

25. Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk

morfologi wilayahnya bagaikan sebuah mangkok raksasa,

26. secara geografis kota ini terletak di tengah-tengah provinsi

Jawa Barat, serta berada pada ketinggian ±768 m di

27. atas permukaan laut, dengan titik tertinggi di berada di

sebelah utara dengan ketinggian 1.050 meter di atas

28. permukaan laut dan sebelah selatan merupakan kawasan rendah

dengan ketinggian 675 meter di atas permukaan laut.

29. </p>

30. <p>

31. Kota Bandung dialiri dua sungai utama, yaitu Sungai

Cikapundung dan Sungai Citarum beserta anak-anak sungainya

32. yang pada umumnya mengalir ke arah selatan dan bertemu di

Sungai Citarum. Dengan kondisi yang demikian, Bandung

33. selatan sangat rentan terhadap masalah banjir terutama pada

musim hujan.

34. </p>

35. </article>

36.

37. <article>

38. <h2 id="wisata">Wisata</h2>

39. <p>

40. Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah

menjadi tujuan utama dalam menikmati liburan akhir pekan

41. terutama dari masyarakat yang berasal dari Jakarta

sekitarnya. Selain menjadi kota wisata belanja, kota Bandung

42. juga dikenal dengan sejumlah besar bangunan lama

berarsitektur peninggalan Belanda.

43. </p>
44. <section>

45. <h3>Farm House Lembang</h3>

46. <img src="assets/image/farm-house.jpg" alt="farm house">

47. <p>

48. Berada di jalur utama Bandung-Lembang, Farm House menjadi

objek wisata yang tidak pernah sepi pengunjung. Selain

49. karena letaknya strategis, kawasan ini juga menghadirkan

nuansa wisata khas Eropa. Semua itu diterapkan dalam

50. bentuk spot swafoto Instagramable.

51. </p>

52. </section>

53. <section>

54. <h3>Observatorium Bosscha</h3>

55. <img src="assets/image/bosscha.jpg" alt="bosscha">

56. <p>

57. Memiliki beberapa teleskop, antara lain, Refraktor Ganda

Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain

58. GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah

jenis teleskop terbesar untuk meneropong bintang. Benda

59. ini diletakkan pada atap kubah sehingga saat teropong

digunakan, atap tersebut harus dibuka. Observatorium

60. Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun,

bagi yang ingin menggunakan teleskop Zeiss, wajib

61. mendaftarkan diri. Untuk instansi atau lembaga pendidikan,

diberikan jadwal hari Selasa sampai Jumat. Sementara

 62. itu, kunjungan individu dibuka setiap hari Sabtu.

63. </p>

64. </section>

65. </article>

66. </div>

Sebelumnya, kita sudah menetapkan atribut id pada elemen heading untuk

dijadikan target navigasi, setelah mengorganisasikan konten seperti ini,
pindahkan atribut id dari heading ke elemen <article> yang membungkus
konten tersebut. Karena elemen <article> lebih menunjukkan keseluruhan
dari konten artikelnya.

Kemudian pada elemen <div> kita juga bisa tambahkan atribut id dan beri

nilai “content.” Hal ini nantinya akan digunakan dalam membantu
penyusunan tata letak (layouting) menggunakan CSS.
1. <div id="content">

2. <article id="sejarah">

3. <h2>Sejarah</h2>

4. <img src="assets/image/history.jpg" alt="sejarah">

5. <p>

6. Kata Bandung berasal dari kata bendung atau bendungan karena

terbendungnya sungai Citarum oleh lava Gunung

7. Tangkuban Parahu yang lalu membentuk telaga. Legenda yang

diceritakan oleh orang-orang tua di Bandung mengatakan

8. bahwa nama Bandung diambil dari sebuah kendaraan air yang

terdiri dari dua perahu yang diikat berdampingan yang

9. disebut perahu bandung yang digunakan oleh Bupati Bandung, R.A.

Wiranatakusumah II, untuk melayari Ci Tarum dalam

10. mencari tempat kedudukan kabupaten yang baru untuk

menggantikan ibu kota yang lama di Dayeuhkolot.

11. </p>

12. <p>

13. Berdasarkan filosofi Sunda, kata Bandung juga berasal dari

kalimat Nga-Bandung-an Banda Indung, yang merupakan

14. kalimat sakral dan luhur karena mengandung nilai ajaran

Sunda. Nga-Bandung-an artinya menyaksikan atau bersaksi.

15. Banda adalah segala sesuatu yang berada di alam hidup yaitu

di bumi dan atmosfer, baik makhluk hidup maupun benda

16. mati. Sinonim dari banda adalah harta. Indung berarti Ibu

atau Bumi, disebut juga sebagai Ibu Pertiwi tempat Banda

17. berada.

18. </p>

19. </article>

20.

21. <article id="geografis">

22. <h2>Geografis</h2>

23. <img src="assets/image/geografis.jpg" alt="geografis">

24. <p>

25. Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk

morfologi wilayahnya bagaikan sebuah mangkok raksasa,

26. secara geografis kota ini terletak di tengah-tengah provinsi

Jawa Barat, serta berada pada ketinggian ±768 m di

27. atas permukaan laut, dengan titik tertinggi di berada di

sebelah utara dengan ketinggian 1.050 meter di atas

28. permukaan laut dan sebelah selatan merupakan kawasan rendah

dengan ketinggian 675 meter di atas permukaan laut.

29. </p>

30. <p>

31. Kota Bandung dialiri dua sungai utama, yaitu Sungai

Cikapundung dan Sungai Citarum beserta anak-anak sungainya

32. yang pada umumnya mengalir ke arah selatan dan bertemu di

Sungai Citarum. Dengan kondisi yang demikian, Bandung

33. selatan sangat rentan terhadap masalah banjir terutama pada

musim hujan.

34. </p>

35. </article>

36.

37. <article id="wisata">

38. <h2>Wisata</h2>

39. <p>

40. Sejak dibukanya Jalan Tol Cipularang, kota Bandung telah

menjadi tujuan utama dalam menikmati liburan akhir pekan

41. terutama dari masyarakat yang berasal dari Jakarta

sekitarnya. Selain menjadi kota wisata belanja, kota Bandung

42. juga dikenal dengan sejumlah besar bangunan lama

berarsitektur peninggalan Belanda.

43. </p>
44. <section>

45. <h3>Farm House Lembang</h3>

46. <img src="assets/image/farm-house.jpg" alt="farm house">

47. <p>

48. Berada di jalur utama Bandung-Lembang, Farm House menjadi

objek wisata yang tidak pernah sepi pengunjung. Selain

49. karena letaknya strategis, kawasan ini juga menghadirkan

nuansa wisata khas Eropa. Semua itu diterapkan dalam

50. bentuk spot swafoto Instagramable.

51. </p>

52. </section>

53. <section>

54. <h3>Observatorium Bosscha</h3>

55. <img src="assets/image/bosscha.jpg" alt="bosscha">

56. <p>

57. Memiliki beberapa teleskop, antara lain, Refraktor Ganda

Zeiss, Schmidt Bimasakti, Refraktor Bamberg, Cassegrain

58. GOTO, dan Teleskop Surya. Refraktor Ganda Zeiss adalah

jenis teleskop terbesar untuk meneropong bintang. Benda

59. ini diletakkan pada atap kubah sehingga saat teropong

digunakan, atap tersebut harus dibuka. Observatorium

60. Bosscha boleh dikunjungi oleh siapapun, tanpa tiket. Namun,

bagi yang ingin menggunakan teleskop Zeiss, wajib

61. mendaftarkan diri. Untuk instansi atau lembaga pendidikan,

diberikan jadwal hari Selasa sampai Jumat. Sementara

 62. itu, kunjungan individu dibuka setiap hari Sabtu.

63. </p>

64. </section>

65. </article>

66. </div>

Selanjutnya kita perhatikan konten yang berada pada elemen <aside>.

Konten ini tidak terlalu kompleks seperti pada elemen <div>. Sehingga saat
ini, kita cukup mengelompokkan dengan menggunakan satu
elemen <article>.
1. <aside>

2. <article>

3. <h2>Kota Bandung</h2>

4. <p>Kota Kembang Paris van Java</p>

5. <figure>

6. <img src="assets/image/bandung-badge.png">

7. <figcaption>Lambang</figcaption>

8. </figure>

9. </article>

10. </aside>

Good job! Sekarang konten sudah terorganisir dengan baik. Sampai sejauh
ini, struktur pada elemen <main> akan nampak seperti diagram berikut ini.
Table
Ada beberapa jenis informasi yang perlu ditampilkan dalam bentuk tabel,
contohnya klasemen olahraga atau sebuah jadwal layaknya kalender.
Ketika kita membuat sebuah tabel, pastinya kita akan banyak bermain
dengan baris dan kolom. Pada materi ini kita akan belajar bagaimana cara
membuat dan mengorganisir sebuah tabel pada HTML.

Tapi sebelum itu, apa sih sebenarnya tabel dalam HTML itu? Pembuatan
tabel dalam HTML menggunakan elemen <table>. Elemen <table> ini
merepresentasikan data tabular atau informasi yang disajikan dalam
sebuah tabel. Tabel sendiri disajikan dalam dua dimensi yang terdiri dari
baris dan kolom (cell) yang berisikan sebuah data. Berikut contoh data
sepakbola yang disajikan dalam bentuk tabel.
Struktur Dasar Sebuah Tabel
Tabel pada HTML disusun dari tiga buah elemen,
yaitu <table>, <tr> sebagai "table row", dan <td> sebagai "table data"
atau <th> sebagai "Table head". Elemen <table> digunakan untuk
menandakan dimulai dan diakhirinya sebuah konten tabel dan juga sebagai
wadah untuk tabel itu sendiri. Kemudian, elemen <tr> digunakan untuk
membuat sebuah baris baru yang di dalamnya terdapat
elemen <td> atau <th> sehingga menghasilkan sebuah cell.

Elemen <td> yang berarti “table data” selain membuat cell elemen ini juga

merupakan tempat di mana data pada tabel ditampung. Selanjutnya untuk
elemen <th> atau “table header” digunakan untuk menentukan sebuah
header pada kolom datanya. Untuk lebih jelasnya perhatikan ilustrasi
berikut:
Cukup mudah, kan? Sekarang mari kita ubah menjadi penerapan elemen
HTML.

Berdasarkan ilustrasi di atas, kita dapat menuliskan sebuah struktur dasar

tabel pada HTML seperti berikut:
1. <h1>Pemenang Piala Dunia tiga tahun terakhir</h1>
2.  
3. <table>
4. <tr>
5.      <th>Tahun</th>
6.        <th>Juara 1</th>
7.        <th>Juara 2</th>
8.        <th>Juara 3</th>
9.    </tr>
10.    <tr>
 11.        <td>2018</td>
12.        <td>Prancis</td>
13.        <td>Kroasia</td>
14.        <td>Belgium</td>
15.    </tr>
16.    <tr>
17.        <td>2014</td>
18.        <td>Jerman</td>
19.        <td>Argentina</td>
20.        <td>Belanda</td>
21.    </tr>
22.    <tr>
23.        <td>2010</td>
24.        <td>Spanyol</td>
25.        <td>Belanda</td>
26.        <td>Jerman</td>
27.    </tr>
28. </table>

Perlu kita ingat bahwa seluruh konten atau data dituliskan pada
elemen <td> ataupun <th>. Kita bisa memberikan konten apa saja di
dalamnya seperti teks, gambar, atau tabel lainnya.