Home Programming 8 Tag HTML Semantik untuk Membuat Situs Web Dapat Diakses, Rapi, dan Modern

8 Tag HTML Semantik untuk Membuat Situs Web Dapat Diakses, Rapi, dan Modern

By mimin - March 22, 2023, 8:02 am

html5 logo

Table of content:

[Hide] [Show]

Apa itu Div?
2.
3.
4.
5.
6.
7.
Mengapa Menggunakan Elemen HTML Semantik?

Sebelum pengenalan HTML semantik, pengembang menggunakan div untuk mengatur konten. Elemen Div tidak memiliki arti sendiri. Mereka hanya menyediakan cara untuk menerapkan gaya dan mengatur konten.

Kata semantik artinya berkaitan dengan makna. Elemen HTML semantik menjelaskan tujuan kontennya. Mereka memberikan makna bagi pengembang, pengguna, mesin telusur, dan teknologipendukung. Berikut adalah daftar tag HTML semantik populer yang dapat Anda gunakan dalam proyek berikutnya.

Apa itu Div?

Dalam HTML, elemen div (divisi) adalah wadah tingkat blok. Anda menggunakan div untuk mengelompokkan atau membagi elemen HTML menjadi beberapa bagian di halaman web. Sintaksnya seperti yang ditunjukkan di bawah ini:

<div>

</div>

Manfaat Menggunakan Elemen HTML Semantik Dibandingkan Divs

HTML5 memperkenalkan elemen HTML semantik untuk mempermudah membaca kode. Elemen semantik memberikan makna dan struktur pada konten web.

Mereka membuat kode Anda dapat dimengerti oleh pengembang lain. Mereka juga mempermudah mesin telusur untuk menemukan konten Anda dan mengarahkan lalu lintas ke situs Anda. Berikut adalah beberapa elemen semantik yang dapat Anda gunakan dalam proyek HTML dan CSS Anda.

Itu tag mendefinisikan bagian header pada dokumen. Biasanya, ini berisi logo situs, navigasi, dan judul halaman. Ini adalah bagian yang muncul di atas halaman web. Anda dapat menyesuaikan header sesuai dengan kebutuhan Anda. Sintaksnya adalah sebagai berikut:

<body>

<h1> Hi There!</h1>

<p>I am a header</p>

</header>

</body>

2.

Itu

tag berisi tautan navigasi untuk situs web. Ini bisa berupa menu, daftar isi, atau indeks. Biasanya ditempatkan di dalam menandai. Sintaksnya adalah sebagai berikut:

<header>

<nav>

<ul>

<li>My website links</li>

<li ><a href=“#”> About Us </a></li>

</ul>

</nav>

<h1>The above is navigation part of my website.</h1>

</header>

Di browser akan terlihat seperti ini:

Anda dapat menggunakan model tata letak CSS seperti CSS flexbox untuk menyelaraskan elemen

di halaman web Anda.

3.

Itu tag berisi konten utama halaman web. Ini memisahkan konten dari header, sidebar, dan footer. Utama mewakili konten dominan dari bagian.

<body>

<title> Website facts </title>

</header>

<main>

<p> This website is a short demonstration of how the main tag works.</p>

<p> It encloses the part of the website with useful content.</p>

</main>

<h3> This is a footer </h3>

</footer>

</body>

Tampaknya seperti in

4.

Menggunakan tag untuk menentukan bagian mandiri dalam dokumen atau situs web. Misalnya, Anda dapat menggunakannya untuk menyusun postingan blog, majalah, atau kartu produk. Itu elemen dapat melampirkan elemen lain termasuk artikel lain, bagian, dan judul. Elemen terlampir harus berhubungan dengan topik artikel.

<article>
    <h1>Stranger Than Fiction</h1>

<h3>Introduction</h3>

<p>The events and persons naratted in this book are fictitious.</p>

</article>

<h3>Chapter One</h3>

<p> The day was bright and the sun smiled from the sky</p>

</article>

Sepertinya:

5.

Itu tag berisi konten yang terkait dengan konten utama. Gunakan tag ini untuk membuat sidebar untuk kutipan, komentar, atau sapaan. menyoroti informasi yang mungkin terlewatkan oleh pembaca. Itu menonjol dari sisa konten.

<!DOCTYPE html>

<html>

<style>

body{

background-color:#abdbe3;

}

aside {

width: 30%;

padding-left: 0.5rem;

margin-left: 1rem;

flex:left;

box-shadow: inset 5px 0 5px -5px green;

font-style: italic;

color: red;

}

aside > p {

margin: 0.5rem;

</style>

<body>

<main>

<h1> Weaver Birds</h1>

<p>Ploceidae is a family of small passerine birds. Many of which are called weavers, weaverbirds, weaver finches and bishops.</p>

<aside>

<p>Kingdom: Animalia
Phylum: Chordata</p>

</aside>

<p>In most recent classifications, Ploceidae is a clade, excludes some birds that have historically been placed in the family.Some of the sparrows, but includes the monotypic subfamily Amblyospizinae.</p>

</main>

</body>

</html>

6.

Itu elemen berisi bagian halaman tanpa elemen semantik tertentu. Bagian mungkin memiliki judul untuk memperkenalkan konten dan menyertakan elemen HTML lainnya. mewakili komponen halaman web seperti bab dalam buku atau blog.

<!DOCTYPE html>

<html>

<body>

<h1>The Bible</h1>

<h2>Introduction</h2>

<p>The Bible is a collection of religious scriptures sacred in Christianity, Judaism, Samaritanism. The Bible is an anthology – a compilation of texts of a variety of forms – originally written in Hebrew, Aramaic, and Koine Greek.</p>

</section>

<h2>Chapter one:Genesis</h2>

<p>The Book of Genesis is the first book of the Hebrew Bible and the Christian Old Testament. Its Hebrew name is the same as its first word, Bereshit. Genesis is an account of the creation of the world, the early history of humanity, and of Israel’s ancestors and the origins of the Jewish people</p>
</section>

</body>

</html>

Sepertinya:

7.

Itu elemen melampirkan ilustrasi mandiri seperti gambar atau diagram. Ilustrasi ini mereferensikan konten di halaman utama. Angka-angka tersebut dilengkapi dengan keterangan yang ditentukan oleh

elemen. Itu menjelaskan tentang gambar tersebut. Itu ,, dan isinya mewakili satu kesatuan.

<!DOCTYPE html>

<html>

<body>

<main>

<h1>Parts of a Computer</h1>

<p> There are several parts that work together to make up a computer</p>

<figcaption>This is a computer mouse</figcaption>

</figure>

</section>

</main>

</body>

</html>

Sepertinya:

Anda dapat melangkah lebih jauh dan mempelajari cara membuat gambar responsif dalam HTML.

Itu

Elemen HTML membungkus informasi di bagian bawah halaman web. Ini adalah kebalikan dari elemen. Itu

mungkin berisi informasi tentang pemilik halaman. Ini termasuk data hak cipta atau tautan ke informasi tambahan situs.

<!DOCTYPE html>

<html>

<body>

<main>

<h1>Parts of a Computer</h1>

<figcaption>This is a computer mouse</figcaption>

</figure>

</section>

</main>

</footer>

</body>

</html>

Kode di atas menambahkan footer ke Bagian Komputer halaman seperti pada gambar berikut.

Mengapa Menggunakan Elemen HTML Semantik?

Menggunakan elemen HTML semantik memberikan konteks pada kode. Siapa pun yang melihat kode dapat dengan mudah memahaminya. Tag membuatnya lebih mudah untuk menata elemen dan berkolaborasi dalam proyek.

Anda dapat menggunakan HTML semantik dengan pustaka dan kerangka kerja frontend. Sebagian besar browser web modern lebih menyukai elemen HTML semantik daripada elemen tradisional. Mulai gunakan HTML semantik dan lihat kode Anda terlihat modern, mudah dibaca, dan rapi.

8 Tag HTML Semantik untuk Membuat Situs Web Dapat Diakses