Semantic tag section, article, header dan footer dalam HTML - selamat pagi para pengunjung semangat27.com, kali ini seperti biasa penulis akan menuliskan kembali dokumentasi dari hasil belajar penulis dalam mempelajari HTML untuk front-end web development, semoga dapat bermanfaat untuk para pembaca dan dapat ingat selalu dalam benak penulis hehe. Baiklah langsung saja dalam artikel kali ini akan dibahas sepemahaman penulis tentang tag section, article, header dan footer.
Jadi dari apa yang penulis pelajari, tag <section> ini merupakan tag bagian atau seksi yang merepresentasikan suatu bagian dari dokumen atau aplikasi. Secara kontekstual, tag <section></section> adalah element yang digunakan untuk tujuan mengelompokkan suatu konten atau dokumen menjadi beberapa bagian yang berdasarkan pada tema. Gampangannya untuk membuat artikel deh ya hehe. Secara sekilas penggunaan section mungkin mirip dengan tag div, tetapi tag section ini tidak ditujukan sebagai container yang menampung element yang bertujuan untuk memberi style/mendesain melalui CSS.
Tag section ini biasanya di kolaborasikan didalamnya dengan element heading seperti <h1> hingga <h6> sebagai pembeda judul atau dapat pula ditulis dengan element <article>, <header> dan <footer> didalamnya. Tag <article> sendiri merupakan tag mark up untuk suatu konten yang independent yang dapat berdiri sendiri seperti postingan blog, komentar atau sejenisnya. Sedangkan tag <header> digunakan sebagai konten pengantar atau pembuka, didalamnya berisi element heading seperti <h1> sampai <h6>. Dan yang terakhir, yakni tag <footer> merupakan suatu catatan kaki, seperti catatan kaki pada suatu artikel.
Untuk lebih memahaminya silakan tuliskan kode dibawah ini pada sublime text 3 (versi offline) atau jsbin.com (versi online), penjelasan mengenai keduanya dapat dibaca pada artikel berikut ini Plugin Sublime Text 3 yang Wajib bagi Pemula sampai Profesional Programmer. Baik langsung saja berikut adalah kode yang didalamnya berisi kode tag <section>, <article>, <header> dan <footer>.
<!DOCTYPE html>-------------------------------------------------------------
<html>
<head>
<title>This is an index file</title>
</head>
<body>
<h1>Semangat27.com Company</h1>
<section>
<h2>About</h2>
</section>
<section>
<h2>Contact</h2>
</section>
<section>
<h2>Our Article</h2>
<article>
<header>
<h3>article title</h3>
</header>
<p>
contents of the article
</p>
<footer>
footnotes usually contain labels
</footer>
</article>
</section>
<section>
<h2>Portofolio</h2>
</section>
</body>
</html>
Hasil
Semangat27.com Company
About
Contact
Our Article
article title
Portofolio
untuk hasil dalam jsbin.com bisa dilihat pada gambar dibawah ini
Untuk video panduan lengkapnya silakan lihat pada video berikut ini, namun ini berbahasa inggris hehe
0 Komentar