Pada artikel sebelumnya kita telah belejar mengenal apa itu element pada html
Apa Itu Heading?
Heading merupakan salah satu element html yang berfungsi untuk menunjukan teks penting dari sebuah halaman web.
Heading sendiri digunakan untuk menandai judul dan sub judul dari halaman web tersebut.
Heading dibuat menggunakan tag <H1> sampai <H6>.
Semakin kecil angka dibelakang huruf H, semaking peting bagian tersebut di halaman web.
Khusus untuk tag <H1>, penggunaanya hanya boleh satu kali di satu halaman web dan biasanya digunakan untuk membungkus judul artikel atau nama website itu sendiri.
Hal ini berkaitan dengan yang namanya optimasi seo on page.
advertisement
Membuat Heading Sesuai Aturan
Implementasi heading tag pada halaman beranda
Deretcode
Implementasi heading tag pada halaman posting
Halaman posting adalah halaman artikel yang membahas topik tertentu.
Berbeda dengan halaman beranda, aturan dalam mengimplementasi heading tag pada halaman ini adalah gunakan <h1> untuk judul artikel, h2 untuk sub judul, h3 untuk sub judul dari h2 dan seterusnya.
Sedangkan untuk nama websitenya sendiri tidak lagi menggunakan heading tag,
Contoh implementasinya seperti berikut,
Deretcode
Apa Itu Elemen Paragraf?
Paragraf adalah element yang berisi teks kalimat yang ditandai menggunakan tag <p>.
Sedangkan dalam istilah kbbi paragraf adalah rangkaian kalimat yang berisi gagasan pokok.
Paragraf biasanya digunakan pada halaman posting atau artikel di halaman web.
Berikut adalah contoh dari element paragraf.
Membuat Element Paragraf Di Html
Dalam mengimplementasikan tag paragraf perlu di perhatikan bahwa penggunaan tag <p> memang dikhususkan untuk membuat paragraf pada html karena banyak yang menggunakannya untuk membuat teks label, teks blok dan lainya. Hal ini tidak jadi masalah, namun dokumen html yang dibuat menjadi tidak sesuai standar.
Mengimplementasikan tag <p> untuk membuat paragraf cukup mudah contohnya seperti berikut,
Deretcode
Kenapa harus harus pake elemen <p>, bukannya bisa pake elemen bersifat block (pen: membreak baris teks sehingga element lain berada di bawahnya) lainya seperti <div>?
Memang hasilnya akan terlihat sama saja, namun jika kita menggunakan tag <p> maka kita memberitahukan kepada mesin pencarian (google,yahoo, bing dll) bahwa teks tersebut berupa paragraf.
Berbeda halnya ketika kita menggunakan tag <div> yang penggunaannya bersifat general, maka mesin pencarian butuh sedikit usaha untuk mengidentifikasi isi dari elemen tersebut.
advertisement
Element Text Formatting
Ketika kita ingin membuat sebuah paragraf, ada kalanya kita ingin memformat beberapa kata dari teks tersebut seperti menebalkan, membuat teks miring, membuat teks bergaris bawah dan lain sebagainya.
Oleh karena itu, html juga menyediakan element-element untuk melakukan hal tersebut.
Berikut beberapa element formating yang bisa kita gunakan,
Menebalkan teks
Untuk membuat menebalkan teks, kita bisa menggunakan tag <b> ,
Contohnya,
Deretcode
Membuat teks miring
Untuk membuat teks miring kita bisa menggunakan tag <i>
Contohnya,
Deretcode
Membuat teks bergaris bawah
Untuk membuat teks bergaris bawah kita bisa menggunakan tag <u>
Contohnya,
Deretcode
Membuat baris baru pada teks.
Untuk membuat baris baru pada teks, kita bisa menggunakan single tag <br/>
Contohnya,
Deretcode
Masih banyak tag teks formatting lainnya yang bisa kita gunakan untuk membuat paragraf yang informatif.
Berikut List teks formatting yang bisa kita gunakan di html 5.
| Tag | Keterangan |
| <abbr> | Digunakan ketika kita ingin menandai sebuah text bahwa text tersebut dalam bentuk frasa atau singkatan |
| <acronym> | Hampir sama seperti abbr namun versi lawas (Not Supported In HTML5) |
| <address> | Digunakan ketika kita ingin menandai sebuah alamat lengkap |
| <b> | Digunakan ketika kita ingin menebalkan sebuah tulisan |
| <bdi> | Digunakan untuk menandai bahwa sebuah text berbeda format dari text sebelum dan setelahnya |
| <bdo> | Digunakan untuk merubah teks, seperti arabic teks |
| <blockquote> | Digunakan untuk membuat sebuah blok kutipan |
| <cite> | Digunakan untuk membuat refrensi |
| <code> | Digunakan untuk membuat blok kode |
| <del> | Digunakan untuk membuat teks yang dicoret |
| <dfn> | Digunakan untuk membuat teks definisi yang di cetak miring |
| <em> | Digunakan untuk mempertegas sebuah teks |
| <i> | Digunakan untuk membuat icon atau teks miring |
| <ins> | Digunakan untuk menandai bahwa teks tesebut ditambahkan kedalam dokumen |
| <kbd> | Digunakan untuk menandi teks keyboard |
| <mark> | Digunakan untuk membuat menghighlight sebuah teks |
| <output> | Digunakan untuk mendefinisikan sebuah teks output |
| <pre> | Digunakan untuk membuat blok teks, dan biasa digunakan untuk membungkus tag <code> |
| <progress> | Digunakan untuk mendefinisikan bahwa sebuah progress |
| <q> | Digunakan untuk mendifiniskan sebuah kutipan pendek |
| <s> | Digunakan untuk mencoret teks yang panjang |
| <samp> | Digunakan untuk mendefiniskan sebuah sampel output sebuah program komputer |
| <small> | Digunakan untuk membuat teks berukuran kecil |
| <strong> | Digunakan untuk menebalkan sebuah teks |
| <sub> | Digunakan untuk membuat subscript teks |
| <sup> | Digunakan untuk membuat superscipt teks |
| <u> | Digunakan untuk membuat teks bergaris bawah |
| <var> | Digunakan untuk mendefinisikan sebuah variable |
| <wbr> | Digunakan untuk menentukan dimana sebuah teks tanpa spasi harus di wrap atau di break line |
| <time> | Digunakan untuk mendefinisakan tanggal pada sebuah acara tertentu |
advertisement
Sampai disini tutorial heading dan paragraf di html. Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share. Dan jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis dikolom komentar.
Silahkan berkomentar dengan baik dan bijak!