Cara Membuat Garis Bawah (Underline) dengan HTML

Tutorial Garis Bawah Underline pada HTML

Tutorial belajar HTML kali ini membahas tentang cara menggunakan efek garis bawah atau biasa disebut underline pada pemrograman HTML. Style underline sering digunakan sebagai penanda bahwa teks atau tulisan tersebut penting.

Ms.Office juga menyediakan efek underline ini yang terletak pada toolbar nya. Pada artikel sebelumnya kita pernah belajar cara membuat teks menjadi tebal (Bold) dan cara membuat teks menjadi miring (Italic). Sekarang kita akan bahas cara penggunaan underline pada HTML.

Cara Penggunaan HTML Underline

Pertama, kita buat sebuah file HTML dan ketikan kode berikut dibawah.

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tutorial HTML Underline</title>
</head>
<body>
	
</body>
</html>

Selanjutnya kita akan membuat sebuah teks yang nantinya akan diberikan efek underline. Lihat kode berikut ini.

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tutorial HTML Underline</title>
</head>
<body>
	<p>Belajar HTML itu mudah!</p>
</body>
</html>

Simpan dan berikut hasil awal sebelum diberikan efek underline pada HTML.

Belajar HTML itu mudah!

Nah sekarang kita akan memberikan efek garis bawah pada baris teks tersebut. Pemberian efek dapat ditampilan satu kalimat penuh maupun hanya satu kata saja. Lihat contoh dibawah ini.

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tutorial HTML Underline</title>
</head>
<body>
	<p><u>Belajar HTML itu mudah!</u></p>
	<p><u>Belajar HTML</u> itu mudah!</p>
</body>
</html>

Hasilnya akan menampilkan efek underline seperti berikut:

Belajar HTML itu mudah!
Belajar HTML itu mudah!

Kita lihat tampilan diatas bahwa penggunaan underline dapat kita tentukan letaknya dengan mudah untuk mendapatkan hasil yang kita inginkan.

Penggunaan pada Elemen Lain

Kita juga dapat memberikan efek garis bawah di dalam elemen HTML lainnya asalkan masih berbentuk teks atau tulisan.

Contoh penempatan kode html underline pada teks heading.

<h2>Tutorial HTML <u>Underline</u></h2>

Hasilnya akan seperti berikut:

Tutorial HTML Underline

Contoh penempatan html underline pada elemen cetak tebal (Bold) 

<p>Belajar HTML itu <b><u>MUDAH</u></b></p>

Hasilnya akan seperti berikut:

Belajar HTML itu MUDAH

Contoh penempatan pada elemen cetak tebal (Bold) dan cetak miring (Italic)

<p>Belajar HTML itu <i><b><u>MUDAH</u></b></i></p>

Hasilnya akan seperti berikut:

Belajar HTML itu MUDAH

Catatan

HINDARI dalam penggunaan garis bawah pada suatu teks atau kalimat memiliki style yang sama dengan penggunaan anchor link pada website. Misalnya, anchor link secara default berwarna biru maka underline tidak boleh diubah dengan warna biru juga.

Hal ini untuk menghindari visitor agar tidak bingung saat harus mengklik suatu anchor link.

Ohya, untuk kamu yang sedang belajar cara membuat website dari nol dengan notepad, kamu bisa mulai belajar dari kode html dasar dahulu. Aku telah membuat materi belajar html untuk pemula.

Penjelasan materi belajar disertai gambar dan contoh kode html. Silakan akses materi tersebut pada link berikut.

Belajar HTML Gampang Banget! – HTML Warrior #1

Demikian tutorial belajar HTML kali ini, semoga bermanfaat dan share artikel ini ke yang lain yah! 😀

Buku Belajar CSS - CSS Monster | CSSMonster.ID

Pin It on Pinterest

Shares
Scroll to Top