Semantic HTML
Mengorganisasi Halaman Konten
Semantic HTML
Dalam HTML5, kita dikenalkan pada beberapa elemen yang dapat digunakan untuk mengelompokkan sebuah elemen dengan
lebih jelas dan memiliki arti (semantic meaning). Elemen-elemen ini memiliki nama sesuai dengan fungsi atau peran dari elemen
tersebut.
Header, Footer dan Nav
Sebuah header dan footer utama yang muncul pada awal dan akhir di sebuah halaman (<body>).
Header: pengantar atau pembuka konten dalam sebuah elemen <article> atau <section>.
Footer: catatan kaki pada sebuah elemen <article> atau <section>.
Main
Element <main> digunakan untuk menampung/mewadahi konten utama (dominan) dalam <body>. Konten main dapat terdiri dari banyak section,
ataupun artikel, atau konten apa pun di dalam elemen main, selama ia termasuk konten utama yang dimiliki oleh website.
<body>
<header>
<!-- Konten header website -->
</header>
<main>
<!-- Konten utama website -->
</main>
<footer>
<!-- Konten footer website -->
</footer>
</body>
Nav
Elemen <nav> digunakan untuk menampung sebuah navigasi yang sifatnya penting (mayor), contohnya navigasi utama pada sebuah website.
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
Semantic HTML: Articles, Aside, dan Section
Articles
Elemen <article> bertindak sebagai container untuk independent content pada sebuah halaman, artinya konten utuh yang tidak terkait dengan konten lain, bisa saja sebuah
artikel blog, komentar, forum post dan konten lainnya..
Jika dalam sebuah halaman terdapat beberapa artikel, tiap artikel tersebut seharusnya berada pada elemen <article>-nya masing-masing.
Semantic HTML: Articles, Aside, dan Section
Aside
Elemen <aside> memiliki dua tujuan, tergantung kita menempatkannya di dalam sebuah elemen <article> atau tidak.
Ketika elemen ini ditempatkan di dalam elemen <article>, elemen ini dapat berisi informasi yang berhubungan dengan artikel tersebut, tetapi bukan bagian dari konten
artikelnya itu sendiri (dipisahkan dari konten utama). Ketika ditempatkan di luar elemen <article>, elemen ini dapat berisi informasi yang berhubungan pada keseluruhan
halaman. Elemen <aside> biasanya terletak di samping dari sebuah elemen yang menampungnya.
Semantic HTML: Articles, Aside, dan Section
Section
Sebuah elemen yang memiliki kesamaan konten dan sebuah heading di dalamnya dapat dikelompokkan dengan menggunakan elemen <section>. Dengan begitu elemen ini
dapat digunakan pada sebuah elemen <article> yang memiliki konten panjang dan berpotensi untuk dikelompokkan.. Dalam sebuah <section> sebaiknya terdapat elemen
heading (h1-h6), yang menjadi elemen pertama yang dituliskan pada sebuah section untuk menunjukkan judul atau tema dari bagian konten yang dikelompokkan
Generic Element
DIV
Pertama, elemen <div>, elemen ini merupakan sebuah wadah (container) yang bersifat umum untuk menampung beberapa konten. Elemen ini tidak akan memberikan efek
apa pun pada konten atau layout sebelum menerapkan sebuah style menggunakan CSS.
<!DOCTYPE html>
<html>
<head>
<title>Div Element</title>
</head>
<body>
<div>
<p>
Paragraf ini berada di dalam elemen div, namun akan ditampilkan sama seperti paragraf
</p>
</div>
</body>
</html>
Main
.
TUGAS
Latihan: Mengorganisasi Konten pada Halaman
Profil