Apa itu br di html?

Oke, mari kembali ke kode HTML terakhir kita dari pelajaran sebelumnya. Disini kita bisa melihat bahwa konten kita masih sebatas judul. Kami akan menambahkan paragraf, dan akan mempelajari beberapa tag yang akan menambahkan pemformatan ke konten kami, seperti huruf tebal, miring, pembatas, dll.

Pertama kami menambahkan konten kami dengan kata-kata acak. Di sini kami menggunakan teks yang dikenal sebagai Lorem Ipsum. Kita bisa cari di Google, lalu kita bisa lihat deskripsinya dari Wikipedia. Ini adalah contoh dokumen Lorem Ipsum. Jadi kita akan menggunakan kata acak, tanpa arti, hanya untuk membentuk tampilan dokumen

Untuk menggunakan Lorem Ipsum di Atom, kita harus menginstal sebuah paket bernama Lorem. Di Atom saya sudah terpasang. Dan untuk menggunakannya kita ketik lorem_p diikuti dengan jumlah paragraf yang kita butuhkan. Misalkan saya ingin membuat 3 paragraf, maka saya ketik lorem_p3 dan tekan alt+L. Kemudian paket akan membuat 3 paragraf dengan kata-kata acak untuk kita. Kami menyimpannya dan kami melihat hasilnya di browser

Di browser kita melihat bahwa ketiga paragraf masih digabungkan menjadi satu. Karena kami belum memberikan tag P yang menginformasikan browser bahwa konten yang dimaksud akan diperlakukan sebagai satu paragraf. Misalnya kita memberi tag pembuka P di awal paragraf pertama, dan kita memberi tag penutup setelah paragraf. Dan biar lebih rapi kita beri konten dari tag P 1 lekukan lebih dalam dari tag P. Kami menyimpan dan melihat hasilnya di browser

Kita dapat melihat bahwa paragraf pertama telah dipisahkan dari paragraf lainnya. Namun alinea kedua dan ketiga masih menyatu. Kami menambahkan tag P lain ke paragraf kedua dan ketiga. Kita simpan kembali dan kita buka browser untuk melihat hasilnya. Sekarang konten kita berupa 3 paragraf

Selanjutnya, kami ingin memberikan garis pemisah antara judul dan paragraf pertama. Kita bisa melakukannya dengan menambahkan tag HR, kependekan dari Horizontal Rule. Kami membuka kode HTML kami lagi, dan kami menambahkan tag HR antara header ketiga dan paragraf pertama. Perhatikan bahwa elemen HR adalah elemen kosong, jadi kita tidak perlu membuat tag penutup

Kami menyimpan dan melihat hasilnya. Kita bisa melihat setelah judul ada garis yang memisahkannya dari paragraf pertama. Dulu kita bisa mengatur ukuran dari aturan horizontal ini dengan menggunakan atribut width dan size, namun sejak HTML versi lima sudah tidak disarankan lagi untuk menggunakan atribut ini. Mengikuti standar HTML 5, pengaturan aturan horizontal dapat dilakukan dengan menggunakan CSS. Nah nanti kita akan bahas lagi ketika kita sudah masuk ke pelajaran tentang CSS

Selanjutnya, kami akan memberikan efek tebal pada beberapa kata di paragraf pertama kami. Kita bisa melakukan ini dengan menggunakan tag Kuat. Kami kembali ke kode HTML kami. Lalu kita buat tag pembuka yang kuat sebelum kata kedua paragraf pertama, dan kita tutup setelah kata keempat. Kami melihat hasilnya di browser. Sudah terlihat menggunakan huruf tebal ya

Selain itu, kita juga bisa membuat efek huruf tebal dengan menggunakan tag B, singkatan dari Bold. Kami mencoba membuat efek tebal pada kata lain yang masih berada di paragraf pertama. Dan kami melihat hasilnya di browser

Di sini kita melihat bahwa tag Kuat dan tag B memberikan hasil yang sama. Namun untuk standar HTML 5, kita disarankan untuk menggunakan tag Strong, karena pada kode HTML 5 kita berbicara tentang struktur konten. Dengan memberi tag Kuat, kami memberi tahu Anda bahwa kami menekankan konten. Ini lebih bermakna, daripada kita hanya menyuruh browser menggunakan huruf tebal

Kami juga dapat menemukan hal yang sama untuk penggunaan huruf miring. Kita bisa menggunakan tag EM yang merupakan singkatan dari Emphasize, dimana kita memberi tahu browser bahwa konten yang dimaksud adalah khusus dan perlu ditampilkan berbeda dari konten lainnya, dalam hal ini menggunakan huruf miring. Sedangkan jika kita menggunakan tag i, kita hanya menyuruh browser untuk menggunakan italic atau miring

Kami mencoba menggunakan tag EM dan tag i dalam kode HTML kami di paragraf kedua. Kita simpan dan lihat hasilnya di browser. Kedua tag tersebut memberikan efek yang sama, yaitu menggunakan huruf miring

Dan untuk paragraf ketiga kami akan memberikan contoh penggunaan huruf tebal dan miring untuk konten yang sama. Setelah tag pembuka paragraf, kita tambahkan tag kuat dan tag em. Sedangkan di akhir paragraf kita tambahkan tag penutup em dan strong. Dan mari kita lihat lagi hasilnya di browser. Paragraf ketiga menggunakan cetak tebal dan miring pada konten yang sama

Hal terakhir yang kita bahas di video ini adalah tag BR yang merupakan singkatan dari Line Break. Saat kita melihat kembali kode HTML kita. Pada setiap paragraf, kita bisa melihat bahwa teks pada konten kita sudah terdiri dari beberapa baris. Dan di setiap baris baru, di bagian depan terdapat lekukan beberapa ruang. Namun jika melihat hasil yang ditampilkan oleh browser, semua teks dalam paragraf digabungkan menjadi satu baris. Nah, pertanyaannya, bagaimana jika kita perlu memisahkan konten dalam satu paragraf menjadi beberapa baris?

Mari kita coba pencarian Google tentang HTML BR. Dan kali ini kita melihat referensi dari MDN

Di situs Mozilla kita bisa melihat contoh penggunaan tag BR untuk sebuah paragraf yang berisi puisi, sehingga perlu dipisahkan menjadi banyak baris. Di sebelah kiri kita bisa melihat kode HTML. Di akhir setiap baris ditambahkan tag BR. Elemen BR ini juga merupakan elemen void, jadi kita tidak perlu membuat tag penutupnya. Di sisi kanan layar kita bisa melihat hasil dari kode HTML, dimana setiap BR akan menimbulkan konten setelah tag dituliskan pada baris berikutnya

Kami menyalin kode contoh dari Mozilla dan kami menempelkannya ke kode kami setelah paragraf ketiga. Kami sedikit merapikan indentasi. Kami menyimpan dan melihat hasilnya di browser. Kita akan mendapatkan tambahan paragraf keempat yang isinya sama persis dengan contoh keluaran dari situs Mozilla. Jadi jika kita ingin konten ditampilkan di baris berikutnya, maka kita bisa menambahkan tag BR di akhir baris