Tutorial HTML5 - Elemen <b>, <bdi>, <bdo>, <br>, <data>, <em>, <i>, <kbd>, <mark>, <q>, <s>, <small>, <strong>

By Admin | June 12, 2018

Tutorial HTML5 - Elemen <b>, <bdi>, <bdo>, <br>, <data>, <em>, <i>, <kbd>, <mark>, <q>, <s>, <small>, <strong> image

Elemen b digunakan untuk menandai kata yang perlu diperhatikan dengan membuat teks tebal.

<p>This article describes several <b class="keywords">text-level</b> elements. It explains their usage in an <b class="keywords">HTML</b> document.</p>

Elemen bdi digunakan untuk mengisolasi kata dari bahasa yang arah tulisannya berbeda dari kata-kata lain di sekitarnya. BDI adalah singkatan dari Bi-directional Isolation.

<ul>
  <li>User <bdi>hrefs</bdi>: 60 points</li>
  <li>User <bdi>jdoe</bdi>: 80 points</li>
  <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

Hasil output:

  • User hrefs: 60 points
  • User jdoe: 80 points
  • User إيان: 90 points

Bagaimana jika tanpa elemen bdi?

<ul>
  <li>User hrefs: 60 points</li>
  <li>User jdoe: 80 points</li>
  <li>User إيان: 90 points</li>
</ul>

Hasil output:

  • User hrefs: 60 points
  • User jdoe: 80 points
  • User إيان: 90 points

Elemen bdo digunakan untuk mengganti arah teks.

Atribut Nilai Deskripsi
dir ltr
rtl
ltr: teks ditampilkan dari kiri ke kanan
rtl: teks ditampilkan dari kanan ke kiri
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

Elemen br digunakan untuk membuat baris baru.

Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA

Elemen data digunakan untuk membuat daftar data yang disertai id untuk keperluan pemrosesan data menggunakan javascript.

<ul>HTML5 Books
<li><data value="1118012526">HTML5 For Dummies</data></li>
<li><data value="1615640843">HTML5 For Complete Idiots</data></li>
<li><data value="8390492029">HTML5 For Stark Raving Mad Lunatics Who Couldn't Tie A Shoelace If They Tried</data></li>
</ul>

Elemen em digunakan untuk menandai kata yang perlu ditekankan.

<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p>

Elemen i membuat teks cetak miring yang digunakan untuk menandai kata-kata asing.

<p>The Latin phrase <i class="latin">Veni, vidi, vici</i> is often mentioned in music, art, and literature.</p>

Elemen kbd digunakan untuk menulis perintah masukkan dari keyboard.

<p>Three keys you really need to familiarize yourself with are <kbd>CTRL</kbd>, <kbd>ALT</kbd> and <kbd>DEL</kbd>.</p>

Elemen mark digunakan untuk merepresentasikan teks yang disorot atau ditandai karena memiliki peran penting, biasanya dimaksudkan untuk mereferensi (merujuk) atau mengingatkan akan hal penting yang berkaitan dengan konteks khusus sebuah kalimat.

<p>Despite the stockmarket crash in 2008, the value of my share portfolio <mark>increased by 100 percent</mark>. I must be doing something right.</p>
<p>I should point out that the value only increased because I kept pumping more money in!</p>

Elemen q digunakan untuk menandai kutipan singkat dalam sebuah kalimat. Elemen q menggunakan atribut cite digunakan untuk mengetahui sumber kutipan diambil.

<p>According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success.</q></p>

Elemen s digunakan untuk menunjukkan konten atau teks yang sudah tidak lagi akurat atau relevan.

<s>Today's Special: Salmon</s> SOLD OUT<br>
<!-- Using CSS -->
<span style="text-decoration:line-through;">Today's Special: Salmon</span> SOLD OUT

Elemen small digunakan untuk konten yang kurang penting.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
<small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a></small>

Elemen strong digunakan untuk menunjukkan yang penting untuk diperhatikan.

<p>Chapter 1: <strong>Proper Use of the Strong Element</strong></p>

Jika anda suka dengan artikel tersebut, silakan berikan dukungan

Donasi