Pendahuluan

Dasar

Pengaturan teks HTML

Dalam menentukan ukuran dan tampilan teks di dalam HTML saat ini, sudah banyak menggunakan CSS. Akan tetapi bukan berarti elemen pengaturan teks standar pada HTML tidak dipakai lagi. Elemen-elemen ini justru sangat diperlukan untuk dipadukan dengan CSS.

Pada topik kali ini, dikarenakan berbagai alasan, tidak diberikan contoh ataupun output dari kode yang dijelaskan. Anda harus mencoba membuat sendiri dokumen HTML yang menggunakan tag-tag berikut, atau dengan cara klik kanan dan "view page source" atau "inspect element" pada berbagai halaman web untuk mempelajari topik ini.

Elemen block dan inline pada HTML

Elemen visual pada HTML memiliki dua jenis perilaku: block dan inline. Elemen yang bersifat block otomatis ditempatkan di baris baru. Elemen sebelum dan sesudah elemen block biasanya berada di baris yang berbeda. Contoh elemen block:

  • h1 - h6
  • div
  • p
  • form
  • pre

Sedangkan elemen inline, berada pada baris yang sama dengan elemen-elemen sebelum dan sesudahnya. Contoh elemen inline:

  • b, i, u, strong, em
  • span
  • a
  • img

Perilaku block dan inline ini dapat dengan mudah diubah dengan CSS dengan properti display. Misalkan kode CSS a.menu { display:block; } akan menyebabkan elemen a dengan class "menu" tampil menurun. Penggunaan CSS akan dibahas pada topik terpisah.

Elemen div dan span bisa dibilang merupakan elemen block dan inline yang polos. Kedua elemen ini biasanya diberi atribut class atau id dan tampilannya diatur dengan CSS.

Heading pada HTML

Terdapat elemen h1, h2, h3, h4, h5 dan h6 untuk menentukan ukuran teks.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Selain menentukan ukuran teks, heading juga memiliki makna penting di dalam SEO (Search Engine Optimization). Salah satu parameter yang menentukan ranking suatu halaman pada google adalah kesesuaian teks di dalam h1 dan h2. Terutama elemen h1 paling pertama yang ada pada halaman web tersebut.

Paragraf pada HTML

Untuk menampilkan kalimat-kalimat dalam bentuk paragraf, biasanya digunakan elemen <p>

Bold, italic dan underline pada HTML

Untuk membuat teks menjadi bold, italic atau garis bawah, dapat digunakan tag <b>, <i> dan <u>. Akan tetapi memformat teks seperti ini sudah mulai ditinggalkan. Lebih dianjurkan untuk menggunakan tag <strong> untuk cetak tebal, <em> untuk cetak miring.

Strong berarti kuat, memberikan kesan tegas pada teks. <em> kepanjangannya emphasis berarti penekanan, dimaksudkan untuk memberikan penekanan pada teks. Sedangkan untuk garis bawah pada halaman HTML biasanya berarti teks tersebut adalah suatu link menuju ke halaman tertentu, sehingga sangat jarang dipakai.

Penggunaan <b>, <i>, <u>, <strong> dan <em> juga dapat digantikan dengan CSS. Property font-style dan text-decoration pada CSS dapat menentukan apakah suatu teks dicetak tebal, miring, garis bawah ataupun kedap-kedip.

br, hr, spasi dan pre pada HTML

HTML pada dasarnya menampilkan spasi, enter ataupun tab di dalam kode HTML hanya sebagai satu spasi. Untuk pergi ke baris baru, dapat digunakan elemen <br />. Atau bila ingin menampilkan garis pemisah, dapat menggunakan <hr />.

Untuk menampilkan banyak spasi, dapat digunakan kode &nbsp;. Dan bila ingin HTML menampilkan spasi dan enter tanpa harus menggunakan <br /> dan &nbsp;, dapat menggunakan elemen <pre>. Elemen <pre> akan menampilkan teks di dalamnya apa adanya.

HTML entities

Di atas telah dijelaskan bahwa untuk menampilkan spasi lebih dari satu, harus menggunakan &nbsp;. Kode ini disebut sebagai HTML entities. Berikut beberapa entitas HTML:

  • &nbsp; untuk menampilkan spasi
  • &gt; untuk menampilkan >
  • &lt; untuk menampilkan <
  • &amp; untuk menampilkan &
  • &quot; untuk menampilkan "
  • &copy; untuk menampilkan ©
  • &sigma; untuk menampilkan σ
  • &Sigma; untuk menampilkan Σ

Jika menggunakan IDE seperti NetBeans dan Eclipse, terdapat intellisense / code-completion yang menampilkan daftar entitas HTML ketika tanda & diketik.

sub dan sup pada HTML

Bila perlu untuk mengetikkan subscript atau superscript seperti misalnya H2O atau x2, dapat digunakan tag <sub> dan <sup>.