-->
Riedayme Pengetahuan untuk Mempelajari Pemrograman khususnya pada Website, Mobile dan Desktop saya tuliskan disini.
Riedayme
Riedayme

Belajar HTML 5 - Tag Semantik


maksud dari tag semantik adalah tag yang memiliki makna, jadi tag semantik ditujukan agar mudah dipahami oleh browser dan pengembang.

contoh tag semantik adalah tag form atau tag table yang dimana tag tersebut menjelaskan kalau ada sebuah konten yang berhubungan dengan nama tagnya.

contoh tag bukan semantik adalah div dan span. disini tag tersebut tidak jelas konten apa yang tersedia didalam tag tersebut.

fungsi lain dari tag semantik adalah dapat mudah di identifikasi oleh mesin pencari untuk mengidentifikasi konten yang ada pada halaman web.

daftar tag semantik di html 5


<main></main>

tag main digunakan sebagai tag pembungkus utama, tag ini hanya boleh ada satu saja.

<section></section>

tag section digunakan untuk membuat penjelasan konten secara singkat yang biasa ada di halaman beranda.

penulisan kode
<section>
 <h1>Pemuda membuat sebuah pesawat mini</h1>
 <p>seorang pemuda membuat pesawat yang berbentuk mini...</p>
</section>

<article></article>

tag article digunakan untuk menaruh tulisan yang jelas. tag ini bisa digunakan untuk fitur postingan blog.

penulisan kode
<article>
 <h1>Seorang pemuda berhasil membuat pesawat mini</h1>
 <p>seorang pemuda yang berasal dari negara teyki berhasil membuat pesawat mini yang bisa membawa 1 penumpang</p>
</article>

<header></header>

tag header digunakan untuk mendefinisikan bahwa ada sebuah judul yang akan ditulis didalamnya. tag header bisa sebagai judul halaman website maupun halaman artikel.

penulisan kode
<article>
 <header>
  <h1>Tentang Cashflow orang kaya yang semakin kaya</h1>
 </header>
 <p>cashflow atau bisa disebut arus uang yang dimiliki orang kaya berbeda dengan orang biasanya.</p>
</article>

<footer></footer>

tag footer digunakan untuk menaruh informasi seperti pemilik, hak cipta, link aturan pemakaian, kontak, dan lainnya

penulisan kode
<footer>
 <p>&copy;2020 Riedayme</p>
 <p>Contact me : programmer.irfaan@gmail.com</p>
</footer>

<nav></nav>

tag nav digunakan untuk membungkus link navigasi utama

penulisan kode
<nav>
 <ul>
  <li><a href="/">beranda</a></li>
  <li><a href="/about">about</a></li>
 </ul>
</nav>

<aside></aside>

tag aside digunakan untuk mendefinisikan konten lainnya, biasanya digunakan untuk membuat layout sidebar.

penulisan kode
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</article>

<aside>
 <h4>About me</h4>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</aside>

<figure></figure> dan <figcaption></figcaption>

tag figure untuk mendefiniskan gambar sedangkan tag figcaption digunakan untuk memberi deskripsi pada gambar.

penulisan kode
<figure>
 <img src="winter.png" alt="winter" />
 <figcaption>winter remember 2019</figcaption>
</figure>

<details></details> dan <summary></summary>

tag details digunakan untuk memberi text tambahan lebih detail, sedangkan tag summary sebagai isi dari text utama yang terlihat. tag details ini bisa dilihat dan disembunyikan.

penulisan kode
<details>
 <summary>ada konten didalam sini</summary>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</details>

<mark></mark>

tag mark digunakan untuk memberi tanda terhadap text yang ingin ditandai

penulisan kode
<p>hallo <mark>text ini ditandai</mark></p>

<time></time>

tag time digunakan untuk menampilkan tanggal dan waktu. tag ini bisa mempermudah mesin pencari untuk membaca tanggal.

penulisan kode
<time datetime="2020-01-26">Year 2020</time>
0 Komentar
HTML

Artikel Terkait

Komentar