Memperkenalkan Element <main> Di HTML5

Kita sudah tau tentang beberapa elemen baru dalam HTML5 seperti section, article, aside, hgroup, header, footer, nav, figure, figcaption, video, audio, canvas dan lain-lain. Sekarang kita akan mengenal element baru dari HTML5 yaitu <main>. Menurut spesifikasi dari w3c terbaru

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
Authors must not include more than one main element in a document.
Authors must not include the main element as a child of an article, aside, footer, header or nav element.

Biasanya anda memakai <div id="main">, <div id="page">, <div id="wrapper"> untuk mendefinisikan konten utama yang juga biasa dikaitkan dengan link skip to content. Sekarang anda bisa mendefinisikan konten utama anda dengan menggunakan element <main role=”main”>. Silahkan lihat cara penerapannya dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<title>Menggunakan Elemen Main</title>
</head>
<body>

    <header>Website Saya</header>
   
    <nav>
     <a href="#">Beranda</a>
   </nav>
    
    <main>
        <article>
         <h1>Judul Artikel</h1>
          <p>Isi Konten</p>
       </article>
    
        <aside>
           <p>Sidebar</p>
      </aside>
  </main>
   
    <footer>Copyright 2013</footer>

</body>
</html>

Untuk memberikan sentuhan style pada element <main> atau <main role="main">, anda bisa menggunakan sintaks css berikut.

<style type="text/css">
main
{
   display: block
}
main[role="main"]
{
 display: block
}
</style>

Element <main> ini ternyata berpengaruh pada SEO On Page Website kita, Struktur halaman web standard menentukan artikel utama di lihat dari antara tag <main>. Maka dari itu, mulailah dari sekarang memperbarui theme website anda dengan memakai elemen <main>. Browser yang mendukung element <main> adalah Firefox & Chrome. Untuk IE6, IE7, & IE8 anda harus menambahkan html5shiv.

Jasa Pembuatan Website

12 Comments

  1. Intan SudibjoReply

    ikut belajar di sini sob hehe..
    biar paham :D

    • Nurul ImamReply

      Boleh, saya juga buat artikel ini buat bahan dokumentasi :)

  2. RupiReply

    di HTML5 ini saya masih belum perdalam sih, jadi ikut belajar disini aja deh ^^

    • Nurul ImamReply

      Saya juga masih belum paham betul tentang HTML5 :D

  3. thomasReply

    Bermanfaat,,thanks nfonya sob,,mampir di blog saya yaaaaaaaa, , , , , ,

    • Nurul ImamReply

      Iya nanti mampir jangan lupa sediain kopi sama rokoknya :p

  4. TUKANG CoLoNGReply

    saya jadi inget setiap mau ngedit html, selalu ada saja errornya.. hahahaha
    mermang harus selalu sabar

    • Nurul ImamReply

      Sabar & Sabar….
      HTML itu makhluk yang sangat ngangenin :D

  5. RirinReply

    Baru pengenalan saja sudah rumit banget, apalagi kalau yang advenaced hmmm :) Nyerah dech sama HTML5 hikz ^^

    • Nurul ImamReply

      Gak terlalu rumit kok mbak, saya juga banyak baca artikel dokumentasi html5 di html5doctor dll karena saya suka sama html5 :D

  6. AgriReply

    Wah ilmu baru lagiii,,, horee :D

    • Nurul ImamReply

      Udah tau duluan kali mas :p

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>