Apa itu HTML Structural Element (Elemen Struktural HTML) dan Cirinya?

0
Ilustrasi Gambar Apa Itu HTML Structural Element dan Cirinya
Ilustrasi Gambar Apa Itu HTML Structural Element dan Cirinya

Pengertian HTML Structural Element adalah

Apa itu HTML Structural Element (Elemen Struktural HTML)? HTML Structural Element atau Elemen Struktural HTML (dalam Bahasa Indonesia) merupakan Html elemen-elemen yang tersedia dalam HTML untuk menyusun dan mengelompokkan konten, dari favorit lama seperti <div> ke tambahan HTML5 baru seperti <article> dan <aside>.

Ciri HTML Structural Element

Mengacu pada pengertian HTML Structural Element di atas, coba lihat beberapa situs web favorit Anda. Mereka akan memiliki konten yang sangat berbeda, fungsionalitas, dan tampilan dan nuansanya, tetapi mereka semua akan memiliki HTML Structural Element (Elemen Struktural HTML) yang sama. Ada sangat sedikit situs yang setidaknya tidak mengikuti pola ini:

  • Header (atau masthead); di bagian atas halaman, biasanya berisi judul tingkat atas halaman, dan (atau) logo perusahaan. Ini adalah pernyataan besar yang berani di bagian atas halaman yang mengatakan apa Website itu dan milik siapa.
  • Main Content Coloumn; 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, tautan terkait), atau 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; yang melintasi bagian bawah halaman dan berisi informasi sekunder seperti informasi hak cipta dan detail kontak.
Baca Juga :  Pengertian Bug Adalah: Klasifikasi, Sejarah dan Perbedannya dengan Error

Menyusun HTML Structural Element (Elemen Struktural HTML) Halaman HTML 4

HTML4 mengandung dua elemen penampung (Container) yang umum, yaitu:

  • <div> adalah Container (wadah) blok yang dapat Anda gunakan untuk mengelompokkan bagian-bagian dari konten level blok secara bersamaan.
  • <span> adalah Container (wadah) inline yang dapat Anda gunakan untuk mengelompokkan potongan konten inline bersama-sama.

Perhatikan bahwa elemen <div> dan <span> tidak memiliki konten atau dimensi yang melekat, hanya kontennya, hingga ditata melalui CSS atau dimanipulasi oleh JavaScript. Mereka juga tidak memiliki semantik atau Semantic (HTML), dan satu-satunya cara Anda dapat mengidentifikasi mereka adalah dengan memberi mereka atribut kelas atau id.

Anda hanya boleh menggunakan elemen-elemen ini ketika tidak ada elemen semantik yang lebih tepat untuk digunakan untuk menandai konten. Menandai paragraf dan judul dengan <div> adalah contoh yang tidak baik, meskipun mungkin terlihat oke pada awalnya, halaman tersebut tidak akan dapat diakses oleh mereka yang menggunakan pembaca layar (pembaca layar membutuhkan struktur judul yang baik untuk menavigasi), dan itu akan lebih membengkak, lebih sulit untuk dibaca, dan kurang efisien untuk gaya dengan CSS . Cobalah untuk mengurangi jumlah <div> dan <span> yang digunakan bila memungkinkan: penyalahgunaan elemen-elemen ini mengarah pada apa yang sering disebut “div-itis”.

Contoh Penulisan Markup HTML Structural Element (Elemen Struktural HTML) di HTML4

Jadi, dalam HTML4 penulisan HTML Structural Element (Elemen Struktural HTML) ini biasanya akan terlihat seperti dibawah ini:

<body>

  <div id="header">
    <!-- header content disini -->
  </div>

  <div id="nav">
    <!-- navigation menu disini -->
  </div>

  <div id="sidebar1">
    <!-- sidebar content disini -->
  </div>

  <div id="main">
    <!-- main page content disini -->
  </div>

  <div id="sidebar2">
    <!-- sidebar content disini -->
  </div>

  <div id="footer">
    <!-- footer content disini -->
  </div>

</body>

HTML Structural Element (Elemen Struktural HTML) Halaman HTML 5

Cara HTML4 menyusunnya memang sepertinya semuanya terlihat baik-baik saja, tetapi semantik itu bisa jauh lebih baik. Manusia dapat membedakan konten yang berbeda, tetapi mesin tidak bisa, Web Browser tidak melihat <div> yang berbeda sebagai header, footer, dan lain sebagainya. Mereka menganggap sebagai div yang berbeda.

Baca Juga :  Pengertian Wireframe: Elemen, Kelebihan dan Kekurangan Wireframing

Bukankah lebih bermanfaat jika browser dan pembaca layar dapat secara langsung mengidentifikasi, katakanlah seperti menu navigasi sehingga pengguna yang tunanetra dapat menemukannya dengan lebih mudah, atau item berita yang berbeda di banyak blog sehingga mereka dapat dengan mudah tersindikasi dalam umpan RSS tanpa pemrograman tambahan?

Bahkan jika Anda menggunakan kode tambahan untuk menyelesaikan beberapa masalah ini, Anda masih bisa melakukannya dengan cara yang baik untuk situs web Anda, karena pengembang web atau Web Developer yang berbeda akan menggunakan kelas dan nama ID yang berbeda, terutama ketika Anda mempertimbangkan audiens internasional, pengembang web berbeda di berbagai negara akan menggunakan berbagai bahasa untuk menulis nama kelas dan id mereka.

Oleh karena itu sangat masuk akal untuk mendefinisikan serangkaian elemen yang konsisten untuk digunakan semua orang untuk blok struktural umum yang muncul di begitu banyak situs web, dan itulah yang didefinisikan dalam HTML5.

Elemen HTML5 baru yang akan kita bahas dalam artikel ini adalah:

  • <header>; Digunakan untuk memuat konten tajuk situs.
  • <footer>; Berisi konten footer dari sebuah situs.
  • <nav>; Berisi menu navigasi, atau fungsi navigasi lainnya untuk halaman.
  • <article>; Berisi konten utama atau mandiri yang masuk akal jika disindikasikan sebagai item RSS; misalnya, sebuah berita.
  • <section>; Digunakan untuk mengelompokkan artikel menjadi tujuan atau subjek yang berbeda, atau untuk menentukan bagian yang berbeda dari satu artikel.
  • <aside>; Menentukan blok konten yang terkait dengan konten utama di sekitarnya, tetapi tidak berada di tengah alur halaman.

Contoh Penulisan Markup HTML Structural Element (Elemen Struktural HTML) di HTML5

Ilustrasi Gambar Contoh Penulisan Halaman HTML Structural Element Elemen Struktural HTML
Ilustrasi Gambar Contoh Penulisan Halaman HTML Structural Element Elemen Struktural HTML

Dalam HTML5 penulisan HTML Structural Element (Elemen Struktural HTML) ini biasanya akan terlihat seperti dibawah ini:

<body>

  <header>
    <!-- header content goes in here -->
  </header>

  <nav>
    <!-- navigation menu goes in here -->
  </nav>

  <section id="sidebar1">
    <!-- sidebar content goes in here -->
  </section>

  <section id="main">
    <!-- main page content goes in here -->
  </section>

  <aside>
    <!-- aside content goes in here -->
  </aside>

  <footer>
    <!-- footer content goes in here -->
  </footer>

</body>

Kesimpulan

Jadi apa itu HTML Structural Element (Elemen Struktural HTML)? Anda mungkin bertanya-tanya gaya HTML Structural Element mana yang harus dipilih, sekarang Anda sudah menjelajahi dua opsi. Kami menyarankan agar Anda mempelajari keduanya, dan menggunakan elemen HTML5 di mana Anda dapat, kembali ke elemen HTML4 untuk proyek-proyek di mana Anda khawatir tentang pemirsa situs yang memiliki dukungan JavaScript (ingat bahwa perbaikan HTML5 yang dibahas di atas memerlukan JavaScript untuk bekerja) , atau di mana Anda tidak dapat menggunakan HTML5 (misalnya, karena klien menginginkan HTML4, atau karena Anda menggunakan beberapa jenis sistem manajemen konten yang tidak akan berfungsi dengan HTML5).

Baca Juga :  Pengertian SDK: Fungsi, Karakteristik, Tujuan dan Bedanya dengan API

Dengan cara ini, Anda dapat bekerja dengan apa pun yang diberikan pada Anda dalam proyek yang berbeda, ditambah situs HTML5 Anda akan terbukti dengan baik di masa depan ketika browser melakukan semua dukungan elemen struktural HTML5.

Penutup

Demikianlah tulisan Kami kali ini yang membahas apa itu HTML Structural Element (Elemen Struktural HTML) dan penjelasannya secara lengkap. Semoga tulisan ini dapat bermanfaat dan menambah wawasan Kita semua terutama dalam mengetahui Istilah-Istilah Teknologi yang harus diketahui dalam belajar Teknologi Informasi. Sekian dari Saya, Terima Kasih.

Pilihan Editor:

Tinggalkan Komentar