Semantic Elements HTML5

-

Semantic Elements memiliki makna dari dua sisi yaitu Browser dan Pengembang. Maksudnya adalah bahwa Browser akan menjalankan perintah dari Pengembang melalui elemen yang dituliskan kedalam baris program. Contoh:
  • Non-Semantic Elements : <div> </div> dan <span> </span>. Tidak memberikan informasi mengenai kegunaannya di dalam program sebelum diberikan inisialisasi berupa id, class, name dan sebagainya.
  • Semantic Elements : <form>, <table> dan <article>. Memberikan informasi dengan jelas tentang kegunaan dari elemen tersebut sesuai dengan namanya.

Berikut ini merupakan macam-macam elemen baru pada HTML5.
  1. <article>. Tag ini digunakan untuk menuliskan artikel di dalamnya.
  2. <aside>. Tag ini digunakan untuk mendefinisikan konten yang ada di dalamnya.
  3. <details>. Tag ini digunakan untuk menambahkan suatu rincian yang dapat dilihat atau disembunyikan sesuai dengan perintahnya.
  4. <figcaption>. Tag ini digunakan untuk menandai foto di dalam dokumen.
  5. <figure>. Tag ini digunakan untuk menandai konten yang berdiri sendiri seperti foto, ilustrasi, diagram dan lainnya.
  6. <footer>. Tag ini digunakan untuk mendefinisikan konten yang berada di paling bawah dokumen.
  7. <header>. Tag ini digunakan untuk mendefinisikan konten yang berada di posisi atas dokumen dan biasanya berisi tentang keterangan seperti judul dan deskripsi.
  8. <main>. Tag ini digunakan untuk mendefinisikan konten utama di dalam dokumen.
  9. <mark>. Tag ini digunakan untuk menandai suatu konten di dalam dokumen.
  10. <nav>. Tag ini digunakan untuk mendefinisikan konten navigasi di dalam dokumen.
  11. <section>. Tag ini digunakan untuk mendefinisikan bagian-bagian di dalam dokumen seperti header dan footer.
  12. <summary>. Tag ini digunakan untuk mendefinisikan heading yang terlihat di elemen <details> dengan cara mengkliknya untuk melihat atau menyembunyikan detailnya.
  13. <time>. Tag ini digunakan untuk mendefinisikan waktu dan tanggal.
  14. Serta masih banyak lagi tag yang belum disebutkan.

Gambaran Semantic Elements


 Sumber: w3school.com

Komentar

Posting Komentar

Postingan populer dari blog ini

Layouts HTML5

-
Gambar
Pada versi HTML5, telah dikembangkan beberapa tag yang bertujuan untuk mempermudah pengguna dalam mengatur dan menyusun tata letak komponen pada halaman webnya. Sebelum munculnya penggunaan tag tersebut, banyak tampilan halaman web berwujud seperti koran. Tidak bergitu teratur tata letaknya dan tidak menarik untuk dilihat pembaca. Tag HTML5 yang berkaitan dengan layouts atau tata letak antara lain, 1. <header> 2. <nav> 3. <section> 4. <article> 5. <aside> 6. <footer> 7. <details> Setiap tag mempunyai kegunaan seperti yang dijelaskan pada artikel Semantic Elements HTML5 . Berikut penerapan tag HTML5 pada bagian layouts atau tampilan. Catatan: Untuk melihat hasil dari program tersebut, silahkan klik pada bagian RESULT.
Baca selengkapnya

Membuat Form Registrasi dengan Modal Bootstrap 4

-
Gambar
Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana menggunakan Modal dari Bootstrap 4 untuk membuat sebuah form yang akan digunakan untuk proses registrasi user. Bahan dan alat yang diperlukan sama seperti pada tutorial sebelumnya yaitu, 1. Text Editor. Misalnya Notepad, Notepad++, Sublime Text Editor dan sebagainya. 2. Browser. Saya rekomendasikan menggunakan Google Chrome untuk hasil yang lebih baik. 3. XAMPP atau WAMPP. 4. Bootstrap 4. Pada tutorial ini saya sarankan untuk membuat sebuah form login seperti pada tutorial sebelumnya untuk mempermudah dalam memahami syntax yang nantinya akan ditulis. Jika alat, bahan dan kebutuhan lain sudah siap maka langsung saja kita coba. Pertama buka file index.php yang berada di dalam folder login. Kemudian tuliskan syntax berikut pada bagian dalam tag head. <head> <meta charset= "UTF-8" > <title> LOGIN </title> <!-- IMPORT FILE DARI DIRECTORY --> ...
Baca selengkapnya

Rancangan Sistem Login

-
Gambar
Gambar Form Login Pada kesempatan ini saya akan membagikan tentang bagaimana untuk membuat rancangan login untuk postingan sebelumnya . Rancangan yang akan dibuat yaitu algoritma, pseudocode, dan flowchart. Langsung saja berikut ini alur algoritma dalam rancangan login yang akan dibuat. 1. Masukkan alamat email dan password pada form di dalam input. 2. Kemudian klik pada tombol bertuliskan LOGIN. 3. Lalu sistem akan mengecek data yang telah diinputkan. 4. Jika data yang diinputkan sama dengan data yang berada di dalam database, maka akan dialihkan ke halaman utama. 5. Apabila data yang diinputkan tidak sama dengan data yang ada maka akan ada pemberitahuan bahwa email dan atau password salah. 6. Kembali ke halaman login untuk memasukkan email dan password kembali. 7. Jika terjadi kesalahan dalam memasukkan email dan password lebih dari tiga kali, maka otomatis akan diblokir. 8. Jika benar maka akan langsung menuju halaman menu utama. Kemudian untuk pseudocoden...
Baca selengkapnya