Inline Formatting Text

Kita sudah belajar mengidentifikasi penggunaan elemen pada konten yang major (besar) dengan menerapkan semantic meaning untuk mengorganisasikan kontennya. Sekarang kita akan mengenal beberapa formatting text yang digunakan dalam sebuah baris teks (inline text). 

Sebelum menjelaskan elemen inline untuk formatting text yang dapat digunakan, sepertinya kita perlu membahas sekilas mengenai block dan inline.

Standarnya Elemen HTML memiliki dua sifat yaitu block dan inline. Elemen yang memiliki sifat block selalu membuat baris baru ketika menampilkannya, contohnya seperti elemen paragraf, list, heading, dan lainnya. Berlawanan dengan elemen yang memiliki sifat inline, elemen ini tidak menambahkan baris baru ketika dibuat. Apa saja elemen tersebut? Mari kita bahas satu persatu.

Anchor

Apa itu anchor? Anchor (jangkar) merupakan elemen yang digunakan untuk membuat sebuah hyperlink ke halaman atau website lain, file, alamat email atau URL lainnya. Untuk menggunakan elemen ini kita gunakan tag <a>...</a> bersama dengan atribut href untuk menetapkan sebuah target yang akan dituju. 

<p>Hubungi kami di</p>
<ul>
   <li><a href="https://example.com">Website</a></li>
   <li><a href="mailto:info@example.com">Email</a></li>
   <li><a href="tel:+62123456">Telepon</a></li>
   <li><a href="#address">Alamat</a></li>
</ul>

Selain atribut href, terdapat beberapa khusus yang dapat digunakan pada elemen ini, antara lain:

Atribut	Nilai	Deskripsi
download	filename	Menginstruksikan browser untuk mengunduh pada URL yang ditetapkan daripada mengarahkannya.
href	URL	Menetapkan target yang akan diarahkan/unduh ketika pengguna menekan hyperlink.
hreflang	language_code	Menetapkan bahasa dari dokumen target.
ping	list_of_URLs	Menetapkan URL yang akan diberitahu dengan mengirimkan post request ping pada body oleh browser (berjalan di belakang layar) ketika target URL pada hyperlink ditekan. Biasanya atribut ini digunakan untuk pelacakan.
referrerpolicy	no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url	Menetapkan referensi untuk dikirim pada target.
rel	alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, tag	Menetapkan hubungan antara halaman yang ditampilkan dengan target.
target	_blank, _parent, _self, _top	Menetapkan lokasi ketika membuka target contohnya pada sebuah tab, window atau pada tab itu sendiri.
media	media_type	Menetapkan tipe media yang digunakan pada target.

Emphasized text

Gunakan elemen <em> untuk menunjukan bagian kata yang perlu kita tekankan. Elemen ini menunjukan stress emphasis atau konten/kata yang perlu mendapatkan penekanan atau perhatian khusus. Berikut contoh penggunaannya.

<p><em>Oding</em> adalah seorang pelajar</p>
<p>Dia adalah seorang <em>pelajar</em></p>

Pada kalimat pertama, penekanan terdapat pada “siapa” seorang pelajar. Sedangkan pada kalimat kedua, penekanan terdapat pada “apa” yang sedang ditekuni oleh Oding.

Standarnya pada browser sebuah kata yang ditekankan akan ditampilkan dalam gaya miring pada teks nya.

Important text

Gunakan elemen <strong> untuk menunjukan sebuah teks yang begitu penting (strong importance), serius ataupun mendesak. Dalam arti teks tersebut harus dapat perhatian lebih dari teks biasa lainnya.

<p>Kesehatan merupakan hal yang penting, jaga pola makan yang teratur dan <strong>jangan sampai makan tengah
   malam!</strong></p>

Standarnya pada browser sebuah teks yang diberi markup <strong> akan ditampilkan secara tebal. Dan ketika pengguna menggunakan pembaca layar (screen reader), suara yang terdengar akan berbeda. Ini mengartikan bahwa teks tersebut penting tidak hanya sekedar tebal.

Short quotations

Gunakan elemen <q> untuk menandai sebuah kutipan dalam sebuah teks. Elemen ini berbeda dengan <blockquote>, elemen ini digunakan untuk kutipan pendek yang terletak di dalam baris (inline).

<p>Sebelum pulang kerja, ia berkata kepadaku: <q>Maaf saya tidak bisa hadir dalam pertemuan nanti</q></p>

Standarnya pada browser sebuah teks yang diberi markup <q> akan ditampilkan di dalam tanda kutip (Quotation marks).

Citation

Selain sebuah atribut, <cite> juga merupakan sebuah elemen yang digunakan untuk sebuah rujukan pada sebuah dokumen, contohnya sebuah buku, majalah, artikel dan lainnya.

<p>Informasi selengkapnya bisa Anda dapatkan di <cite><a href="https://dicoding.com">dicoding.com</a></cite>.</p>

Standarnya pada browser sebuah teks yang diberi markup <cite> akan ditampilkan dengan garis miring (italic).

Defining terms

Elemen <dfn> digunakan ketika mendefinisikan sebuah istilah (term). Elemen ini harus terletak pada elemen lain yang menaunginya. Contohnya pada sebuah elemen <p> atau elemen <section>. Berikut contoh penggunaannya:

<p><dfn>Website</dfn> merupakan halaman yang menampilkan informasi melalui teks atau gambar. Website dapat diakses melalui internet dengan menggunakan browser.</p>

Standar pada browser yakni sebuah teks yang diberi markup <dfn> akan ditampilkan dengan garis miring (italic).

Subscript dan Superscript

Subscript <sub> dan superscript <sup> merupakan elemen yang dapat membuat teks yang ditampilkan nampak kecil, dengan posisi di bawah (sub) atau di atas (sup) dari teks biasanya. Elemen ini digunakan untuk menunjukan sebuah rumus kimia ataupun matematika.

<p>Sukrosa merupakan suatu disakarida yang dibentuk dari monomer-monomernya yang berupa unit glukosa dan fruktosa,dengan rumus molekul C<sub>12</sub>H<sub>22</sub>O<sub>11</sub>.</p>
 
<p>Salah satu persamaan paling umum dalam semua fisika adalah E=MC<sup>2</sup></p>

Jika kita lihat pada browser, tampilan akan tampak seperti ini:

Highlighted text

Untuk menandai atau menyorot sebuah teks kita bisa menggunakan elemen <mark>. Elemen ini digunakan ketika terdapat sebuah teks yang memiliki peran penting, biasanya teks tersebut merupakan bagian yang paling relevan atau penting dalam sebuah konteks kalimat.

<p>Ini adalah periode perang saudara. Pesawat ruang angkasa pemberontak, menyerang dari pangkalan tersembunyi, telah
   memenangkan kemenangan pertama mereka melawan Kekaisaran Galactic yang jahat. Selama pertempuran,
   <mark>mata-mata
       Pemberontak berhasil mencuri rencana rahasia
   </mark>
   ke senjata pamungkas Kekaisaran, STAR DEATH, stasiun ruang angkasa
   berlapis baja dengan kekuatan yang cukup untuk menghancurkan seluruh planet.
</p>

Standarnya pada browser teks yang diberi markup <mark> akan ditampilkan dengan background kuning dan teks hitam.

Line Break

Terkadang kita mungkin perlu menambahkan sebuah baris baru pada sebuah baris teks (termasuk di dalam paragraf), tetapi kita mengetahui bahwa browser akan mengabaikan sebuah penulisan spasi ganda ataupun garis baru, sehingga kita memerlukan sebuah tanda yang dapat digunakan untuk memberitahu browser untuk “Tambahkan garis baru di sini!”.

Inline line break element atau <br> dapat digunakan untuk memberitahu browser untuk memberikan sebuah garis baru pada baris teks. Sama seperti gambar, elemen ini merupakan elemen kosong sehingga kita tidak membutuhkan sebuah tag penutup.

<p>
   Dicoding Space,<br>
   Jln. Batik Kumeli No. 50.<br>
   Bandung.<br>
   40123
</p>

Jika kita lihat pada browser, maka tampilan akan tampak seperti ini: