Anda tidak perlu menggunakan tag div setiap saat. Gunakan tag HTML semantik ini untuk membuat situs Anda lebih terstruktur dan mudah diakses.
Sebelum pengenalan HTML semantik, pengembang menggunakan div untuk mengatur konten. Elemen Div tidak memiliki arti sendiri. Mereka hanya menyediakan cara untuk menerapkan gaya dan mengatur konten.
Kata semantik artinya berkaitan dengan makna. Elemen HTML semantik menjelaskan tujuan kontennya. Mereka memberikan makna bagi pengembang, pengguna, mesin telusur, dan teknologi pendukung. Berikut adalah daftar tag HTML semantik populer yang dapat Anda gunakan dalam proyek berikutnya.
Apa itu Div?
Dalam HTML, elemen div (divisi) adalah wadah tingkat blok. Anda menggunakan div untuk mengelompokkan atau membagi elemen HTML menjadi beberapa bagian di halaman web. Sintaksnya seperti yang ditunjukkan di bawah ini:
<div>
div>
Manfaat Menggunakan Elemen HTML Semantik Dibandingkan Divs
HTML5 memperkenalkan elemen HTML semantik untuk mempermudah membaca kode. Elemen semantik memberikan makna dan struktur pada konten web.
Mereka membuat kode Anda dapat dimengerti oleh pengembang lain. Mereka juga mempermudah mesin telusur untuk menemukan konten Anda dan mengarahkan lalu lintas ke situs Anda. Berikut adalah beberapa elemen semantik yang dapat Anda gunakan di proyek HTML dan CSS.
1.
Itu tag mendefinisikan bagian header pada dokumen. Biasanya, ini berisi logo situs, navigasi, dan judul halaman. Ini adalah bagian yang muncul di atas halaman web. Anda dapat menyesuaikan header sesuai dengan kebutuhan Anda. Sintaksnya adalah sebagai berikut:
<tubuh><tajuk>
<h1> Hai, yang di sana!h1>
<P>Saya seorang kepalaP>
tajuk>
tubuh>
2.
Itu tag berisi tautan navigasi untuk situs web. Ini bisa berupa menu, daftar isi, atau indeks. Biasanya ditempatkan di dalam menandai. Sintaksnya adalah sebagai berikut:
<tajuk><nav>
<ul>
<li>Tautan situs web sayali>
<li><Ahref="#"> RumahA>li>
<li ><Ahref="#"> Tentang kami A>li>
ul>
nav>
<h1>Di atas adalah bagian navigasi dari situs web saya.h1>
tajuk>
Di browser akan terlihat seperti ini:
Anda dapat menggunakan model tata letak CSS seperti kotak fleksibel CSS untuk menyelaraskan
3.
Itu tag berisi konten utama halaman web. Ini memisahkan konten dari header, sidebar, dan footer. Utama mewakili konten dominan dari bagian.
<tubuh><tajuk>
<judul> Fakta situs web judul>
tajuk>
<utama>
<P> Situs web ini adalah demonstrasi singkat tentang cara kerja tag utama.P>
<P> Itu membungkus bagian dari situs web dengan konten yang bermanfaat.P>
utama>
<footer>
<h3> Ini adalah catatan kaki h3>
footer>
tubuh>
Tampaknya seperti ini:
4.
Menggunakan tag untuk menentukan bagian mandiri dalam dokumen atau situs web. Misalnya, Anda dapat menggunakannya untuk menyusun postingan blog, majalah, atau kartu produk. Itu elemen dapat melampirkan elemen lain termasuk artikel lain, bagian, dan judul. Elemen terlampir harus berhubungan dengan topik artikel.
<artikel>
<h1>Lebih aneh dari fiksih1><artikel>
<h3>Perkenalanh3>
<P>Peristiwa dan orang yang diceritakan dalam buku ini adalah fiktif.P>
artikel>
<artikel>
<h3>Bab satuh3>
<P> Hari itu cerah dan matahari tersenyum dari langitP>
artikel>
artikel>
Sepertinya:
5.
Itu tag berisi konten yang terkait dengan konten utama. Gunakan tag ini untuk membuat sidebar untuk kutipan, komentar, atau sapaan. menyoroti informasi yang mungkin terlewatkan oleh pembaca. Itu menonjol dari sisa konten.
html><html>
<gaya>
tubuh{
background-color:#abdbe3;
}
ke samping {
lebar: 30%;
padding-kiri: 0.5rem;
margin-kiri: 1rem;
melenturkan: kiri;
box-shadow: inset 5px 0 5px -5px hijau;
font-style: miring;
warna merah;
}
ke samping > p {
margin: 0,5 rem;
gaya>
<tubuh>
<utama>
<h1> Burung Penenunh1>
<P>Ploceidae adalah keluarga burung pengicau kecil. Banyak di antaranya disebut penenun, burung penenun, kutilang penenun, dan uskup.P>
<ke samping>
<P>Kerajaan: Animalia
Filum: ChordataP>ke samping>
<P>Dalam klasifikasi terbaru, Ploceidae adalah clade, mengecualikan beberapa burung yang secara historis ditempatkan dalam keluarga. Beberapa burung pipit, tetapi termasuk subfamili Amblyospizinae monotipe.P>
utama>
tubuh>
html>
6.
Itu elemen berisi bagian halaman tanpa elemen semantik tertentu. Bagian mungkin memiliki judul untuk memperkenalkan konten dan menyertakan elemen HTML lainnya. mewakili komponen halaman web seperti bab dalam buku atau blog.
html><html>
<tubuh>
<h1>Alkitabh1>
<bagian>
<h2>Perkenalanh2>
<P>Alkitab adalah kumpulan kitab suci agama yang disakralkan dalam agama Kristen, Yudaisme, Samaritanisme. Alkitab adalah antologi – kompilasi teks dari berbagai bentuk – aslinya ditulis dalam bahasa Ibrani, Aram, dan Yunani Koine.P>
bagian>
<bagian>
<h2>Bab satu: Kejadianh2>
<P>Kitab Kejadian adalah buku pertama dari Alkitab Ibrani dan Perjanjian Lama Kristen. Nama Ibraninya sama dengan kata pertamanya, Bereshit. Kejadian adalah kisah tentang penciptaan dunia, sejarah awal umat manusia, dan leluhur Israel serta asal-usul orang YahudiP>
bagian>tubuh>
html>
Sepertinya:
7.
Itu elementencloses mandiri ilustrasi seperti gambar atau diagram. Ilustrasi ini mereferensikan konten di halaman utama. Angka-angka tersebut dilengkapi dengan keterangan yang ditentukan oleh elemen. Itu menjelaskan tentang gambar tersebut. Itu
html><html>
<tubuh>
<utama>
<bagian>
<h1>Bagian Komputerh1>
<P> Ada beberapa bagian yang bekerja sama untuk membuat sebuah komputerP>
<angka>
<imgsrc="some-url.jpg"alt="mouse komputer">
<figcaption>Ini adalah mouse komputerfigcaption>
angka>
bagian>
utama>
tubuh>
html>
Anda bisa melangkah lebih jauh dan belajar cara membuat gambar responsif dalam HTML.
Itu Elemen HTML membungkus informasi di bagian bawah halaman web. Ini adalah kebalikan dari elemen. Itu mungkin berisi informasi tentang pemilik halaman. Ini termasuk data hak cipta atau tautan ke informasi tambahan situs.
html><html>
<tubuh>
<utama>
<bagian>
<h1>Bagian Komputerh1>
<angka>
<imgsrc="some-url.jpg"alt="mouse komputer">
<figcaption>Ini adalah mouse komputerfigcaption>
angka>
bagian>
utama>
<footer>
<P> Diproduksi oleh ComputerTech © 2023P>
footer>
tubuh>
html>
Kode di atas menambahkan footer ke Bagian Komputer halaman seperti pada gambar berikut.
Mengapa Menggunakan Elemen HTML Semantik?
Menggunakan elemen HTML semantik memberikan konteks pada kode. Siapa pun yang melihat kode dapat dengan mudah memahaminya. Tag membuatnya lebih mudah untuk menata elemen dan berkolaborasi dalam proyek.
Anda dapat menggunakan HTML semantik dengan pustaka dan kerangka kerja frontend. Sebagian besar browser web modern lebih menyukai elemen HTML semantik daripada elemen tradisional. Mulai gunakan HTML semantik dan lihat kode Anda terlihat modern, mudah dibaca, dan rapi.
