Tag HTML dan Contoh Penggunaannya
Sponsored Post
65 Tag HTML beserta Fungsi dan Contoh Penggunaannya
Tanpa panjang lebar langsung saja inilah beberapa tag HTML dasar yang sering diaplikasikan untuk mendesain website beserta fungsi dan contoh penggunaannya supaya kamu mudah memahaminya.
Tag Dasar HTML yang Termasuk ke dalam Fundamental
| No | Nama Tag | Fungsi |
| 1 | <! DOCTYPE html> | Deklarasi untuk mendefinisikan dokumen menjadi HTML |
| 2 | <html> | Tag pembuka untuk membuat dokumen HTML |
| 3 | <head> | Informasi meta tentang dokumen |
| 4 | <title> | Membuat judul halaman yang nantinya akan ditampilkan di browser |
| 5 | <body> | Tempat dibuatnya semua konten website menggunakan HTML |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Preview dari kode di atas:
Tag HTML Membuat Judul
| No | Nama Tag | Fungsi |
| 1 | <h1> s/d <h6> | Membuat judul atau heading |
| 2 | <hr> | Memisahkan konten (biasanya ditampilkan garis pembatas) |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> </body> </html>
Preview dari kode di atas:
Tag HTML untuk Membuat Paragraf
| No | Nama Tag | Fungsi |
| 1 | <p> | Membuat paragraf |
| 2 | <br> | Membuat garis baru |
| 3 | <pre> | Memfortmat teks atau kalimat |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <body> <p>In HTML, spaces and new lines are ignored:</p> <br> example <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> </body> </html>
Preview dari kode di atas:
Tag Style
| No | Nama Tag | Fungsi |
| 1 | style | Atribut untuk elemen styling pada HTML |
| 2 | background-color | Memberikan warna latar belakang |
| 3 | color | Memberi warna pada teks |
| 4 | font-family | Mengubah font pada teks |
| 5 | font-size | Mengatur ukuran font |
| 6 | text-align | Mengatura perataan teks |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> </body> </html>
Preview dari kode di atas:
Tag Formating
| No | Nama Tag | Fungsi |
| 1 | <b> | Membuat teks tebal |
| 2 | <strong> | Membuat teks penting |
| 3 | <i> | Membuat teks miring |
| 4 | <em> | Membuat teks ditekankan |
| 5 | <mark> | Membuat teks ditandai |
| 6 | <small> | Membuat teks kecil |
| 7 | <del> | Teks dihapus |
| 8 | <ins> | Teks dimasukan |
| 9 | <sub> | Teks subscript |
| 10 | <sup> | Teks superscript |
Contoh penggunaannya yaitu sebagai berikut :
<!DOCTYPE html> <html> <body> <p><b>This text is bold</b></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>
Preview dari kode di atas:
Tag Gambar
| No | Nama Tag | Fungsi |
| 1 | <img> | Elemen untuk mendefinisikan gambar |
| 2 | src | Atribut untuk menentukan URL gambar |
| 3 | alt | Mendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan |
| 4 | width – height | Menentukan ukuran gambar |
| 5 | float | Properti untuk float image pada CSS |
| 6 | <map> | Mendefinisikan gambar peta |
| 7 | <area> | Mendefinisikan area atau daerah-daerah gambar pada peta |
| 8 | <picture> | Menampilkan gambar yang berbeda untuk perangkat yang berbeda |
Contoh penggunaan :
<!DOCTYPE html> <html> <body> <h2>Alternative text</h2> <p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p> <img src="img_chania.jpg" alt="Flowers in Chania" width="300" height="300"> </body> </html>
Preview dari kode di atas:
Tag Form
| No | Nama Tag | Fungsi |
| 1 | <form> | Membuat formulir untuk mengumpulkan input pengguna |
| 2 | <input> | Membuat tipe inputan pada form yang akan dibuat |
| 3 | <textare> | Elemen untuk mendefinisikan field input |
| 4 | <label> | Memberikan label pada elemen input |
| 5 | <fieldset> | Mengelompokan elemen yang terdapat pada sebuah form |
| 6 | <select> | Membuat input dengan pilihan yang berbentuk list drop down |
| 7 | <optgroup> | Mengelompokan beberapa pilihan pada daftar pilihan input |
| 8 | <option> | Mendefinisikan opsi yang bisa dipilih |
| 9 | <button> | Membuat Button |
| 10 | <datalist> | Membuat daftar pilihan untuk input data |
| 11 | <output> | Menampilkan hasil dari hitungan |
Contoh penggunaan :
<!DOCTYPE html> <html> <body> <h2>The datalist Element</h2> <p>The datalist element specifies a list of pre-defined options for an input element.</p> <form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p> </body> </html>
Preview dari kode di atas:
Tag Tabel
| No | Nama Tag | Fungsi |
| 1 | <table> | Membuat tabel pada web |
| 2 | <tr> | Membuat baris pada tabel |
| 3 | <td> | Membuat kolom pada tabel |
| 4 | <th> | Membuat judul pada kolom. Contohnya nama, kelas, dan alamat. |
| 5 | <caption> | Membuat judul tabel |
| 6 | border | Mengatur garis tabel |
| 7 | border-collapse | Mengatur batas garis tabel |
| 8 | padding | Mengatur padding pada cell |
| 9 | text-align | Mengatur perataan pada konten tabel |
| 10 | border-spacing | Mengatur jarak spasi garis tabel |
| 11 | colspan | Menggabungkan beberapa kolom. Kalau di office disebutnya Merge Cell |
| 12 | rowspan | Menggabungkan beberapa baris |
| 13 | id | Memberikan id pada tabel atau kolom |
Contoh penggunaan :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
Preview :
Tag Daftar/ List
| No | Nama Tag | Fungsi |
| 1 | <ul> | Untuk membuat tampilan daftar menggunakan simbol seperti bullet, cyrcle, dan lainnya. |
| 2 | <ol> | Membuat daftar menggunakan nomor, huruf, romawi, dan lainnya |
| 3 | <li> | Menentukan berbagai item yang ingin ditampilkan |
| 4 | <dl> | Mendefinisikan daftar deskripsi |
| 5 | <dt> | Mendefinisikan istilah deskripsi |
| 6 | <dd> | Menggambarkan istilah dalam daftar deskripsi |
| 7 | <type> | Menentukan jenis penomoran |
Contoh penggunaan :
<!DOCTYPE html> <html> <body> <h2>Ordered List with Lowercase Roman Numbers</h2> <ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
Preview :
Kenapa HTML Itu Penting?
Menguasai HTML secara fundamental sangatlah penting jika Anda ingin menjadi:
- Front End Developer: Sebagai seorang Front End Developer, Anda bertanggung jawab untuk merancang dan mengembangkan tampilan dan antarmuka pengguna pada sebuah situs web. HTML adalah bahasa dasar yang digunakan untuk membuat struktur dasar dari halaman web, termasuk teks, gambar, tautan, dan elemen-elemen lainnya. Memahami HTML dengan baik adalah kunci untuk menciptakan pengalaman pengguna yang baik.
- Web Developer: Sebagai seorang Web Developer, Anda perlu menguasai HTML untuk membangun seluruh situs web. Ini mencakup merancang halaman-halaman web, mengorganisasi konten, dan memastikan bahwa semua elemen bekerja dengan baik. HTML adalah fondasi dari semua situs web, dan pengetahuan yang kuat tentang bahasa ini akan membantu Anda menjadi seorang pengembang web yang kompeten.
- Full Stack Developer: Sebagai seorang Full Stack Developer, Anda bertanggung jawab atas pengembangan baik di sisi depan (Front End) maupun di sisi belakang (Back End) situs web. Meskipun pekerjaan Back End Developer lebih fokus pada server, basis data, dan logika bisnis, pemahaman HTML masih penting. Ini karena Anda perlu berinteraksi dengan Front End dalam beberapa kasus dan memahami cara data ditampilkan di halaman web.
Karena HTML bisa disebut sebagai dasar dari sebuah situs web, sangat penting untuk benar-benar menguasainya. Dengan pemahaman yang kuat tentang HTML, Anda dapat membangun halaman web yang responsif, mudah diakses, dan sesuai dengan standar industri, yang akan membantu Anda menjadi seorang pengembang yang sukses di bidang Front End, Web Development, atau Full Stack Development.
Selain HTML Apalagi yang Harus Dikuasai?
Selain HTML, ada beberapa teknologi dan bahasa pemrograman lain yang sangat penting untuk dipelajari jika Anda ingin menjadi seorang pengembang web yang sukses. Berikut adalah beberapa di antaranya:
- CSS (Cascading Style Sheets): CSS digunakan untuk mengatur tampilan dan tata letak halaman web. Dengan CSS, Anda dapat mengendalikan warna, font, margin, padding, dan aspek visual lainnya dari elemen-elemen HTML. Ini adalah keterampilan kunci untuk Front End Development.
- JavaScript: JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaktivitas ke halaman web. Dengan JavaScript, Anda dapat membuat efek animasi, validasi formulir, dan bahkan membangun aplikasi web yang lebih kompleks. Ini adalah salah satu aspek utama dari Front End Development.
- Back End Programming Languages: Jika Anda ingin menjadi Full Stack Developer, Anda perlu memahami bahasa pemrograman Back End seperti Python, Ruby, PHP, Node.js, atau Java. Bahasa ini digunakan untuk mengembangkan logika server, mengelola basis data, dan mengatur komunikasi dengan Front End.
- Basis Data: Pengetahuan tentang basis data sangat penting. Anda perlu memahami cara merancang dan mengelola basis data untuk menyimpan dan mengakses informasi di situs web Anda. Beberapa contoh teknologi basis data yang umum digunakan adalah MySQL, PostgreSQL, MongoDB, dan SQLite.
- Framework dan Library: Banyak pengembang web menggunakan framework dan library untuk mempercepat pengembangan. Contohnya, untuk Front End, Anda bisa mempelajari React, Angular, atau Vue.js. Di sisi Back End, ada banyak framework seperti Express.js (Node.js), Ruby on Rails, Django (Python), dan Laravel (PHP).
- HTTP/HTTPS dan Protokol Web: Memahami cara web berfungsi dan bagaimana HTTP/HTTPS berinteraksi dengan situs web adalah penting. Anda perlu tahu tentang metode HTTP, status kode, dan aspek keamanan di web.
- Version Control (Contohnya, Git): Pengetahuan tentang sistem kontrol versi seperti Git sangat berguna. Ini memungkinkan Anda untuk mengelola kode Anda, berkolaborasi dengan tim, dan mengikuti perubahan.
- Keamanan Web: Memahami praktik keamanan web seperti perlindungan terhadap serangan XSS, SQL injection, dan praktik keamanan lainnya sangat penting untuk menjaga situs web Anda aman.
- Server dan Hosting: Anda perlu memahami cara meng-host situs web Anda, konfigurasi server, manajemen DNS, dan aspek hosting lainnya.
- Pemahaman tentang Peramban Web: Memahami cara berbagai peramban web berperilaku dan bagaimana memastikan situs Anda kompatibel dengan berbagai peramban adalah keterampilan yang berguna.
- Prinsip Desain Responsif: Memahami cara merancang situs web yang responsif untuk berbagai perangkat dan layar adalah penting dalam dunia web yang semakin beragam.
- Pengoptimalan Kinerja dan SEO: Belajar cara mengoptimalkan situs web Anda untuk kinerja yang baik dan praktik SEO akan membantu situs Anda mendapatkan lalu lintas dan berkinerja baik di mesin pencari.
Penutup
Itulah beberapa Tag HTML Dasar yang umum sekali digunakan pada saat mendesain atau membuat website dan bisa kamu pelajari lebih dalam lagi. Semoga bermanfaat dan jangan lupa tekan tombol sharenya.
Sumber gambar utama : https://programacion.net/
https://badoystudio.com/tag-html/
Traktir creator minum kopi dengan cara memberi sedikit donasi. Silahkan Pilih Metode Pembayaran
- Bank BNI - An.warkasa / Rek - 0223432494
