19 Tag HTML yang Biasa Digunakan untuk Diketahui bagi Pemula

Diterbitkan: 2022-12-08

Jika Anda ingin menjadi pengembang front-end, salah satu saran paling umum yang akan Anda dapatkan adalah mempelajari HTML. Hypertext Markup Language, disingkat HTML, adalah dasar dari sebagian besar halaman web.

HTML terbuat dari berbagai hal, seperti tag, atribut, dan elemen. Fokus kami akan menjadi tag HTML. Kami menggunakan tag HTML untuk memberi tahu browser cara menyusun konten menjadi judul, judul, paragraf, gambar, dan banyak lagi. Tag HTML dengan demikian seperti kata kunci yang menentukan bagaimana browser akan menampilkan atau memformat konten.

Server membaca tag HTML dari atas ke bawah. Tidak ada batasan jumlah tag HTML yang harus dimiliki halaman web.

Semua tag HTML diapit oleh <>
Setiap tag HTML melakukan fungsi yang berbeda
Sebagian besar tag HTML memiliki <tag> pembuka dan penutup </tag>

Tag HTML vs. Elemen HTML vs. Atribut HTML

Kebanyakan orang menggunakan istilah tag dan elemen HTML secara bergantian. Tapi apakah mereka sama? Secara teknis, elemen HTML dan tag HTML berbeda.

Tag HTML mendefinisikan elemen HTML. Untuk mencapai ini, konten dibungkus menggunakan nama tag pembuka dan penutup yang sesuai dengan konten tag yang sedang kami kerjakan.

Ini adalah contoh elemen HTML:

 <p> This is a paragraph </p>

<p> adalah contoh tag HTML

Atribut HTML memberikan informasi tambahan tentang elemen HTML dalam dokumen. Atribut ditemukan dalam elemen HTML.

Ini adalah contoh atribut HTML

 <button id=" SubmitOrder" class="btn">Order</button>

Tag HTML yang harus diketahui semua orang

HTML sebagai bahasa markup telah berkembang selama bertahun-tahun sejak Tim Berners-Lee memperkenalkannya pada tahun 1993. Versi HTML pertama memiliki 18 tag. Tag baru ditambahkan dengan setiap versi HTML; peningkatan terbaru adalah HTML5 pada tahun 2014.

Perbandingan dekat antara HTML dan HTML5 menunjukkan bahwa HTML5 memiliki tag semantik seperti <article>, <header>, dan <footer> yang mendeskripsikan konten dengan jelas. Kami sekarang memiliki lebih dari 100 tag HTML. Berikut ini adalah beberapa tag paling populer yang harus Anda ketahui:

<!DOCTYPE>

DOCTYPE secara teknis bukanlah sebuah tag tetapi sebuah deklarasi yang memberi tahu browser jenis file apa yang akan dimuat. Tag ini memberi tahu browser jenis HTML yang akan dimuat.

Di HTML5, Anda dapat mendeklarasikan file Anda sebagai

 <!DOCTYPE html>

Atau

 <!doctype html>

Catatan: Deklarasi tidak memiliki tag penutup dan tidak peka huruf besar-kecil.

<html> </html>

Tag <html> ….. </html> muncul setelah tag DOCTYPE. Tag ini mendefinisikan dokumen sebagai halaman web; setiap elemen lainnya akan bersarang di dalamnya. Tag HTML menentukan awal dan akhir dokumen HTML.

Tag <html> direpresentasikan sebagai;

 <html>Content</html>

<kepala></kepala>

Bagian kepala dari dokumen HTML diwakili oleh tag <head>. Tag ini terlampir di dalam tag <html> dan memberikan informasi umum tentang halaman web.

Tag <head> berisi tag lain yang memberikan spesifikasi halaman web, seperti judul dan pembuat halaman. Isi tag ini tidak ditampilkan di halaman web

Ini adalah sintaks dari tag <head>;

 <head> …….. </head>

<judul></judul>

Tag <title> menyatakan judul halaman web. Tag ini diapit oleh tag <head>. Tag <title> akan muncul di bilah judul atau tab di jendela browser tetapi tidak di halaman web yang sebenarnya.

Sintaks untuk tag <title> adalah;

 <title>HTML Tags for Beginners</title>

Saat berada di dalam tag <head>, akan muncul seperti;

 <head> <title>HTML Tags for Beginners</title> </head>

<tubuh> </tubuh>

Tag <body> menampilkan semua konten yang terlihat di halaman web. Gambar, tautan, teks biasa, video, dan lainnya dapat ditemukan di dalam tag <body> dan </body>.

Beberapa tag lain yang akan Anda temukan di dalam body termasuk tag <p> untuk paragraf, tag <a> untuk gambar, tag <strong> untuk teks tebal, dan tag <ol> untuk daftar yang diurutkan, dan masih banyak lagi.

Sintaks untuk tag <body> adalah;

 <body> Content </body>

Tag <h1> hingga <h6>

Bisa ada hingga 6 tag judul dalam dokumen HTML. Setiap tag diwakili oleh angka mulai dari 1 hingga 6 sebagai <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>.

H1 adalah tag heading terbesar, sedangkan H6 adalah yang terkecil.

Dalam dokumen HTML, tag judul dapat direpresentasikan sebagai berikut:

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

Tag <h1> hingga <h6> diapit di dalam tag <body>.

Misalnya, tag ,<H1> akan diapit sebagai;

 <body> <h1> This is heading 1 >/h1> </body>

<p> </p>

<p> </p> atau hanya tag paragraf digunakan saat Anda ingin menyusun konten menjadi sebuah paragraf. Menekan tombol 'enter' dalam dokumen HTML di editor kode Anda tidak akan membuat paragraf baru.

Jika Anda menginginkan lebih dari satu paragraf, Anda harus menggunakan beberapa tag <p> </p> pada dokumen Anda. Tag paragraf harus diapit di dalam tag <body >.

Sintaks untuk tag paragraf adalah;

 <p> ….some content here….</p>

Jika Anda ingin memiliki empat paragraf, kode Anda akan disusun sebagai;

 <body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body>

<b> </b>

Tag <b> </b> atau cukup cetak tebal akan memformat konten apa pun antara <b> pembuka dan penutup </b> sebagai huruf tebal.

Tag tebal bisa berada di antara judul seperti H1 atau bahkan di dalam tag paragraf.

Ini adalah contoh dari tag tebal;

 <b> Bold Tag </b>

Ungkapan 'Bold Tag' akan tampil tebal.

 <h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>

Edisi kelima akan dicetak tebal.

<i> </i>

Tag miring, dilambangkan dengan <i>, mencetak miring teks di dalam tag.

Misalnya, jika kita punya

 <i> These are italics </i>

Kata-kata ' ini adalah huruf miring ' akan dicetak miring.

<u> </u>

Tag garis bawah, atau <u>, digunakan saat Anda ingin menggarisbawahi bagian teks tertentu dalam dokumen HTML.

Misalnya, jika kita memiliki;

 <u> underline these words </u>

Frasa di antara tag akan digarisbawahi.

<pusat> </pusat>

Tag Center, <center>, digunakan untuk memusatkan konten pada dokumen HTML.

Misalnya, jika kita memiliki tag h2 yang ditulis sebagai <h2> Centering Content in HTML </h2> , kita dapat memusatkannya sebagai berikut;

 <center> <h2> Centering Content in HTML </h2> </center>

<span></span>

Tag span, <span>, adalah wadah inline generik yang tidak disertakan dengan gaya default. Anda dapat menggunakan tag span untuk mengelompokkan teks yang ingin Anda beri gaya.

Anda dapat span tag di dalam tag lain seperti judul dan paragraf;

 <h2> Learn HTML <span> from experts </span> and be ready for the market </h2>

 <p> Learn HTML <span> from experts </span> and be ready for the market </p>

<div></div>

Tag divisi, disingkat sebagai div, adalah tag yang memungkinkan Anda mengelompokkan berbagai tag dalam dokumen HTML.

Tag div dapat diberi 'kelas' untuk menambahkan gaya eksternal menggunakan CSS.

Ini adalah bagaimana div yang menyertakan tag h1, h2, dan paragraf akan direpresentasikan.

 <div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div>

<em></em>

Penekanan, atau tag <em>, digunakan untuk menekankan kata-kata tertentu dalam dokumen HTML.

Konten di antara tag <em> akan tampak miring atau miring.

Konten yang ditekankan dalam sebuah paragraf dapat muncul di editor kode akan muncul sebagai;

 <p> The meeting will start at <em> 0800 hrs </em>, please keep time </p>

<sup></sup>

Tag <sup> atau superskrip memungkinkan teks terlampir berada di atas yang lainnya. Contoh sempurna adalah ketika Anda ingin mengkuadratkan angka X dan menyatakannya secara matematis untuk memberi Anda X ²

Sintaks untuk <sup> dalam tag paragraf adalah;

 <H1> Harveys <sup>TM </sup> Company Limited </H1>

<sub></sub>

Tag subskrip atau <sub> adalah kebalikan dari tag superskrip. Konten yang terlampir dalam tag <sub> akan muncul di bawah baris teks biasa. Contoh sempurna adalah ketika menulis rumus kimia air sebagai H ₂ 0.

Sintaks untuk tag subskrip adalah;

 Remember that H <sub> 2 </sub> 0 is the chemical formula for water

<br>

<br> adalah tag penutup sendiri yang merupakan singkatan dari break. Semua konten setelah <br> akan dimulai pada baris baru.

Sintaks untuk <br> dalam sebuah paragraf adalah;

 <p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p>

<ol></ol> dan <li> </li>

Tag list terurut atau <ol> harus digunakan dengan tag lain seperti <li>.

Keduanya dapat muncul di editor kode sebagai;

 <ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>

Saat dirender di browser, konten akan muncul bernomor.

<img src=””/>

Anda mungkin ingin menambahkan gambar untuk daya tarik visual atau bahkan logo. Tag gambar penutup sendiri, <img src=””/>, sangat berguna dalam kasus seperti itu.

Sintaks untuk tag gambar adalah;

 <img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>

Konten yang terlampir dalam tanda kutip mewakili URL sumber.

Membungkus

Ada lebih dari 100 tag HTML, tetapi yang di atas adalah yang harus Anda ketahui sebagai pemula. HTML didukung di sebagian besar editor kode, dan dengan demikian Anda yakin bahwa Anda tidak akan pernah salah saat mulai belajar.