HTML main tag | belajar <main> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML main tag. Tutorial dan panduan mengenai element <main>...</main> yang menunjukkan konten utama. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <main>.

Deskripsi
Penjelasan HTML

HTML <main> element merepresentasikan konten utama dalam sebuah dokumen (tepatnya didalam <body> element).

<main> merupakan elemen unik yang tidak boleh ditulis lebih dari satu dalam sebuah dokumen atau aplikasi, sehingga tidak tepat ditulis (sebagai anak elemen) di dalam <article>, <aside>, <footer>, <header>, atau <nav> element. Di dalam <main> element juga tidak boleh diisi konten yang ditulis berulang kali dalam sebuah dokumen seperti sidebar, link navigasi, informasi hak cipta, logo website, banner dan form pencarian (kecuali fungsi utama dokumen tersebut hanya untuk form pencarian).

<main> element tidak digunakan untuk mengelompokkan konten (sectioning content) dan tidak memiliki pengaruh pada outline sebuah dokumen.

Global Attributes
Atribut Secara Global (Keseluruhan)

<main> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<main> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <main> element

HTML 
<main>
  <h1>Mengenal Hewan Bertulang Belakang (Vertebrata)</h1>
  <p>Vertebrata adalah hewan yang yang memiliki ciri bertulang belakang.</p>
  <article>
    <h2>Pisces</h2>
    <p>Pisces adalah habitat hewan yang hidup di air dengan bernafas menggunakan insang. Contohnya, ikan.</p>
  </article>
  <article>
    <h2>Amphibia</h2>
    <p>Amphibia adalah golongan hewan yang dapat bertahan hidup di dua alam, yaitu darat dan air. Contohnya, katak.</p>
  </article>
</main>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML main tag</title>
    <style></style>
  </head>
  <body>
    <main>
      <h1>Mengenal Hewan Bertulang Belakang (Vertebrata)</h1>
      <p>Vertebrata adalah hewan yang yang memiliki ciri bertulang belakang.</p>
      <article>
        <h2>Pisces</h2>
        <p>Pisces adalah habitat hewan yang hidup di air dengan bernafas menggunakan insang. Contohnya, ikan.</p>
      </article>
      <article>
        <h2>Amphibia</h2>
        <p>Amphibia adalah golongan hewan yang dapat bertahan hidup di dua alam, yaitu darat dan air. Contohnya, katak.</p>
      </article>
    </main>
  </body>
</html>
SHARE
Previous Article Next Article