Belajar HTML5 Bagi Pemula | HTML Tricks

Yapp..Ini adalah artikel pertama saya tentang Teknologi, Disini saya akan membahas Struktur dasar HTML 5 , Oke langsung saja jangan basa basi

Apa sih yang baru di HTML 5 ini??

Hal pertama yaitu Pendeklarasian,setiap bahasa pemrograman pasti mempunyai
pendeklarasian .Pendeklarsian bahasa pemrograman apa yang mau Digunakan
Nah Berikut Pendeklarasian HTML 5

DOCTYPE

Di HTML 5 DOCTYPE cukup mudah digunakan,Berikut kodenya :

<!DOCTYPE html>

Selanjutnya ada Pendeklarasian Charset (Encoding html), membuat google mudah dalam mengidentifikasi seluruh konten anda, penulisanya juga mudah,Berikut Kodenya :

<html>
<head>
<title> Bagian Judul | Belajar Struktur HTML 5</title>
<meta charset="UTF-8">
</head>

<body> Bagian isi halaman </body>

</html>

Mengenal tag semantik

Tag Semantik

adalah tag di HTML yang mempunyai arti dan makna yang jelas.. CONTOH : <p> Berfungsi untuk membuat sebuah paragraf <h1> Membuat sebuah judul/Header <title> Berfungsi untuk membuat judul sebuah halaman

Nahh,,kalo tag <div> atau <span> tidak mempunyai makna dan arti yang jelas ,Buktinya anda selalu memberi class / id .

Ini membuat kodingan anda tentu menjadi lebih banyak dan membuang waktu.

Dalam HTML 5 ini,kalian bisa menggunakan Tag semantik untuk membuat kodingan anda lebih teratur,rapih dan tentu jelas selector-selectornya saat di CSS , namun <div>

Struktur baru HTML5

Nah, Jika di HTML 4, pasti anda masih menggunakan seperti tag <div> ,jika di HTML5 Anda akan dibawa lebih mudah lagi untuk belajar mengenai HTML

Berikut Contohnya :

<main> berfungsi membuat sebuah main of page di halaman, jika anda selalu menggunakan tag <div> dengan class <div class="main-content"> dalam sebuah halaman,anda bisa langsung menuliskanya dengan <main> tadi, tentu akan lebih mempermudah dalam penulisan, jika masih ada tag <main> lainya,anda bisa memberi class pada <main>
<article> membuat sebuah artikel dalam sebuah kerangka dokumen
<aside> membuat sebuah kerangka sidebar,biasanya disamping kanan main-content (<main>)
<header> tag ini membuat sebuah judul / header,biasanya didalam tag <article>
<nav> tentunya tag ini untuk membuat sebuah navigasi diatas main content
<section> ini adalah bagian / seksi. membuat sebuah dokumen,biasanya didalamnya terdapat tag <h1> atau <article> untuk bisa menjadi bagian anaknya lagi
<footer> tag ini bisa untuk membuat footer / kaki dalam sebuah halaman,bisa dibawah sebuah main-content,bisa juga footer dalam sebuah <article>

Itu aja sih untuk struktur dasar dalam sebuah HTML5 ,sebenernya masih banyak lagi, Anda bisa mengecek di W3schools

Jika masih bingung ane kasih skema buat struktur dasar HTML5

Ini kodinganya :)

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Struktur HTML 5 | CB13</title> //bagian judul
 <meta charset="UTF-8"> //Encoding
</head>
<body>
 <nav> // membuat navigasi
  <ul>
   <li><a href="Codingblog13.blogspot.co.id">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
 </nav>

 <main> // membuat main content
  <article> 
   <header>
    <h1>Belajar Struktur HTML 5</h1>
   </header>
   <content>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </content>
   <footer>
    <p>This Article written by ARBY AZRA admin of ZRACODER13</p>
   </footer>
  </article>

  <aside class="sidebar-satu"> //membuat sidebar
   <article>
    <header>
     <h2>Belajar CSS untuk pemula</h2>
    </header>
    <content>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
    </content>
   </article>
  </aside>

  <aside class="sidebar-dua">
   <article>
    <header>
     <h2>Belajar JAVA untuk pemula</h2>
    </header>
    <content>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
    </content>
   </article>
  </aside>

  <aside class="sidebar-tiga">
   <article>
    <header>
     <h2>Belajar PHP untuk pemula</h2>
    </header>
    <content>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
    </content>
   </article>
  </aside>

  <footer> //membuat footer
   <p>Copyright &copy; <a href="Codingblog13.blogspot.co.id">ZRACODER13</a></p>
  </footer>
 </main>

</body>
</html>

Tentu untuk mempercantik hasil kode dari sebuah halaman diatas harus dilengkapi CSS

LIHAT JUGA Membuat Website Responsive dengan Css

oke sekian dari saya, semoga bermanfaat :)

Sekian,dan Terimakasih

Semoga Bermanfaat :)

ZRACODER 13

Belajar HTML5 Bagi Pemula | HTML Tricks

Artikel Menarik Lainnya