Kata-kata atau bagian teks lengkap dapat dengan mudah ditebalkan dan dijadikan miring. Pertama, cara memberi tebal. Untuk itu, Anda memiliki dua elemen HTML, yaitu b dan strong.
Selamat datang di <b>PSD-Tutorials.de</b>! <br /> Selamat datang di <strong>PSD-Tutorials.de</strong>!
Hasilnya saat dilihat di browser sebagai berikut:
Dengan jelas, kedua elemen ini memberikan tampilan yang identik. Mengapa ada dua elemen berbeda? Sebenarnya, untuk situs web terdapat berbagai bentuk tampilan selain yang ada di browser standar yang kita kenal. Misalnya, pembaca layar untuk orang buta atau perangkat seluler. Elemen HTML yang disediakan oleh W3C digunakan untuk mendukung semantik. Jadi, elemen b sekarang tidak lagi berarti tebal, melainkan menyoroti teks secara visual yang tidak memiliki tingkat penting yang tinggi. Ini bisa berupa nama produk atau kata kunci dalam dokumen.
Elemen strong sebelumnya digunakan untuk penekanan yang lebih kuat. Sementara itu, em digunakan untuk menyoroti teks yang penting (emfatis). strong dahulu merupakan peningkatan dari em dalam versi HTML sebelumnya. Namun, dalam HTML5, kedua elemen tersebut diberikan makna yang berbeda.
Terlebih dahulu, teks dengan penekanan biasa.
<p> Kucing adalah hewan yang lucu. </p>
Sekarang, teks yang sama, tetapi dengan penekanan pada kata pertama.
<p> <em>Kucing</em> adalah hewan yang lucu. </p>
Dengan menggunakan em, penekanan diberikan pada kata Kucing. Contoh penggunaannya bisa dalam sebuah diskusi mengenai apakah anjing atau kucing yang lebih manis.
Sekarang, kita bisa menerapkan elemen em pada kata adalah dalam contoh ini.
<p> Kucing <em>adalah</em> hewan yang lucu. </p>
Ini bisa menjadi respons dalam sebuah diskusi di mana seseorang mengatakan bahwa kucing sama sekali tidak lucu.
Secara visual, potongan teks yang ditebalkan dengan em akan ditampilkan miring di browser. Efek visual yang sama dapat dicapai dengan menggunakan elemen i.
Menurut draft kerja HTML5, elemen i kini tidak lagi berarti miring.
<p> Selamat datang di <i>PSD-Tutorials.de</i> </p>
Sebaliknya, elemen ini kini dimaksudkan untuk menyampaikan suasana yang berbeda. Elemen i ini dapat digunakan, misalnya, untuk menandai istilah teknis atau nama taksonomi.
Ada banyak pengaturan teks yang menggunakan elemen tersebut, namun pada akhirnya, CSS akan bertanggung jawab terhadap penampilannya secara visual.
Akronim dengan abbr
Untuk menandai suatu akronim, dapat menggunakan elemen yang sama yang sebelumnya digunakan untuk singkatan, yaitu abbr.
Kantor Jerman-Austria dari <abbr title="World Wide Web Consortium">W3C</abbr> pindah ke Potsdam University of Applied Sciences pada April 2009.
Browser yang memahami dengan benar elemen abbr akan menampilkan teks di dalam elemen abbr tersebut dengan garis bawah.
Sebagai tambahan, elemen abbr harus diberikan atribut title. Di sana biasanya mencantumkan ekspresi lengkap dari akronim tersebut. Saat pengunjung mengarahkan kursor ke atas akronim, ekspresi lengkap akan muncul dalam jendela tooltip.
Alamat dengan address
Melalui elemen address, informasi alamat dapat di markup.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Browser biasanya menampilkan konten elemen address dengan miring.
Menandai Kode dengan code
Elemen code digunakan untuk menandai kode program. Dalam hal ini, tidak ada perubahan dari versi HTML sebelumnya. code masih digunakan untuk tujuan tersebut.
<pre>
Ini adalah kepala HTML:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Umumnya, kode digabungkan dengan elemen pre untuk mempertahankan indentasi yang digunakan dalam kode program.
Spesifikasi HTML5 merekomendasikan penggunaan atribut class dalam konteks elemen code. Atribut ini dapat menentukan bahasa yang digunakan dalam elemen code. Berikut adalah beberapa contoh tipikal bagaimana penandaan semacam itu dapat terlihat:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Bagaimana browser mengimplementasikan instruksi ini, tidak diatur oleh W3C.
<pre>
Ini adalah kepala HTML:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Untuk saat ini, atribut class sama sekali tidak memiliki efek yang terlihat pada browser. Namun, pengunjung dapat melihat dalam kode sumber halaman web tersebut dalam bahasa apa kode program tersebut ditulis.
Penulisan Kecil dengan small
Elemen small awalnya digunakan untuk menampilkan teks lebih kecil dari biasanya. Di HTML5, small secara eksplisit digunakan untuk teks kecil, seperti:
• Informasi hak cipta
• Penolakan tanggung jawab
• Syarat dan ketentuan lisensi
• AGB
W3C menjelaskan secara tegas bahwa small tidak seharusnya digunakan untuk teks panjang.
<small> Hak cipta oleh PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Mencetak Teks dengan u
Kata dapat di garisbawahi dengan menggunakan elemen u. Berikut adalah contohnya:
<p>Selamat datang di <u>PSD-Tutorials.de</u></p>
Hasilnya akan tampil di browser seperti ini:
Jika melihat hasilnya, efek yang diinginkan berhasil dicapai. Namun, ada kekurangan. Di internet, teks yang digarisbawahi biasanya menunjukkan hyperlink. Jika Anda menampilkan teks atau kata yang digarisbawahi, pengunjung mungkin mengira itu adalah hyperlink. Mencoba mengkliknya tentu akan gagal. Oleh karena itu, sebaiknya hindari penggunaan garisbawah.
