Tutorial Belajar HTML5 Bagian 22 : Struktur Dokumen Pada HTML5

0
32

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar HTML5 Bagian 21 : Cara Membuat Layout di HTML, selanjutnya kita akan melihat bagaimana struktur dokumen di HTML5.

Bahasa HTML 5 memiliki sintaks yang kompatibel dengan dokumen HTML 4 dan XHTML1, tetapi tidak kompatibel dengan fitur SGML dari HTML 4.

HTML 5 tidak memiliki aturan sintaks yang sama dengan XHTML di mana kita membutuhkan nama tag dengan huruf kecil, mengutip atribut, atribut harus memiliki nilai dan menutup semua elemen kosong.

HTML5 hadir dengan banyak fleksibilitas dan mendukung fitur-fitur berikut :

  • Nama tag dengan huruf besar.
  • Kutipan adalah pilihan untuk atribut.
  • Nilai atribut bersifat pilihan.
  • Menutup elemen kosong adalah pilihan.

DOCTYPE

Penulisan DOCTYPE dalam versi HTML terdahulu sangat Panjang, karena bahasa HTML berbasis SGML dan oleh karena itu membutuhkan referensi ke DTD.

Pada versi HTML 5 penulisan kode DOCTYPE menjadi lebih sederhana, sebagai berikut :

<!DOCTYPE html>

Sintaks di atas tidak membedakan huruf besar dan kecil.

Character Encoding

Penulisan kode HTML 5 dapat menggunakan sintaks sederhana untuk menentukan Character Encoding sebagai berikut :

<meta charset = "UTF-8">

Sintaks di atas tidak membedakan huruf besar dan kecil.

Tag <script>

Jika ingin menuliskan kode javascript ke dalam dokumen HTML, biasanya kita menambahkan atribut type dengan nilai “teks / javascript” ke elemen script sebagai berikut :

<script type = "text/javascript" src = "scriptfile.js"></script>

Pada versi HTML 5, cara penulisannya menjadi lebih singkat :

<script src = "scriptfile.js"></script>

Tag <link>

Biasanya, kita menulis <link> seperti berikut ini :

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

Versi HTML 5 menghapus informasi tambahan yang diperlukan dan Anda cukup menggunakan sintaks berikut :

<link rel = "stylesheet" href = "stylefile.css">

Elemen HTML5

Elemen HTML5 ditandai menggunakan tag awal dan tag akhir.

Tag dibatasi menggunakan tanda kurung sudut (<>) dengan nama tag di antaranya.

Perbedaan antara tag awal dan tag akhir adalah bahwa tag akhir menyertakan garis miring sebelum nama tag.

Berikut adalah contoh elemen HTML5 :

<p>...</p>

Nama tag HTML5 tidak membedakan huruf besar/kecil dan dapat ditulis dalam huruf besar semua atau huruf campuran, meskipun penulisan yang paling umum adalah tetap menggunakan huruf kecil.

Sebagian besar elemen berisi beberapa konten seperti <p> … </p> berisi paragraf.

Namun, beberapa elemen dilarang mengandung konten apa pun dan ini dikenal sebagai elemen kosong.

Misalnya br, hr, link, meta, dll.

Berikut adalah daftar lengkap Elemen HTML5.

Atribut HTML5

Elemen mungkin berisi atribut yang digunakan untuk mengatur berbagai properti elemen.

Beberapa atribut dapat digunakan secara global dan dapat digunakan pada elemen apa pun, sementara yang lain digunakan untuk elemen tertentu saja.

Semua atribut memiliki nama dan nilai dan terlihat seperti yang ditunjukkan di bawah ini pada contoh.

Berikut adalah contoh atribut HTML5 yang menggambarkan cara menandai elemen div dengan atribut bernama class menggunakan nilai “contoh”

<div class = "contoh">...</div>

Atribut hanya boleh ditentukan dalam tag awal dan tidak boleh digunakan di tag akhir.

Atribut HTML5 tidak membedakan huruf besar/kecil dan dapat ditulis dalam huruf besar semua atau huruf campuran, meskipun penulisan yang paling umum adalah tetap menggunakan huruf kecil.

Dokumen HTML5

Tag berikut telah diperkenalkan untuk membentuk struktur HTML5 yang lebih baik :

  • section – Tag ini mewakili dokumen umum atau bagian aplikasi. Tag ini dapat digunakan bersama dengan tag h1-h6 untuk menunjukkan struktur dokumen.
  • article – Tag ini mewakili bagian bebas dari suatu dokumen, seperti tulisan di blog atau artikel surat kabar.
  • aside – Tag ini mewakili bagian konten yang hanya sedikit terkait dengan sisa halaman.
  • header – Tag ini mewakili header dari suatu bagian.
  • footer – Tag ini mewakili footer dari suatu bagian dan dapat berisi informasi tentang penulis, informasi hak cipta, dan sebagainya.
  • nav – Tag ini mewakili bagian dari dokumen yang ditujukan untuk navigasi.
  • dialog – Tag ini dapat digunakan untuk menandai percakapan.
  • figure – Tag ini dapat digunakan untuk menghubungkan teks dengan beberapa konten yang disematkan, seperti grafik atau video.

Struktur markup untuk dokumen HTML 5 akan terlihat seperti berikut :

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>
<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>Contoh Struktur Dokumen HTML5</h1> 
         <p>Halaman ini bisa ditampilkan di safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://mbahwp.com/category/coding/html/">Tutorial HTML</a></li> 
            <li><a href = "https://mbahwp.com/category/internet-marketing/">Internet Marketing </a></li> 
            <li><a href = "https://mbahwp.com/category/wordpress/">Tutorial WordPress</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Sebuah artikel bisa memiliki lebih dari 1 section </p>
         </section> 
      </article> 
   
      <aside> 
         <p>Ini adalah bagian sisa dari halaman web </p> 
      </aside> 
   
      <footer> 
         <p>Dibuat oleh <a href = "https://mbahwp.com/">Mbah WP </a></p> 
      </footer> 
   
   </body> 
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini bisa membantu Anda memahami struktur dokumen pada HTML5.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.