Mode Malam
| Mode Tampilan
Penulis : admin

Home / Programming / Tutorial Lengkap Belajar Html # Membuat Heading Dan Paragraf Pada Html
Tutorial Lengkap Belajar Html # Membuat Heading Dan Paragraf Pada Html

Tutorial Lengkap Belajar Html # Membuat Heading Dan Paragraf Pada Html


Pada artikel sebelumnya kita telah belejar mengenal apa itu element pada html

Pada artikel ini kita akan belajar cara membuat sebuah heading teks dan paragraf.
Mengetahui penggunaan heading sangatlah penting dalam membangun website yang ramah bagi mesin pencarian (google bing, yahoo dan lainnya) karena heading menjadi salah satu usaha dalam mengoptimasi web dari sisi on page.
Baik kita langsung saja ke tutorialnya,

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

Dalam mengimplementasikan heading tag, ada aturan yang harus di patuhi. Karena penggunaan heading sendiri erat kaitannya dengan dunia SEO. Penggunaan heading tag bukan untuk meperbesar ukuran teks ataupun menebalkannya, namun menandai bahwa konten yang ada di dalamnya adalah berupa nama website itu sendiri, judul ataupun subjudul.
Secara umum implementasi heading tag bisa kita bagi menjadi dua yaitu,

Implementasi heading tag pada halaman beranda

Halaman beranda adalah halaman utama yang akan muncul pertama kali ketika kita mengunjungi sebuah halaman web, yang biasanya berisi list artikel dari website tersebut.
Dalam mengimplementasikan heading tag pada halaman beranda, aturannya adalah  gunakan <h1> untuk judul website dan <h2> untuk list atau feed artikel.
Contoh implementasinya seperti berikut,
Deretcode


Output : loading

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


Output : loading

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.
Tutorial Lengkap Belajar Html # Membuat Heading Dan Paragraf Pada Html

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


Output : loading

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


Output : loading

Membuat teks miring

Untuk membuat teks miring kita bisa menggunakan tag <i>
Contohnya,

Deretcode


Output : loading

Membuat teks bergaris bawah

Untuk membuat teks bergaris bawah kita bisa menggunakan tag <u>

Contohnya,

Deretcode


Output : loading

Membuat baris baru pada teks.

Untuk membuat baris baru pada teks, kita bisa menggunakan single tag <br/>
Contohnya,

Deretcode


Output : loading

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.

Tags: #html #headng #paragraf #textformatting
Bagikan :

Komentar:

Silahkan berkomentar dengan baik dan bijak!

Name * :
Email :
Website :
Comment :


This website uses cookies to ensure you get the best experience on our website

learn more