9 Contoh Tag HTML Lengkap dan Fungsinya - Techo
Skip to content Skip to sidebar Skip to footer
Home / HTML

9 Contoh Tag HTML Lengkap dan Fungsinya


Contoh Tag HTML Lengkap dan Fungsinya Hypertext Markup Language atau biasa disingkat HTML adalah bahasa markup yang digunakan oleh programmer untuk membantu membuat tampilan halaman web. HTML adalah standar universal dimana halaman web dapat dibuat dan dibuka menggunakan mesin pencari seperti Google atau Bing.

Untuk memudahkan dalam mendesain web menggunakan HTML, kita harus bisa menggunakan tag HTML dengan baik. Berikut kami rangkum beberapa tag html lengkap dan fungsinya yang bisa Anda pelajari dan praktikkan sendiri.

Pembahasan kali ini hampir sama dengan sebelumnya tentang Pengenalan Dasar HTML dan Contohnya. Disni kami akan membahas dan memberikan contoh tag html lengkap dengan fungsinya. Selain itu, Anda dapat Belajar Dasar Kamus HTML Lengkap dan Belajar HTML Karakter dan Simbol Lengkap di posting sebelumnya. 

Untuk itu simak ulasannya dibawah ini sampai selesai agar kalian paham dengan kode html lengkap yang akan kami bahas pada posting kali ini. Berikut adalah 9 Tag HTML beserta fungsi dan contohnya.


9 Tag HTML Beserta Fungsi dan Contohnya


Terkadang teori yang berkepanjangan bisa membuat belajar menjadi membosankan. Oke, tanpa basa-basi lagi, berikut adalah beberapa tag HTML dasar yang sering digunakan programmer untuk mendesain halaman website. Untuk itu simak terus ulasan berikut ini tentang beberapa Tag HTML beserta fungsi dan contohnya.

1. Tag Dasar


Tag Name Function
<! DOCTYPE html> Deklarasi untuk mendefinisikan dokumen menjadi HTML
<html> Tag pembuka untuk membuat dokumen HTML
<head> Meta informasi tentang dokumen
<title> Buat judul halaman yang nantinya akan ditampilkan di browser
<body> Di mana semua konten situs web dibuat menggunakan HTML

Contoh penggunaan :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Hasil Tampilan :

Tag Dasar HTML

Baca juga : Cara Merubah Warna Teks dan Jenis Font

2. Tag Judul


Tag Name Function
<h1> s/d <h6> Dugunakan untuk membuat judul atau heading
<hr> Membagi konten (biasanya ditampilkan garis pembatas)

Contoh Penggunaan : 

<!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>
view raw index.html hosted with ❤ by GitHub

Hasil Tampilan :

Tag Judul HTML

Baca juga : Cara menggabungkan html dan css menjadi satu file 

3. Tag Paragraf


Tag Name Function
<p> Membuat paragraf
<br> Buat baris baru
<pre> Memformat teks atau kalimat

Contoh Penggunaan :

<!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>
view raw index.html hosted with ❤ by GitHub

Hasil Tampilan :

Tag Paragraf HTML

Baca juga : Cara Membuat Web dan Hosting Gratis di Github

4. Tag Style


Tag Name Function
style Atribut untuk elemen penataan dalam HTML
background-color Memberi warna latar belakang
color Memberi warna pada teks
font-family Mengubah font pada teks
font-size Mengatur ukuran font
text-align Mengatur perataan pada teks

Contoh Penggunaan :

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Hasil Tampilan : 

Tag Style HTML

Baca juga : Cara Membuat Slideshow Otomatis dengan HTML dan CSS

5. Tag Formating


Tag Name Function
<b> Membuat teks tebal
<strong> Membuat teks penting
<i> Membuat teks miring
<em> Membuat teks ditekankan
<mark> Membuat teks ditandai
<small> Membuat teks kecil
<del> Text deleted
<ins> Text entered
<sub> Subscript text
<sup> Superscript text
Contoh Penggunaan :

<!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>
view raw index.html hosted with ❤ by GitHub

Hasil Tampilan :

Tag Formating HTML

Baca juga : Program JavaScript untuk Menghitung Jumlah Huruf Kapital dalam Kalimat

6. Tag Gambar 


Tag Name Function
<img> Elemen untuk menentukan gambar
src Atribut untuk menentukan URL gambar
alt Mendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan
width-height Menentukan ukuran gambar
float Properti untuk gambar mengambang di CSS
<map> Mendefinisikan gambar peta
<area> Mendefinisikan area atau daerah-daerah gambar pada peta
<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="cara-membuat-codepen-di-postingan-blogger.jpg" alt="how to make codepen in blogger post" width="300" height="300">
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Hasil Tampilan : 

Tag Gambar HTML

Baca juga : Cara Menghubungkan Hasil Form HTML dengan JavaScript

7. Tag Form


Tag Name Function
<form> Membuat formulir untuk mengumpulkan input pengguna
<input> Membuat tipe input pada formulir yang akan dibuat
<textare> Elemen untuk menentukan bidang input
<label> Menetapkan label ke elemen input
<fieldset> Mengelompokan elemen yang terdapat pada sebuah form
<select> Membuat masukan dengan opsi berupa drop down list
<optgroup> Mengelompokkan beberapa opsi dalam daftar pilihan input
<option> Mendefinisikan opsi yang dapat dipilih
<button> Membuat Button (Tombol)
<datalist> Membuat daftar opsi untuk input data
<output> Menampilkan hasil 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>
view raw index.html hosted with ❤ by GitHub

Hasil Tampilan : 

Tag Form HTML

Baca juga : Tools Parse HTML Kompres Kode Paste

8. Tag Tabel


Tag Name Function
<table> Membuat tabel pada web
<tr> Membuat baris pada tabel
<td> Membuat kolom pada tabel
<th> Membuat judul kolom. Misalnya nama, kelas, dan alamat
<caption> Membuat judul tabel
border Mengatur garis tebal
border-collapse Mengatur batas garis tebal
padding Mengatur padding pada cell
text-align Mengatur perataan pada konten tabel
border-spacing Mengatur jarak spasi garis tebal
colspan Menggabungkan beberapa kolom. Kalau di office yang disebut Merge Cell
rowspan Menggabungkan beberapa baris
id Memberi 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>
view raw index.html hosted with ❤ by GitHub

Hasil Tampilan : 

Tag Tabel HTML

Baca juga : Tools CSS Minifier Kompres Kode CSS 

9. Tag Daftar/List


Tag Name Function
<ul> Untuk membuat tampilan daftar menggunakan simbol seperti poin, siklus, dan lainnya
<ol> Membuat daftar menggunakan nomor, huruf, romawi, dan lainnya
<li> Menentukan berbagai item untuk ditampilkan
<dl> Mendefinisikan daftar deskripsi
<dt> Mendefinisikan istilah deskripsi
<dd> Menggambarkan istilah dalam daftar deskripsi
<type> Menentukan jenis penomoran

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>
view raw index.html hosted with ❤ by GitHub

Hasil Tampilan : 

Tag Daftar List HTML

Baca juga : Tools Word Counter Penghitung Kata

Kesimpulan 


Dengan mempelajari tag html lengkap dan fungsinya dapat memberikan Anda keterampilan dan pengetahuan umum tentang memahami bahasa markup yang bertujuan untuk membangun aplikasi berbasis web. Itulah beberapa Tag HTML Dasar yang biasa digunakan saat mendesain atau membuat website dan Anda bisa mempelajarinya lebih lanjut.

Demikian posting kali tentang 9 Contoh Tag HTML Lengkap dan Fungsinya. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!

You may like these posts :