Membuat Struktur Halman Website Dengan Tag <div>
Sebelum kurun HTML5, WEB developer biasanya memakai tag
Berikut ini adlah gambar sederhana struktur halman WEBsite :<div> dengan atribut id atau class untk memisahkan bagian-bagian struktur halman WEBsite, menyerupai belahan header, menu, article, sidebar dan footer.
Untuk menciptakan struktur halman WEBsite diatas, berikut ini adlah aba-aba HTML-nya :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Judul Website</title> </head> <body> <div id="header"> <img src="logo_WEBsite.png" /> <h1>Judul Website</h1> <p>Deskripsi WEBsite</p> <div id="menu"> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Tentang</a></li> <li><a href="#">Kontak</a></li> </ul> </div> </div> <div id="content"> <div id="article_1"> <div id="header_1"> <h1>Judul Article Pertama</h1> <h2>Sub Judul Article Pertama</h2> </div> <p>...Isi article pertama...</p> </div> </div id="article_2"> <div id="header_2"> <h1>Judul Article Kedua</h1> <h2>Sub Judul Article Kedua</h2> </div> <p>...Isi article kedua...</p> </div> </div> <div id="sidebar"> <div id="category"> <h2>Kategori</h2> <ul> <li><a href="#">Isi kategori pertama</a></li> <li><a href="#">Isi kategori kedua</a></li> <li><a href="#">Isi kategori ketiga</a></li> </ul> </div> </div> <div id="footer"> <p>Copyright © 2018 </p> </div> </body> </html><div> yang biasa dipakai untk menciptakan struktur halman WEBsite dengan semantic tag yang lebih mempunyai arti.Membuat Struktur Halman Website Dengan Semantic Tag Dari HTML5
HTML5 ingin mengganti tag
Berikut ini adlah pembahasan masing-masing semantic tag dari HTML5 yang dipakai untk menciptakan struktur halman WEBsite :<div> yang sering dipakai untk menciptakan struktur halman WEBsite, dengan semantic tag yang lebih mempunyai arti untk menciptakan struktur halman WEBsite. Semantic tag yang sanggup dipakai untk menciptakan struktur halman WEBsite adlah tag <header>, <nav>, <section>, <article>, <aside> dan <footer>.Penggunaan dan Penulisan Tag <header>
<header> dipakai sebagai kawasan untk meletakkan logo WEBsite, judul WEBsite dan deskripsi WEBsite. Selain itu pada tag <header> juga sanggup diletakkan navigasi utama dan tag ini sanggup dipakai lebih dari satu kali, tergantung kebutuhan.Berikut ini adlah pola penggunaan tag
<header> :<header> <img src="judul_WEBsite.png" /> <h1>Judul Website</h1> <p>Deskripsi WEBsite</p> </header>Peggunaan dan Penulisan Tag <nav>
Tag
<nav> dipakai untk mendefinisikan area navigasi, menyerupai menu. Biasanya tag <nav> diletakkan pada tag <header> atau juga sanggup diletakkan diluar tag <header>.Berikut ini adlah pola penggunaan tag
<nav> :<nav> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Tentang</a></li> <li><a href="#">Kontak</a></li> </ul> </nav>Penggunaan dan Penulisan Tag <section>
Tag
<section> dipakai untk memisahkan bagian-bagian dari struktur halman WEBsite, menyerupai kawasan untk meletakkan sebuah article, galeri atau belahan lain yang memerlukan pemisahan dengan struktur halman WEBsite. Anda sanggup memakai tag <section> lebih dari satu kali, tergantung kebutuhan.Berikut ini adlah pola penggunaan tag
<section> :<section> <article> <header> <h1>Judul Article Pertama</h1> <h2>Sub Judul Article Pertama</h2> </header> <p>...Isi article pertama...</p> </article> </section> <section> <article> <header> <h1>Judul Article Kedua</h1> <h2>Sub Judul Article Pertama</h2> </header> <p>...Isi article kedua...</p> </article> </section>Penggunaan dan Penulisan Tag <main>
Tag<main> dipakai untk menandai belahan utama dari sebuah halman WEBsite, berbeda dengan tag <section>, tag <main> umumnya hnya dipakai satu kali saja pada, yang dipakai pada belahan paling penting dari halman WEBsite, menyerupai article utama.Berikut ini adlah pola penggunaan tag
<main> :<main> <h1>Judul Utama</h1> <p>...Penjelasan...</p> <article> <h2>Judul Article Pertama</h2> <p>...Isi article pertama...</p> </article> <article> <h2>Judul Article Kedua</h2> <p>...Isi article kedua...</p> </article> </main>Penggunaan dan Penulisan Tag <article>
Sesuai dengan namanya, tag
<article> dipakai untk meletakkan sebuah article. Tag ini biasanya berada didalam tag <section> atau <main>.Berikut ini adlah pola penggunaan tag
<article> :<article> <h2>Judul Article</h2> <p>...Isi article...</p> </article>Penggunaan dan Penulisan Tag <aside>
Tag
<aside> dipakai untk menandai belahan halman WEBsite yang bukan berisi konten utama, tetapi mempunyai kaitannya dengan konten atau article utama pada halman tersebut. Bagian paling pas untk tag <aside> adlah pada belahan sidebar. Karena pada sidebar sanggup terdiri dari banyak sekali konten yang tidak eksklusif berkaitan dengan konten utama, menyerupai "Article populer" atau "Kategori". Selain pada belahan sidebar, tag <aside> juga sanggup dipakai didalam article untk menandai belahan tambahan.Berikut ini adlah pola penggunaan tag
<aside> :<article> <h2>Judul Article</h2> <p>...Isi article...</p> </article> <aside> <p>...Penjelasan tambahan...</p> </aside>Penggunaan dan Penulisan Tag <footer>
Tag
<footer> biasanya dipakai pada belahan bawah halman WEBsite, dimana kita sanggup mengisinya, mengenai gosip WEBsite kita, menyerupai copyright, about us dan lain-lainnya.Berikut ini adlah pola penggunaan tag
<footer> :<footer> <p>Copyright © 2018 </p> <footer>Berikut ini pola aba-aba halman WEBsite yang memakai semantic tag dari HTML5 :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Judul Website</title> </head> <body> <header> <img src="logo_WEBsite.png" /> <h1>Judul Website</h1> <p>Deskripsi WEBsite</p> <nav> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Tentang</a></li> <li><a href="#">Kontak</a></li> </ul> </nav> </header> <section> <article> <header> <h1>Judul Article Pertama</h1> <h2>Sub Judul Article Pertama</h2> </header> <p>...Isi article pertama...</p> </article> <article> <header> <h1>Judul Article Kedua</h1> <h2>Sub Judul Article Kedua</h2> </header> <p>...Isi article kedua...</p> </article> </section> <aside> <section> <h2>Kategori</h2> <ul> <li><a href="#">Isi kategori pertama</a></li> <li><a href="#">Isi kategori kedua</a></li> <li><a href="#">Isi kategori ketiga</a></li> </ul> </section> </aside> <footer> <p>Copyright © 2018 </p> </footer> </body> </html><div> .Penggunaan semantic tag pada HTML5 juga akan sangat berkhasiat untk SEO (Search Engine Optimization), sebab setiap belahan halman WEBsite akan lebih terang gosip yang terdapat didalamnya, sehingga mesin pencari sanggup dengan gampang memprioritaskan belahan mana yang perlu di indeks terlebih dahulu, menyerupai tag
<article>. Sumber https://mas-abdi.blogspot.com/
No comments:
Post a Comment