Tuliskan contoh format penulisan tag html

Supaya lebih mudah saat mendesain web menggunakan HTML maka kita harus bisa menggunakan tag – tag HTML dengan baik. Berikut ini kami telah rangkumkan beberapa tag HTML yang bisa kamu pelajari dan langsung dipraktekan sendiri.

Table of Contents Show

65 Tag HTML beserta Fungsi dan Contohnya
Tag Formating
Tag Daftar/ List
Related posts:
Bagaimana cara penulisan tag HTML yang benar?
Bagaimana penulisan tag penutup dari title?

65 Tag HTML beserta Fungsi dan Contohnya
- Tag Dasar
- Tag Judul
- Tag Style
- Tag Formating
- Tag Gambar
- Tag Form
- Tag Tabel
- Tag Daftar/ List
Penutup
- Related posts:

65 Tag HTML beserta Fungsi dan Contohnya

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

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 penggunaan :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h2>My First Heading</h2>
<p>My first paragraph.</p>

</body>
</html>

Preview :

Tampilan Tag Dasar

Tag Judul

No	Nama Tag	Fungsi
1	<h2> s/d <h6>	Membuat judul atau heading
2	<hr>	Memisahkan konten (biasanya ditampilkan garis pembatas)

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2>This is heading 1</h2>
<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 :

Tampilan Tag Pos

Tag Paragraf

No	Nama Tag	Fungsi
1	<p>	Membuat paragraf
2	<br>	Membuat garis baru
3	<pre>	Memfortmat 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>

Preview :

Tampilan Tag Paragraf

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 penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2 style="text-align:center;">Centered Heading</h2>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>

Preview :

Tampilan elemen styling

Baca juga :

15 Menit Memahami ” Apa itu HTML ” Secara Mendalam
Pengertian, Sejarah HTML Serta Perkembangan Versi HTML
Memahami Fungsi HTML dalam 10 Menit

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 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>

Preview :

Tampilan tag formating

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 :

Tampilan Tag Gambar

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 :

Tampilan Tag Form

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 :

Tampilan Tag Tabel

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 :

Tampilan Tag List/ Daftar

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.

Bagaimana cara penulisan tag HTML yang benar?

Berikut ini beberapa saran yang perlu diikuti agar bisa menulis tag dengan benar:.

Tag-tag wajib. Ada beberapa tag yang wajib ada di HTML. ... .

2. Gunakan Huruf Kecil. Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf kecil saja. ... .

Pastikan Menutup Tag dengan Benar..

Bagaimana penulisan tag penutup dari title?

Harus ..!, Contoh: tag <title> harus ditutup dengan </title>, tag <p> harus ditutup dengan </p>. Untuk pembuatan tag Tanpa Isi, tag tetap harus ditutup.