Tahukah Kalian, Pengertian HTML Structural Elements, Apa itu Elemen Struktural HTML? Fungsi, Karakteristik dan Ciri serta Dasar-Dasar dan Contohnya dalam HTML5? Benar, ketika Anda belajar tentang HTML5 dan pendekatan pengembangan web yang sedikit berbeda, tempat logis untuk memulainya yaitu adalah dengan elemen struktural barunya. Sementara fitur HTML5 yang ditetapkan secara keseluruhan bisa sedikit mengintimidasi pemula, elemen-elemen baru ini sebenarnya tidak terlalu rumit untuk dipahami.
Betul, ini semua adalah dasar-dasar konseptual dan praktis dari header, footer, section, article, elemen <nav> serta <sidebar>. HTML5 dikatakan lebih bermakna atau lebih dikenal dengan sebutan semantic (baca pengertian HTML semantic element di sini) daripada versi HTML4 sebelumnya dari bahasa markup. Terkait hal tersebut, dalam postingan kali ini, Kami akan membahas secara lengkap tentang apa itu pengertian dari HTML structural elements dengan dasar-dasar dan contohnya. Baiklah langsung saja, mari kita simak ulasannya berikut!
Daftar Isi Konten:
Pengertian HTML Structural Elements
Berarti elemen struktural HTML (dalam bahasa Indonesia), HTML structural elements adalah elemen-elemen yang tersedia dalam HTML untuk menyusun dan mengelompokkan konten, dari tag favorit lama seperti <div> ke tambahan HTML5 baru seperti <article> dan <aside>.
Apa itu Elemen Struktural HTML?
Jadi, apa itu sebenarnya yang dimaksud dengan elemen struktural HTML? Ya, seperti yang sudah Kami jelaskan di atas, istilah ini sering dikenal dengan HTML structural elements terutama terkait dengan front-end development.
Alasan untuk membuat tag struktural baru adalah untuk membagi halaman web menjadi bagian logis dengan tag yang deskriptif dari jenis konten yang dikandungnya.
Secara konseptual, anggaplah halaman web sebagai dokumen, di mana dokumen berisi tajuk, footer, bab, dan berbagai konvensi lainnya yang membagi dokumen menjadi bagian logis.
Bagian ini adalah bagian yang meninjau metode untuk membagi dokumen HTML menggunakan kode sampel umum.
Fungsi HTML Structural Elements
Dalam membahas mengenai pengertian struktural atau HTML structural elements, agar lebih memahaminya, maka kita juga harus mengetahui fungsi mereka secara khusus.
Elemen struktural HTML5 memungkinkan kita untuk membuat basis kode yang lebih semantik dan deskriptif dan digunakan di semua proyek kita.
Alih-alih menggunakan <div> untuk segala sesuatunya, kita bisa menggunakan elemen HTML5 seperti <header>, <footer>, dan <article>.
Mereka bekerja dengan cara yang sama, karena mereka semua merupakan jenis HTML element yaitu block level element (elemen tingkat blok), tetapi lebih meningkatkan tingkat keterbacaan dan dengan demikian memudahkan kita untuk melakukan maintenance.
Ada beberapa praktik umum yang harus dihindari dengan elemen struktural HTML seperti yang dijelaskan dari sumber Situs Opera, di mana tidak semuanya adalah <section>.
Elemen tersebut hanya mewakili bagian dokumen atau aplikasi umum dan harus berisi judul (tajuk).
Kesalahpahaman lain adalah bahwa <figure> elemen tersebut hanya dapat digunakan untuk gambar.
Itu tentu saja keliru, mereka bahkan dapat digunakan untuk menandai diagram, bagan SVG, foto, dan sampel kode.
Yang terakhir adalah seperti elemen navigasi, tidak semua grup tautan pada suatu halaman harus berada dalam elemen nav.
Elemen <nav> terutama ditujukan untuk bagian yang terdiri dari blok navigasi utama.
Karakteristik dan Ciri HTML Structural Elements
Setelah kita mengetahui apa itu pengertian HTML structural elements, sekarang kita akan lanjut membahas krakteristik dan ciri-ciri elemen struktural ini.
Coba lihat beberapa situs web favorit Anda. Mereka akan memiliki konten yang sangat berbeda, fungsionalitas, dan tampilan dan nuansanya.
Tetapi mereka semua akan memiliki struktural atau HTML structural elements yang sama. Tidak sedikit situs yang tidak mengikuti pola ini.
Adapun beberapa karakteristik dan ciri-ciri dari struktural atau HTML structural elements adalah sebagai berikut:
- Header atau masthead; Di bagian atas halaman, HTML structural elements biasanya berisi judul tingkat atas halaman, dan (atau) logo perusahaan. Ini adalah pernyataan di bagian atas halaman yang mengatakan apa website itu dan milik siapa.
- Main content coloumn; Elemen struktural HTML juga mempunyai kolom konten utama, yang menyimpan konten fungsionalitas utama yang Anda gunakan di sini.
- Sidebar; Satu atau lebih bilah sisi, memegang konten periferal yang terkait dengan konten utama halaman dan perubahan saat halaman baru dimuat (misalnya, seperti link atau tautan terkait), atau yang selalu relevan dan tetap ada di seluruh situs (misalnya, informasi “keranjang belanja” di situs e-commerce).
- Navigation menu; Menu navigasi melintasi atau ke bawah halaman. Ini sering diletakkan di sidebar, atau dapat membentuk bagian dari header.
- Footer; Ini adalah bagian yang melintasi bagian bawah halaman dan berisi informasi sekunder seperti informasi hak cipta dan detail kontak.
Dasar-Dasar dan Contoh HTML Structural Elements dalam HTML5
Selain membahas tentang apa itu arti struktural stau HTML structural elements, dalam postingan ini Kami juga akan menjelaskan secara rinci tentang dasar dan praktiknya dalam HTML5 (baca pengertian HTML5 di sini).
Oke baiklah untuk dasar-dasar struktural stau HTML structural elements beserta contohnya akan Kami jelaskan sebagai berikut.
a. Header Element
Dasar yang pertama adalah elemen atau header element. Secara alami, elemen pertama yang akan kita lihat adalah elemen “header”.
Spesifikasinya menggambarkannya secara ringkas sebagai “sekelompok alat bantu pengantar atau navigasi.”
Berlawanan dengan apa yang biasanya Anda asumsikan, Anda dapat memasukkan elemen tajuk baru untuk memperkenalkan setiap bagian dari konten Anda.
Ini tidak hanya disediakan untuk tajuk halaman (yang biasanya Anda tandai <div id="header"> pada HTML4).
Ketika kita menggunakan kata “section” di sini, kita tidak membatasi diri kita pada sectionelemen aktual yang dijelaskan di bagian selanjutnya.
Secara teknis, Kami mengacu pada apa yang disebut HTML5 “content section.”
Ini berarti setiap potongan konten yang mungkin memerlukan tajuknya sendiri, bahkan jika itu berarti ada beberapa potongan yang seperti itu pada satu halaman.
Contohnya elemen atau header element adalah seperti penulisan kode:
<header>
<hgroup>
<h1>Judul 1</h1>
<h2>Sub judul 2</h2>
</hgroup>
</header>
b. Section Element
Elemen dasar berikutnya yang harus Anda kenal adalah elemen atau section element.
Spesifikasi HTML5 mendefinisikan <section> sebagai bagian generik dari dokumen atau aplikasi. Bagian, dalam konteks ini, adalah pengelompokan konten tematik, biasanya berisi dengan judul atau tajuk.
Lebih lanjut dijelaskan bahwa <section> seharusnya tidak digunakan sebagai wadah generik yang ada hanya untuk keperluan penataan atau penulisan skrip.
Isi konten elemen section harus “tematis,” sehingga tidak benar untuk menggunakannya dengan cara umum untuk membungkus konten yang tidak terkait.
Contoh elemen atau section element adalah seperti penulisan kode:
<section id="gitar"> <h2>Nama Gitar</h2> <!-- beberapa elemen article bisa dimasukkan ke bagian ini --> </section> <section id="piano"> <h2>Nama Piano</h2> <!-- beberapa elemen article bisa dimasukkan ke bagian ini --> </section> <section id="drum"> <h2>Nama Drum</h2> <!-- beberapa elemen article bisa dimasukkan ke bagian ini --> </section>
c. Article Element
Dasar struktural stau HTML structural elements selanjutnya adalah elemen atau article element. Elemen <article> ini mirip dengan <section>, tetapi ada beberapa perbedaan penting.
Unsur artikel mewakili komposisi lengkap, atau mandiri, dalam dokumen, halaman, aplikasi, atau situs dan yang pada prinsipnya dapat didistribusikan atau digunakan kembali secara mandiri, misalnya dalam sindikasi.
Istilah kuncinya adalah komposisi mandiri dan dapat didistribusikan secara independen.
Sedangkan elemen “section” dapat berisi konten apa pun yang dapat dikelompokkan secara tematis, “article” harus berupa satu bagian konten yang dapat berdiri sendiri.
Perbedaan ini mungkin sulit dan membingungkan Anda, jadi ketika Anda ragu, coba tes lakukan sindikasi, jika sepotong konten dapat diterbitkan ulang di situs lain tanpa diubah, atau jika dapat didorong sebagai pembaruan melalui RSS, atau di situs media sosial seperti Twitter atau Facebook, maka di adalah bagian dari article element.
contoh elemen atau article element adalah seperti kode di bawah ini:
<article>
<section id="atas">
<h2>Pengenalan</h2>
</section>
<section id="tengah">
<h2>Sejarah</h2>
</section>
<section id="bawah">
<h2>Penutup</h2>
</section>
</article>
Kemudian adalah elemen atau nav element. Adalah merupakan hal yang aman bagi kita untuk mengasumsikan bahwa elemen <nav> akan muncul di hampir setiap proyek.
Elemen ini mewakili persis apa yang disiratkannya yaitu adalah sekelompok tautan navigasi. Meskipun penggunaan yang paling umum <nav> adalah untuk membungkus daftar tautan yang tidak berurutan, ada opsi lain.
Sebagai contoh misalnya, Anda bisa membungkus elemen “nav” di sekitar paragraf teks yang berisi tautan navigasi utama untuk halaman atau bagian halaman.
Dalam kedua kasus tersebut, <nav> elemen harus disediakan untuk navigasi yang sangat penting. Jadi, sangat disarankan agar Anda tidak menggunakan elemen <nav> hanya pada daftar tautan singkat di footer,
Contoh elemen atau nav element adalah sebagai berikut:
<nav>
<h2>Nama Menu</h2>
<ul>
<li><a href="#halaman1">Halaman 1</a></li>
<li><a href="#halaman2">Halaman 2</a></li>
<li><a href="#halaman3">Halaman 3</a></li>
</ul>
</nav>
e. Aside Element
Selanjutnya adalah elemen atau aside element. Elemen ini mewakili bagian dari halaman yang berhubungan secara tangensial (melingkar) dengan konten di sekitar elemen <aside>, dan yang dapat dianggap terpisah dari konten itu.
Ini mewakili bagian dari dokumen yang isinya hanya secara tidak langsung terkait dengan konten utama dokumen. Selain itu sering disajikan sebagai bilah samping atau kotak informasi.
Perlu kalian ketahui bahwa elemen <aside> ini dapat digunakan untuk membungkus sebagian dari konten yang tangensial ke:
- Bagian konten tertentu yang berdiri sendiri (seperti elemen
<article>atau<section>). - Seluruh halaman atau dokumen, seperti yang biasa dilakukan saat menambahkan elemen “sidebar” ke halaman atau situs web.
Elemen <aside> ini tidak boleh digunakan untuk membungkus bagian dari halaman yang merupakan bagian dari konten utama, dengan kata lain, ini tidak dimaksudkan sebagai tanda kurung.
Konten dari elemen ini bisa berdiri sendiri, tetapi masih harus menjadi bagian dari keseluruhannya yang lebih besar.
Contoh elemen atau aside element adalah seperti kode di bawah ini:
<aside>
<table>
<!-- Ini adalah isi dari elemen tabel -->
</table>
</aside>
Dasar struktural stau HTML structural elements terakhir yang akan kita bahas dalam bab ini elemen atau footer element.
Seperti halnya elemen <header>, Anda dapat memiliki banyak elemen <footer> pada satu halaman, dan Anda harus menggunakan “footer” alih-alih sesuatu yang umum seperti <div id="footer"> (seperti pada HTML4).
Elemen “footer”, menurut spesifikasinya, mewakili footer (bagian bawah) untuk bagian konten yang merupakan turunan terdekatnya.
Bagian dari konten bisa seluruh dokumen, atau bisa menjadi elemen <section>, <article> atau elemen <aside>.
Seringkali isi dari elemen <footer> berisi informasi hak cipta, daftar tautan terkait, informasi penulis, dan informasi serupa yang biasanya Anda pikirkan akan muncul di akhir blok konten.
Namun, seperti <aside> dan <header>, elemen “footer” tidak didefinisikan dalam hal posisinya di halaman, sehingga tidak harus muncul di akhir bagian, atau di bagian bawah halaman.
Kemungkinan besar itu akan terjadi, tetapi hal ini tidaklah diperlukan. Sebagai contoh misalnya, informasi tentang penulis posting blog (baca pengertian blog di sini) mungkin ditampilkan di atas postingan, bukan di bawahnya, dan masih akan dianggap informasi dari sebuah “footer”.
Contoh elemen atau footer element adalah seperti ini:
<footer>
<h3 id="copyright">
Copyright and attribution
</h3>
</footer>
Kesimpulan
Baiklah, Kami rasa sudah cukup jelas untuk sekarang. Jadi, berdasarkan penjelasan dan pembahasan Pengertian HTML Structural Elements, Apa itu Elemen Struktural HTML? Fungsi, Karakteristik dan Ciri serta Dasar-Dasar dan Contohnya dalam HTML5 di atas, dapat kita simpulkan bahwa struktural atau HTML structural elements adalah elemen yang digunakan untuk membentuk, menyusun dan memberikan struktur dalam konten kita. HTML5 hadir dengan beberapa tag baru yang sangat berguna untuk struktur markup yang lebih baik dan lebih sederhana serta semantic (semantik).
Walaupun HTML4 sudah memiliki banyak elemen semantik untuk memungkinkan Anda menentukan dengan jelas berbagai fitur halaman web, seperti formulir, daftar, paragraf, tabel, dan lainnya. Namun, HTML4 memiliki kekurangannya, di mana kita masih bergantung pada <div> dan elemen <span> yang berbeda id dan classuntuk menentukan berbagai fitur lainnya, seperti menu navigasi, bagian header, footer, konten utama, sidebar, dan lain sebagainya.
Penutup
Demikianlah tulisan yang dapat Kami bagikan dalam postingan yang membahas mengenai Pengertian HTML Structural Elements, Apa itu Elemen Struktural HTML? Fungsi, Karakteristik dan Ciri serta Dasar-Dasar dan Contohnya dalam HTML5 kali ini. Semoga tulisan ini dapat bermanfaat dan menambah wawasan Kita semua terutama dalam mengetahui istilah-istilah teknologi yang harus diketahui dalam belajar teknologi informasi.
Silahkan bagikan artikel atau tulisan Kami di sini jika kalian rasa ini bermanfaat untuk teman, kerabat dan rekan belajar kalian semua. Sekian dari Saya, Terima Kasih.
Postingan ini juga tersedia dalam versi:
