HTML Lebih Dalam

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: 

1
 
<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: 

1
 
<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.

Attribute Description
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 apakah suatu elemen dapat di-drag atau tidak.
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 Contohnya seperti ini: 

  1
  2
  3
  4
  5
  6
  7
  8
 
<p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum 
  oleh lava
     Gunung Tangkuban Parahu yang lalu membentuk telaga...</p>
   
   
  <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...</p>

Ketika menggunakan paragraf pada browser, teks selalu ditampilkan dengan baris 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.

level heading dituliskan dengan cara yang sama. 

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

Dari penggunaan elemen heading pada konten tersebut, maka kita bisa membuat garis besar dokumen seperti berikut:


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
    2
    3
    4
    5
    6
 
<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>

Ketika kita membukanya pada browser, maka akan nampak seperti ini:


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
    2
    3
    4
    5
 
<ul>
      <li><h1>Sebuah Heading sebagai item list</h1></li>
      <li><h2>Sebuah Heading level 2 sebagai item list</h2></li>
      <li><p>Sebuah paragraf sebagai item list</p></li>
    </ul>

Seperti yang kita sudah ketahui, maka list item akan menampilkan seperti format header.


Kita juga bisa menyimpan kembali elemen <ul> untuk membuat sebuah nested list. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
 
<ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3
        <ul>
          <li>List item 3.1</li>
          <li>List item 3.2</li>
          <li>List item 3.3</li>
        </ul>
      </li>
      <li>List item 4</li>
    </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
    2
    3
    4
    5
    6
 
<ol>
      <li>Langkah pertama</li>
      <li>Langkah kedua</li>
      <li>Langkah ketiga</li>
      <li>Langkah selanjutnya</li>
    </ol>

Ketika kita membukanya pada browser, maka akan nampak seperti ini:


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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
 
<ol type="I">
      <li>Langkah pertama</li>
      <li>Langkah kedua</li>
      <li>Langkah ketiga</li>
      <li>Langkah selanjutnya</li>
    </ol>
     
    <ol type="A">
      <li>Langkah pertama</li>
      <li>Langkah kedua</li>
      <li>Langkah ketiga</li>
      <li>Langkah selanjutnya</li>
    </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
    2
    3
    4
    5
    6
 
<ol start="7">
      <li>Langkah ketujuh</li>
      <li>Langkah kedelapan</li>
      <li>Langkah kesembilan</li>
      <li>Langkah selanjutnya</li>
    </ol>

Maka hasilnya list akan dimulai dengan nilai urutan ke-7.


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. Berikut contoh penggunaannya. 

    1
    2
    3
    4
    5
    6
 
<ol start="7" reversed>
      <li>Langkah ketujuh</li>
      <li>Langkah kedelapan</li>
      <li>Langkah kesembilan</li>
      <li>Langkah selanjutnya</li>
    </ol>

Jika dijalankan, hasilnya akan tampak seperti berikut.


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
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
 
…………..
  <body>
  <h1>Bandung</h1>
  <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
  <ul>
     <li>Sejarah</li>
     <li>Geografis</li>
     <li>Wisata</li>
  </ul>
  <h2>Sejarah</h2>
  ……...

Sehingga pada browser akan menampilkan list seperti ini.


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/BelajarDasarPemrogramanWeb/image-assets/dicoding-logo.png" alt="Dicoding Logo">

Maka gambar akan ditampilkan pada browser seperti ini:


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 File Keterangan
Graphics Interchange Format .gif Dapat digunakan untuk gambar animasi. Ukuran file biasanya kecil. Kualitas gambar terbatas.
Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp Kualitas text pada gambar dapat menjadi buruk. 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. 

1
 
<img src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogramanWeb/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. 

    1
    2
 
<!-- Menetapkan ukuran gambar berdasarkan lebar -->
    <img src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogramanWeb/image-assets/dicoding-logo.png" alt="Dicoding Logo" width="500px">


Atau kita bisa tetapkan ukuran gambar berdasarkan tingginya. Dengan begitu nilai lebar akan menyesuaikan nilainya berdasarkan rasio gambar aslinya. 

    1
    2
 
<!-- Menetapkan ukuran gambar berdasarkan tinggi -->
    <img src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrogramanWeb/image-assets/dicoding-logo.png" alt="Dicoding Logo" height="100px">


Gambar tentu perlu waktu yang lebih untuk ditampilkan di browser sehingga tentukanlah ukuran sesuai kebutuhan.


Menambahkan Gambar pada Halaman Profil

Setelah mempelajari penerapan list pada HTML, sekarang kita coba terapkan elemen gambar konten yang terdapat di halaman profil yang sebelumnya sudah kita buat.

Sebelum menerapkannya, silakan unduh resource gambar yang digunakan pada latihan melalui tautan berikut: assets.zip

Pindahkan berkas yang sudah diunduh pada folder yang sama dengan berkas index.html.


Kemudian lakukan ekstraksi pada berkas assets.zip tersebut dengan melakukan Klik Kanan -> Extract Here.

Jika berhasil, akan terbentuk folder dengan nama assets. Sampai langkah ini, berkas assets.zip sudah tidak digunakan. Kita bisa menghapusnya.


Pastikan di dalam folder assets -> image terdapat empat berkas gambar yang akan kita gunakan pada latihan.


Silakan buka kembali berkas index.html pada teks editor. Tambahkan elemen gambar di bawah elemen heading sesuai kontennya masing-masing. 

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
 
<body>
    ……
   
     <h2>Sejarah</h2>
     <img src="assets/image/history.jpg" alt="sejarah">
   
    …….
   
     <h2>Geografis</h2>
     <img src="assets/image/geografis.jpg" alt="geografis">
   
    …….
   
     <h2>Wisata</h2>
   
    …….
   
   
     <h3>Farm House Lembang</h3>
     <img src="assets/image/farm-house.jpg" alt="farm house">
   
   
    …….
   
   
     <h3>Observatorium Bosscha</h3>
     <img src="assets/image/bosscha.jpg" alt="bosscha">
   
   
    …….
  </body>

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.

Setelah menambahkan elemen gambar, maka halaman akan nampak seperti ini pada browser.


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. 

    1
    2
    3
 
<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>

Berikut tampilan standar ketika sebuah konten berada di dalam <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
    2
    3
 
<blockquote cite="https://id.wikipedia.org/wiki/Situs_web">
       <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>

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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
 
<pre>
       SAJAK PUTIH
     
    Bersandar pada tari warna pelangi
    Kau depanku bertudung sutra senja
    Di hitam matamu kembang mawar dan melati
    Harum rambutmu mengalun bergelut senda
     
    Sepi menyanyi, malam dalam mendoa tiba
    Meriak muka air kolam jiwa
    Dan dalam dadaku memerdu lagu
    Menarik menari seluruh aku
     
    Hidup dari hidupku, pintu terbuka
    Selama matamu bagiku menengadah
    Selama kau darah mengalir dari luka
    Antara kita Mati datang tidak membelah...
     
                       Karya : Chairil Anwar
    </pre>

Sehingga pada browser akan menampilkan hasil yang sama seperti yang kita tuliskan.


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


Contoh lainnya, figure ini dapat kita gunakan untuk markup sebuah konten puisi. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
 
<figure>
       <pre>
               SAJAK PUTIH
     
           Bersandar pada tari warna pelangi
           Kau depanku bertudung sutra senja
           Di hitam matamu kembang mawar dan melati
           Harum rambutmu mengalun bergelut senda
     
           Sepi menyanyi, malam dalam mendoa tiba
           Meriak muka air kolam jiwa
           Dan dalam dadaku memerdu lagu
           Menarik menari seluruh aku
     
           Hidup dari hidupku, pintu terbuka
           Selama matamu bagiku menengadah
           Selama kau darah mengalir dari luka
           Antara kita Mati datang tidak membelah...
       </pre>
       <figcaption>Sajak Putih oleh Charil Anwar</figcaption>
    </figure>


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 block, yaitu elemen inline. 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 ... bersama dengan atribut href untuk menetapkan sebuah target yang akan dituju. 

    1
    2
    3
    4
    5
    6
    7
 
<p>Hubungi kami di</p>
    <ul>
       <li><a href="https://example.com">Website</a></li>
       <li><a href="mailto:info@example.com">Email</a></li>
       <li><a href="tel:+62123456">Telepon</a></li>
       <li><a href="#address">Alamat</a></li>
    </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, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url Menetapkan referensi untuk dikirim pada target.
rel alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, tag Menetapkan hubungan antara halaman yang ditampilkan dengan target.
target _blank, _parent, _self, _top Menetapkan lokasi ketika membuka target contohnya pada sebuah tab, window atau pada tab itu sendiri.
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
    2
 
<p><em>Oding</em> adalah seorang pelajar</p>
    <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 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 quotations 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, Defining Terms, Subscript, Superscript, Highlighted Text dan Line Break

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
    2
    3
 
<p>Sukrosa merupakan suatu disakarida yang dibentuk dari monomer-monomernya yang berupa unit glukosa dan fruktosa,dengan rumus molekul C<sub>12</sub>H<sub>22</sub>O<sub>11</sub>.</p>
     
    <p>Salah satu persamaan paling umum dalam semua fisika adalah E=MC<sup>2</sup></p>

Jika kita lihat pada browser, tampilan akan tampak seperti ini:


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
    2
    3
    4
    5
    6
    7
    8
 
<p>Ini adalah periode perang saudara. Pesawat ruang angkasa pemberontak, menyerang dari pangkalan tersembunyi, telah
       memenangkan kemenangan pertama mereka melawan Kekaisaran Galactic yang jahat. Selama pertempuran,
       <mark>mata-mata
           Pemberontak berhasil mencuri rencana rahasia
       </mark>
       ke senjata pamungkas Kekaisaran, STAR DEATH, stasiun ruang angkasa
       berlapis baja dengan kekuatan yang cukup untuk menghancurkan seluruh planet.
    </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
    2
    3
    4
    5
    6
 
<p>
       Dicoding Space,<br>
       Jln. Batik Kumeli No. 50.<br>
       Bandung.<br>
       40123
    </p>

Jika kita lihat pada browser, maka tampilan akan tampak seperti ini:


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
  2
  3
  4
  5
 
<ul>
         <li><a href="#">Sejarah</a></li>
         <li><a href="#">Geografis</a></li>
         <li><a href="#">Wisata</a></li>
  </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
  2
  3
  4
  5
  6
  7
  8
  9
 
   <h2 id="sejarah">Sejarah</h2>
   .......
   
     <h2 id="geografis">Geografis</h2>
   .......
   
     <h2 id="wisata">Wisata</h2>
   .......
  </body>

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

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
 
<body>
    .......
     <ul>
         <li><a href="#sejarah">Sejarah</a></li>
         <li><a href="#geografis">Geografis</a></li>
         <li><a href="#wisata">Wisata</a></li>
     </ul>
     <h2 id="sejarah">Sejarah</h2>
   .......
   
     <h2 id="geografis">Geografis</h2>
   .......
   
     <h2 id="wisata">Wisata</h2>
   .......
  </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.


Articles, Aside, dan Section

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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
 
<article>
      <h2>Sejarah</h2>
      <img src="img/history.jpg">
      <p>Kata Bandung berasal dari kata bendung atau bendungan karena terbendungnya sungai Citarum oleh lava Gunung
        Tangkuban Parahu yang lalu membentuk telaga...</p>
    </article>
    <article>
      <h2>Geografis</h2>
      <img src="img/geografis.jpg">
      <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok raksasa,[9]
        secara geografis kota ini terletak di tengah-tengah provinsi Jawa Barat..</p>
    </article>
    <article>
      <h2>Wisata</h2>
      <img src="img/farm-house.jpg">
      <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...</p>
    </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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
 
<main>
      <article>
        ......
      </article>
      <aside>
        <article>
          <header>
            <h2>Kota Bandung</h2>
            <p>Kota Kembang Paris van Java</p>
            <figure>
              <img src="img/bandung-badge.png">
              <figcaption>Lambang</figcaption>
            </figure>
          </header>
        </article>
      </aside>
    </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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
 
<article>
      <section>
        <h2>Wisata</h2>
        <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.</p>
      </section>
      <section>
        <h3>Farm House Lembang</h3>
        <img src="img/farm-house.jpg">
        <p>Kota Bandung dikelilingi oleh pegunungan, sehingga bentuk morfologi wilayahnya bagaikan sebuah mangkok
          raksasa,[9] 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>
      </section>
      <section>
        <h3>Observatorium Bosscha</h3>
        <img src="img/bosscha.jpg">
        <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 siapa pun, 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>
      </section>
    </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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
 
<!DOCTYPE html>
    <html>
     
    <head>
       <title>Div Element</title>
       <style>
           .shadowbox {
               width: 15em;
               border: 1px solid #333;
               box-shadow: 8px 8px 5px #444;
               padding: 8px 12px;
               background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
           }
       </style>
    </head>
     
    <body>
       <div class="shadowbox">
           <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.
           </p>
       </div>
    </body>
     
    </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
    2
    3
    4
    5
 
<ul>
       <li>Agil: <span class="phone">08123xxx</span></li>
       <li>Widy: <span class="phone">08222xxx</span></li>
       <li>Gilang: <span class="phone">08333xxx</span></li>
    </ul>

Dengan menggunakan elemen <span>, kita dapat menentukan sebuah styling pada teks tersebut. 

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
 
<style>
       .phone {
           font-weight: bold;
       }
    </style>
     
    <ul>
       <li>Agil: <span class="phone">08123xxx</span></li>
       <li>Widy: <span class="phone">08222xxx</span></li>
       <li>Gilang: <span class="phone">08333xxx</span></li>
    </ul>

Jika kita coba lihat pada browser, akan tampak seperti ini:


Contoh lainnya, kita juga bisa gunakan elemen <span> dalam sebuah paragraf. 

    1
    2
    3
    4
    5
    6
    7
    8
    9
 
<style>
       .bahan {
           color: red;
       }
    </style>
     
    <p>Untuk membuat sebuah bakso kita membutuhkan <span class="bahan">daging sapi</span>, <span
           class="bahan">tepung tapioka</span>, <span class="bahan">bawang merah</span> dan <span class="bahan">bawang
    putih</span> kemudian satu sendok makan <span class="bahan">gula</span> dan <span class="bahan">garam.</span></p>

Jika kita coba lihat pada browser, akan tampak seperti ini:


Mengorganisasikan Konten pada Halaman Profil

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.

Sebelum mengorganisasikan konten, mari kita tambahkan sebuah konten untuk diterapkan pada elemen <aside> nantinya. Unduh terlebih dahulu aset gambar yang akan digunakan pada tautan berikut: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Bandung_coa.png/279px-Bandung_coa.png

Simpanlah gambar tersebut pada folder assets -> images bersama dengan empat gambar yang lain dan beri nama bandung-badge.png.

Kemudian, tuliskan konten berikut di dalam elemen <body> (tuliskan tepat sebelum penutup tag </body>). 

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
 
<body>
    <!-- ...... -->
   
    <h2>Kota Bandung</h2>
    <p>Kota Kembang Paris van Java</p>
    <figure>
      <img src="assets/image/bandung-badge.png">
      <figcaption>Lambang</figcaption>
    </figure>
  </body>

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

  1
  2
  3
  4
  5
  6
 
<body>
    <!-- ...... -->
    
    </figure>
    <p>Belajar Dasar Pemrograman Web &#169; 2019, Dicoding Academy</p>
  </body>

Setelah menambahkan beberapa konten tersebut, mari saatnya kita organisasikan konten-konten yang ada agar dapat tercipta struktur halaman yang baik.


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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
 
<main>
      <div>
        <h2 id="sejarah">Sejarah</h2>
        <img src="assets/image/history.jpg" alt="sejarah">
        <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>
     
        <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>
     
        <h2 id="geografis">Geografis</h2>
        <img src="assets/image/geografis.jpg" alt="geografis">
        <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>
     
        <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>
     
        <h2 id="wisata">Wisata</h2>
        <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.
    </p>
     
        <h3>Farm House Lembang</h3>
        <img src="assets/image/farm-house.jpg" alt="farm house">
        <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>
     
        <h3>Observatorium Bosscha</h3>
        <img src="assets/image/bosscha.jpg" alt="bosscha">
        <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>
      </div>
     
      <aside>
        <h2>Kota Bandung</h2>
        <p>Kota Kembang Paris van Java</p>
        <figure>
          <img src="assets/image/bandung-badge.png">
          <figcaption>Lambang</figcaption>
        </figure>
      </aside>
    </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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
 
<div>
      <article>
        <h2 id="sejarah">Sejarah</h2>
        <img src="assets/image/history.jpg" alt="sejarah">
        <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>
        <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>
      </article>
      
      <article>
        <h2 id="geografis">Geografis</h2>
        <img src="assets/image/geografis.jpg" alt="geografis">
        <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>
        <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 yang demikian, Bandung
          selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.
        </p>
      </article>
      
      <article>
        <h2 id="wisata">Wisata</h2>
        <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.
        </p>
        
        <h3>Farm House Lembang</h3>
        <img src="assets/image/farm-house.jpg" alt="farm house">
        <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>
        
        <h3>Observatorium Bosscha</h3>
        <img src="assets/image/bosscha.jpg" alt="bosscha">
        <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>
      </article>
    </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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
 
<div>
      <article>
        <h2 id="sejarah">Sejarah</h2>
        <img src="assets/image/history.jpg" alt="sejarah">
        <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>
        <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>
      </article>
      
      <article>
        <h2 id="geografis">Geografis</h2>
        <img src="assets/image/geografis.jpg" alt="geografis">
        <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>
        <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 yang demikian, Bandung
          selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.
        </p>
      </article>
      
      <article>
        <h2 id="wisata">Wisata</h2>
        <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.
        </p>
        <section>
          <h3>Farm House Lembang</h3>
          <img src="assets/image/farm-house.jpg" alt="farm house">
          <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>
        </section>
        <section>
          <h3>Observatorium Bosscha</h3>
          <img src="assets/image/bosscha.jpg" alt="bosscha">
          <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>
        </section>
      </article>
    </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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
 
<div id="content">
      <article id="sejarah">
        <h2>Sejarah</h2>
        <img src="assets/image/history.jpg" alt="sejarah">
        <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>
        <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>
      </article>
      
      <article id="geografis">
        <h2>Geografis</h2>
        <img src="assets/image/geografis.jpg" alt="geografis">
        <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>
        <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 yang demikian, Bandung
          selatan sangat rentan terhadap masalah banjir terutama pada musim hujan.
        </p>
      </article>
      
      <article id="wisata">
        <h2>Wisata</h2>
        <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.
        </p>
        <section>
          <h3>Farm House Lembang</h3>
          <img src="assets/image/farm-house.jpg" alt="farm house">
          <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>
        </section>
        <section>
          <h3>Observatorium Bosscha</h3>
          <img src="assets/image/bosscha.jpg" alt="bosscha">
          <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>
        </section>
      </article>
    </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
     2
     3
     4
     5
     6
     7
     8
     9
    10
 
<aside>
      <article>
        <h2>Kota Bandung</h2>
        <p>Kota Kembang Paris van Java</p>
        <figure>
          <img src="assets/image/bandung-badge.png">
          <figcaption>Lambang</figcaption>
        </figure>
      </article>
    </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
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
 
<h1>Pemenang Piala Dunia tiga tahun terakhir</h1>
     
    <table>
       <tr>
           <th>Tahun</th>
           <th>Juara 1</th>
           <th>Juara 2</th>
           <th>Juara 3</th>
       </tr>
       <tr>
           <td>2018</td>
           <td>Prancis</td>
           <td>Kroasia</td>
           <td>Belgium</td>
       </tr>
       <tr>
           <td>2014</td>
           <td>Jerman</td>
           <td>Argentina</td>
           <td>Belanda</td>
       </tr>
       <tr>
           <td>2010</td>
           <td>Spanyol</td>
           <td>Belanda</td>
           <td>Jerman</td>
       </tr>
    </table>

Jika dibuka pada browser, maka akan tampak seperti ini:


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.


Spanning Cell

Terkadang kita membutuhkan sebuah sel yang mencakup untuk dua kolom ataupun dua baris sekaligus. Dalam aplikasi seperti Microsoft Excel, hal ini biasa kita kenal sebagai merging cell atau menggabungkan dua atau lebih sebuah sel. Ini memang menjadi sebuah fitur dasar dalam membuat sebuah tabel. Sehingga, pada HTML pun kita dapat melakukan hal tersebut.

Pada HTML hal ini lebih dikenal sebagai Spanning cell yang artinya menjangkau atau merentangkan sebuah ukuran sel lebih dari ukuran yang biasanya. Dengan spanning cell kita dapat membuat sebuah tabel yang lebih kompleks, tetapi akan membuat markup yang kita tulis menjadi sedikit sulit dibaca.


Column Spans

Untuk merentangkan sebuah kolom (column spanning) kita bisa menggunakan atribut colspan pada elemen <td> atau <th>. Berikut contoh untuk penggunaan atribut colspan sehingga sebuah header mencangkup dua kolom. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
 
<table>
         <tr>
             <th>18:00</th>
             <th>19:00</th>
             <th>20:00</th>
         </tr>
         <tr>
             <td colspan="2">Avenger Infinity Wars</td>
             <td>It Chapter 2</td>
         </tr>
         <tr>
             <td>One Piece: Stampede</td>
             <td>Weathering With You</td>
             <td>Gundala</td>
         </tr>
         <tr>
             <td>Gundala</td>
             <td colspan="2">Avenger Infinity Wars</td>
         </tr>
      </table>

Maka sebuah elemen yang menggunakan atribut colspan akan mencakup ruang kolom sesuai nilai dari atribut itu sendiri.


Untuk lebih jelasnya, kita bisa tambahkan atribut border pada elemen <table> agar terdapat garis pada tepi selnya. Value yang diberikan pada atribut ini berupa integer dalam pixel. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
 
<table border="1">
         <tr>
             <th>18:00</th>
             <th>19:00</th>
             <th>20:00</th>
         </tr>
         <tr>
             <td colspan="2">Avenger Infinity Wars</td>
             <td>It Chapter 2</td>
         </tr>
         <tr>
             <td>One Piece: Stampede</td>
             <td>Weathering With You</td>
             <td>Gundala</td>
         </tr>
         <tr>
             <td>Gundala</td>
             <td colspan="2">Avenger Infinity Wars</td>
         </tr>
      </table>

Tampilan pada browser:


Row Spans

Untuk merentangkan sebuah baris (row spanning) kita dapat menggunakan atribut rowspan. Sama seperti column spanning, tetapi atribut ini akan merentangkan sebuah sel ke bawah. Berikut contohnya. 

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
 
<table border="1">
         <tr>
             <th rowspan="3">18:00</th>
             <td>Avenger Infinity Wars</td>
         </tr>
         <tr>
             <td>One Piece: Stampede</td>
         </tr>
         <tr>
             <td>Gundala</td>
         </tr>
      </table>

Perhatikan elemen <th> yang diberi nilai atribut rowspan. Elemen tersebut berada pada baris pertama dan akan memanjang menjadi tiga baris ke bawahnya. Jadi pada baris tersebut kita membutuhkan dua buah elemen (<th> dan <td>) dan pada baris selanjutnya (baris dua dan tiga) kita hanya perlu satu buah elemen <td> saja di dalam elemen <tr> setelahnya. Sehingga jika dilihat pada browser akan nampak seperti ini:


Catatan: Sayangnya pada contoh kode diatas, penggunaan atribut border pada elemen <table> sudah deprecated (usang) sehingga kita tidak direkomendasikan untuk menggunakannya. Solusi masalah ini adalah menggunakan property border pada stylesheet. Keterangan ini dapat lebih lengkap dipelajari pada situs MDN.


Elemen dan Atribut pada Tabel

Sejauh ini, Anda sudah mengetahui penerapan dasar untuk sebuah tabel pada HTML. Sebenarnya masih terdapat beberapa anggota elemen dan atributnya yang dapat digunakan pada tabel. Karena elemen ini jarang digunakan sehingga kita akan mengenal secara ringkas dan merangkumnya dalam sebuah tabel berikut:

Elemen dan Atribut Description
table Menetapkan elemen tabel.
td Menetapkan sebuah sel dalam baris tabel.
colspan=”number” Jumlah kolom yang dicakup oleh sel.
rowspan=”number” Jumlah baris yang dicakup oleh sel.
headers=”nama header” Mengasosiasikan data sel dengan header.
th Menetapkan header yang terkait dengan baris atau kolom.
colspan=”number” Jumlah kolom dicakup oleh header.
rowspan=”number” Jumlah row yang dicakup oleh header.
headers=”nama header” Mengasosiasikan header dengan header lain.
scope=”row|col|rowgroup|colgroup” Mengasosiasikan header dengan baris, kelompok baris, kolom atau kelompok kolom.
tr Menetapkan sebuah baris pada tabel.
caption Memberikan judul pada sebuah tabel.
col Menetapkan sebuah kolom.
colgroup Menetapkan sebuah kelompok kolom.
tbody Mengidentifikasi sebuah body dalam tabel.
tfoot Mengidentifikasi sebuah footer dalam tabel.
thead Mengidentifikasi sebuah header dalam tabel.

Menerapkan Elemen Tabel pada Halaman Profil

Setelah kita mengetahui cara menerapkan tabel pada website, mari kita perkaya kembali konten pada halaman profil, khususnya konten pada elemen <aside> yang sudah kita buat. Kita akan menambahkan detail informasi dari kota Bandung seperti negara, luas, bahasa daerah, dan kode telepon.

Tapi sebelum itu mari kita atur kembali struktur elemen yang di dalam elemen <aside> tersebut. Saat ini elemen <aside> memiliki struktur seperti ini:


Karena kita akan menambahkan konten lain, maka kita perlu mengelompokkan kembali seluruh elemen di dalam elemen <article>. Kelompokan atau bungkus seluruh elemen yang ada di dalam elemen <article> dengan elemen <header>, dan buat elemen baru yaitu <section> pada level yang setara dengan elemen <header> tersebut. Pada elemen <section> ini konten tabel akan ditempatkan. Silakan buka kembali berkas index.html dan sesuaikan struktur dalam elemen <aside> seperti berikut ini. 

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
 
<aside>
      <article>
           <header>
               <h2>Kota Bandung</h2>
               <p>Kota Kembang Paris van Java</p>
               <figure>
                  <img src="assets/image/bandung-badge.png">
                  <figcaption>Lambang</figcaption>
                </figure>
           </header>
           <section></section>
      </article>
  </aside>

Sehingga struktur pada elemen <aside> akan menjadi seperti ini:


Selanjutnya pada elemen <section> kita masukkan konten berikut:

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
 
  Informasi Lainnya
   
  Negara
  Indonesia
   
  Hari jadi
  25 September 1810
   
  Luas Total
  167.67 km2
   
  Bahasa Daerah
  Sunda
   
  Kode Telepon
  +62 22

Sesuaikan konten tersebut dengan menerapkan elemen yang sesuai, salah satunya gunakan elemen tabel untuk menampung sebagian kontennya. 

   1
   2
   3
   4
   5
   6
   7
   8
   9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
 
<section>
     <h3>Informasi Lainnya</h3>
     <table>
        <tr>
           <th>Negara</th>
           <td>Indonesia</td>
        </tr>
        <tr>
           <th>Hari jadi</th>
           <td>25 September 1810</td>
        </tr>
        <tr>
           <th>Luas Total</th>
           <td>167.67 km<sup>2</sup></td>
        </tr>
        <tr>
           <th>Bahasa Daerah</th>
           <td>Sunda</td>
        </tr>
           <tr>
           <th>Kode Telepon</th>
           <td>+62 22</td>
        </tr>
    </table>
  </section>

Maka pada browser akan tampak seperti gambar berikut:


Special Character

Terdapat beberapa karakter spesial seperti copyright symbol © yang tidak termasuk ke dalam standar kelompok ASCII characters, di mana ASCII characters hanya menyediakan karakter seperti huruf, nomor, dan beberapa simbol dasar. Karakter lain seperti lebih dari (>) atau kurang dari (<) walaupun tersedia dalam ASCII character, karakter tersebut tidak dapat digunakan secara langsung sebagai konten pada HTML. Hal tersebut dikarenakan karakter tersebut akan terbaca sebagai sebuah tag.

Untuk menampilkan karakter seperti yang disebutkan tadi, HTML memerlukan sebuah “escaped” karakter. Escaping artinya adalah tidak menuliskan karakter itu sendiri, melainkan menggantinya dengan nilai numeric atau character reference pada karakternya.

Terdapat dua cara untuk melakukannya, yakni dengan menetapkan nilai numerik (numeric entity) atau menggunakan nama singkatan yang sudah ditetapkan untuk masing-masing karakternya (named entity). Semua referensi karakter dimulai dengan “&” dan diakhiri dengan “;”.

Contohnya untuk menggunakan simbol copyright, kita dapat menggunakan “&copy” 

1
 
<p>Belajar Dasar Pemrograman Web &copy; 2019, Dicoding Academy</p>

atau “&#169”.

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

Alhasil, tampilannya sama.


Berikut daftar karakter spesial dengan karakter referensinya.

Karakter Deskripsi Named Entity Numeric Entity
non-breaking space &nbsp; &#160;
& Ampersand &amp; &#038;
’ Apostrophe &apos; &#039;
< Kurang dari (less-than) &lt; &#060;
> Lebih dari (greater-than) &gt; &#062;
© Hak cipta (copyright) &copy; &#169;
® Merek dagang terdaftar (registered trademark) &reg; &#174;
™ Merek dagang (trademark) &trade; &#8482;
£ Pound &pound; &#163;
¥ Yen &yen; &#165;
€ Euro &euro; &#8364;
– En-dash &ndash; &#8211;
— Em-dash &mdash; &#8212;
‘ Kutip tunggal kiri &lsquo; &#8216;
’ Kutip tunggal kanan &rsquo; &#8217;
“ Kutip ganda kiri &ldquo; &#8220;
” Kutip ganda kanan &rdquo; &#8221;
• Bullet &bull; &#8226;
... Horizontal ellipsis &hellip; &#8230;

Sebelumnya : Pengenalan HTML Selanjutnya : Pengenalan CSS