Belajar HTML #12: Mengenal Elemen Semantik pada HTML

 Bagaimana cara menata elemen-elemen ini agar telihat bagus?


Jawabannya:


Kita butuh sebuah layout.


Nah, di HTML terdapat beberapa elemen yang khusus untuk melakukan ini. Yakni elemen semantik seperti <header>, <aside>, <footer>, <article>, dll.

author

Ahmad Muhardian

· 19 Jul 2020

Belajar HTML #12: Mengenal Elemen Semantik pada HTML

#HTML

Html Semantics

Sejauh ini kita sudah mengenal beberapa tag dasar di HTML, seperti elemen paragraf, heading, list, tabel, link, dan form.


Lalu pertanyaanya:


Bagaimana cara menata elemen-elemen ini agar telihat bagus?


Jawabannya:


Kita butuh sebuah layout.


Nah, di HTML terdapat beberapa elemen yang khusus untuk melakukan ini. Yakni elemen semantik seperti <header>, <aside>, <footer>, <article>, dll.


Elemen semantik sebenarnya tidak hanya digunakan untuk membuat layout saja. Ia juga digunakan untuk membuat elemen lain.


Untuk lebih jelasnya, mari kita pelajari lebih detail.



Apa itu Elemen Semantik?

Jadi gini..


Di awal-awal hadirnya HTML dulu, elemen semantik belum ada.


Orang-orang membuat layout dengan menggunakan tag yang salah.


Ada yang membuatnya dengan tag <tabel> dan ada juga dengan tag <div>.


Ini sebenarnya tidak sepenuhnya salah, karena membuat layout dengan kedua tag itu benar-benar bisa.


Tapi..


Ini bukanlah cara yang baik dan akan membuat kode HTML kita sulit terbaca.


Karena itu.. hadirlah elemen semantik sebagai solusi.


Elemen semantik mulai ditambahkan pada HTML 5.


Elemen semantik adalah elemen-elemen yang menyatakan makna atau tujuan dari elemen itu sendiri. 1


Misalnya tag <footer>, tag ini digunakan untuk membuat elemen footer atau bagian kaki dari web.


Jangan gunakan tag ini di bagian paling atas, karena maknanya sudah jelas untuk footer.


Jadi tidak akan ada lagi yang namanya penyalahgunaan tag. Karena setiap tag sudah punya tujuan masing-masing.


Berikut ini daftar elemen-elemen semantik:


<article> — untuk membuat elemen artikel;

<aside> — untuk membuat elemen bagian samping;

<details> — untuk membuat elemen datail atau spoiler;

<figcaption> — untuk membuat teks caption pada figure;

<figure> — untuk membuat figur atau gambar pada artikel;

<footer> — untuk membuat elemen bagian kaki dari web;

<header> — untuk mebuat kepala kop dari web;

<main> — untuk membuat elemen utama;

<mark> — untuk menandai teks;

<nav> — untuk membuat navigasi;

<section> — untuk membuat bagian artikel;

<summary> — untuk membuat ringkasan artikel atau isi spoiler;

<time> — untuk membuat elemen yang menyatakan waktu;

dan masih banyak lagi.

Mengapa Harus Pakai Elemen Semantik?

Salah satu keuntungan menggunakan elemen semantik adalah dokumen HTML kita akan mudah dibaca, baik itu oleh manusia maupun mesin.

Membuat Layout dengan Elemen Semantik

Nah, sekarang mari kita belajar membuat layout dengan ellemen semantik.


Biatlah file baru dengan nama layout.html

Mencoba Elemen Semantik Lainnya

Tidak semua elemen semantik bertujuan untuk membuat layout, ada juga beberapa elemen semantik lainnya yang bertujuan untuk membuat elemen tertentu.


Mari kita pelajari elemen semantik lainnya..


Elemen <detail> dan <summary>

Tag <detail> dan <summary> merupakan tag untuk membuat elemen spoiler.


Tag <detail> akan berisi semua detail konten, lalu tag <summary> akan menjadi tombol yang bisa diklik untuk menampikan detail isinya.

Elemen <time>

Tag <time> merupakan tag untuk membuat elemen waktu. Elemen waktu biasanya dibutuhkan untuk menampilkan waktu.


Misalnya:


Waktu saat sebuah postingan dibut, waktu saat sebuah pesan dibaca, waktu keberangkatan, dan lain sebagainya.



Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Python: Cara Membaca dan Menulis File di Python

Gambar
  Baca dan tulis file adalah teknik dasar yang harus dipahami dalam pemrograman Python, karena banyak digunakan untuk pengolahan dan pemerosesan file. Paham cara membaca dan menulis file dengan Python akan membuatmu mampu membuat aplikasi yang bisa mengambil dan menyimpan data ke file. Selain itu juga, kamu akan lebih mudah memahami beberapa materi Python Pada Python, file hanya dikelompokkan menjadi dua tipe: File Teks : File yang berisi teks. Setiap baris teks memiliki EOL  (End of Line) . Contoh: TXT, MD, CSV, JSON, dsb. File Binary : File yang bukan teks, hanya bisa diproses oleh program tertentu yang memahami strukturnya. Contoh: EXE, JPG, MKV, M4A, 3GP, dsb. Pada tutorial ini, kita akan hanya belajar cara membaca dan menulis file teks saja. Untuk file  binary , mungkin nanti di kesempatan yang lain. Cara Membaca File di Python Python sudah menyediakan fungsi  open()  untuk membaca dan menulis file.  1 Fungsi ini memiliki dua parameter, yaitu nama file...
Baca selengkapnya

Belajar Javascript: Memahami Struktur Data Array pada Javascript

  Apa itu Array? Sebelum kita membahas Array, kita bahas dulu apa itu struktur data? Struktur data  merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer. Salah satu struktur data yang sering digunakan dalam pemrograman adalah  Array . Array merupakan struktur data yang digunakan untuk  menyimpan sekumpulan data  dalam satu tempat. Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya. Indeks array selalu dimulai dari angka nol ( 0 ). Pada teori struktur data… …Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya. Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Cara Menambahkan Data ke Dalam Array Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array: Mengisi menggunakan indeks; Mengisi menggunakan method  push() . Terdapat tiga data di dalam array  buah  dengan indeks: 0 :  "Apel" ...
Baca selengkapnya

Fungsi dan cara kerja HTML

Gambar
  Apa itu HTML?  Hypertext Markup Language  atau  HTML  adalah bahasa markup yang digunakan untuk membuat sebuah halaman web. Isinya terdiri dari berbagai kode yang dapat menyusun struktur suatu website. HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file. Dalam membuat file HTML, terdapat standar atau format khusus yang harus diikuti. Format tersebut telah tertuang dalam standar kode internasional atau  ASCII (American Standard Code for Information Interchange).  Dengan adanya HTML, pengguna dapat membuat atau menyusun heading, paragraf, gambar, link, dan lainnya supaya dapat dilihat banyak orang melalui halaman website.  Baca juga:  Cara Memasukkan dan Mengatur Gambar di HTML Untuk bisa diakses secara umum, pengguna perlu membukanya lewat aplikasi browser, seperti Internet Explorer, Chrome, atau Mozilla Firefox.  Setelah mengetahui pengertian HTML di atas, Anda mungkin penasaran bagaimana sejarah lahirnya HTML h...
Baca selengkapnya