Cara Menciptakan Struktur Halaman Website Dengan Semantic Tag Dari Html5
Sunday, February 28, 2016
Add Comment
Pada artikel kali ini kita akan mempelajari tentang Cara Membuat Struktur Halaman Website Dengan Menggunakan Semantic Tag Dari HTML5.
Untuk menciptakan struktur halaman website diatas, berikut ini yakni arahan HTML-nya :
Berikut ini yakni teladan penggunaan tag
Tag
Berikut ini yakni teladan penggunaan tag
Tag
Berikut ini yakni teladan penggunaan tag
Berikut ini yakni teladan penggunaan tag
Sesuai dengan namanya, tag
Berikut ini yakni teladan penggunaan tag
Tag
Berikut ini yakni teladan penggunaan tag
Tag
Berikut ini yakni teladan penggunaan tag
Berikut ini teladan arahan halaman website yang memakai semantic tag dari HTML5 :
Penggunaan semantic tag pada HTML5 juga akan sangat mempunyai kegunaan untuk SEO (Search Engine Optimization), sebab setiap penggalan halaman website akan lebih terang info yang terdapat didalamnya, sehingga mesin pencari sanggup dengan gampang memprioritaskan penggalan mana yang perlu di indeks terlebih dahulu, menyerupai tag
Membuat Struktur Halaman Website Dengan Tag <div>
Sebelum masa HTML5, web developer biasanya memakai tag
Berikut ini yakni gambar sederhana struktur halaman website :<div> dengan atribut id atau class untuk memisahkan bagian-bagian struktur halaman website, menyerupai penggalan header, menu, article, sidebar dan footer.
Untuk menciptakan struktur halaman website diatas, berikut ini yakni arahan 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 Artikel Pertama</h1> <h2>Sub Judul Artikel Pertama</h2> </div> <p>...Isi artikel pertama...</p> </div> </div id="article_2"> <div id="header_2"> <h1>Judul Artikel Kedua</h1> <h2>Sub Judul Artikel Kedua</h2> </div> <p>...Isi artikel 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 untuk menciptakan struktur halaman website dengan semantic tag yang lebih mempunyai arti.Membuat Struktur Halaman Website Dengan Semantic Tag Dari HTML5
HTML5 ingin mengganti tag
Berikut ini yakni pembahasan masing-masing semantic tag dari HTML5 yang dipakai untuk menciptakan struktur halaman website :<div> yang sering dipakai untuk menciptakan struktur halaman website, dengan semantic tag yang lebih mempunyai arti untuk menciptakan struktur halaman website. Semantic tag yang sanggup dipakai untuk menciptakan struktur halaman website yakni tag <header>, <nav>, <section>, <article>, <aside> dan <footer>.Penggunaan dan Penulisan Tag <header>
<header> dipakai sebagai daerah untuk 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 yakni teladan 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 untuk mendefinisikan area navigasi, menyerupai menu. Biasanya tag <nav> diletakkan pada tag <header> atau juga sanggup diletakkan diluar tag <header>.Berikut ini yakni teladan 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 untuk memisahkan bagian-bagian dari struktur halaman website, menyerupai daerah untuk meletakkan sebuah artikel, galeri atau penggalan lain yang memerlukan pemisahan dengan struktur halaman website. Anda sanggup memakai tag <section> lebih dari satu kali, tergantung kebutuhan.Berikut ini yakni teladan penggunaan tag
<section> :<section> <article> <header> <h1>Judul Artikel Pertama</h1> <h2>Sub Judul Artikel Pertama</h2> </header> <p>...Isi artikel pertama...</p> </article> </section> <section> <article> <header> <h1>Judul Artikel Kedua</h1> <h2>Sub Judul Artikel Pertama</h2> </header> <p>...Isi artikel kedua...</p> </article> </section>Penggunaan dan Penulisan Tag <main>
Tag<main> dipakai untuk menandai penggalan utama dari sebuah halaman website, berbeda dengan tag <section>, tag <main> umumnya hanya dipakai satu kali saja pada, yang dipakai pada penggalan paling penting dari halaman website, menyerupai artikel utama.Berikut ini yakni teladan penggunaan tag
<main> :<main> <h1>Judul Utama</h1> <p>...Penjelasan...</p> <article> <h2>Judul Artikel Pertama</h2> <p>...Isi artikel pertama...</p> </article> <article> <h2>Judul Artikel Kedua</h2> <p>...Isi artikel kedua...</p> </article> </main>Penggunaan dan Penulisan Tag <article>
Sesuai dengan namanya, tag
<article> dipakai untuk meletakkan sebuah artikel. Tag ini biasanya berada didalam tag <section> atau <main>.Berikut ini yakni teladan penggunaan tag
<article> :<article> <h2>Judul Artikel</h2> <p>...Isi artikel...</p> </article>Penggunaan dan Penulisan Tag <aside>
Tag
<aside> dipakai untuk menandai penggalan halaman website yang bukan berisi konten utama, tetapi mempunyai kaitannya dengan konten atau artikel utama pada halaman tersebut. Bagian paling pas untuk tag <aside> yakni pada penggalan sidebar. Karena pada sidebar sanggup terdiri dari banyak sekali konten yang tidak eksklusif berkaitan dengan konten utama, menyerupai "Artikel populer" atau "Kategori". Selain pada penggalan sidebar, tag <aside> juga sanggup dipakai didalam artikel untuk menandai penggalan tambahan.Berikut ini yakni teladan penggunaan tag
<aside> :<article> <h2>Judul Artikel</h2> <p>...Isi artikel...</p> </article> <aside> <p>...Penjelasan tambahan...</p> </aside>Penggunaan dan Penulisan Tag <footer>
Tag
<footer> biasanya dipakai pada penggalan bawah halaman website, dimana kita sanggup mengisinya, mengenai info website kita, menyerupai copyright, about us dan lain-lainnya.Berikut ini yakni teladan penggunaan tag
<footer> :<footer> <p>Copyright © 2018 </p> <footer>Berikut ini teladan arahan halaman 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 Artikel Pertama</h1> <h2>Sub Judul Artikel Pertama</h2> </header> <p>...Isi artikel pertama...</p> </article> <article> <header> <h1>Judul Artikel Kedua</h1> <h2>Sub Judul Artikel Kedua</h2> </header> <p>...Isi artikel 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 mempunyai kegunaan untuk SEO (Search Engine Optimization), sebab setiap penggalan halaman website akan lebih terang info yang terdapat didalamnya, sehingga mesin pencari sanggup dengan gampang memprioritaskan penggalan mana yang perlu di indeks terlebih dahulu, menyerupai tag
<article>.
0 Response to "Cara Menciptakan Struktur Halaman Website Dengan Semantic Tag Dari Html5"
Post a Comment