Apa fungsi tag html title?

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 Dasar HTML
Tag HTML Membuat Judul
Tag Formating
Tag Daftar/ List
HTML Itu Penting
Apa yang dimaksud dengan tag title?
Apa fungsi dari pada HTML?
Apa itu HTML dan fungsinya?

Daftar Isi

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 HTML

NoNama TagFungsi1 <! DOCTYPE html>Deklarasi untuk mendefinisikan dokumen menjadi HTML2 <html>Tag pembuka untuk membuat dokumen HTML3 <head>Informasi meta tentang dokumen4 <title>Membuat judul halaman yang nantinya akan ditampilkan di browser5 <body>Tempat dibuatnya semua konten website 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>

Preview :

Tampilan Tag Dasar

Tag HTML Membuat Judul

NoNama TagFungsi1 <h1> s/d <h6> Membuat judul atau heading2<hr>Memisahkan 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>

Preview :

Tampilan Tag Pos

Tag HTML untuk Membuat Paragraf

NoNama TagFungsi1 <p> Membuat paragraf2<br> Membuat garis baru3<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

NoNama TagFungsi1 style Atribut untuk elemen styling pada HTML2background-color Memberikan warna latar belakang3color Memberi warna pada teks4font-family Mengubah font pada teks5font-size Mengatur ukuran font6text-align Mengatura perataan 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>

Preview :

Tampilan elemen styling

Tag Formating

NoNama TagFungsi1<b> Membuat teks tebal2<strong> Membuat teks penting3<i> Membuat teks miring4<em> Membuat teks ditekankan5<mark> Membuat teks ditandai6<small> Membuat teks kecil7<del> Teks dihapus8<ins> Teks dimasukan9<sub> Teks subscript10<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

NoNama TagFungsi1<img>Elemen untuk mendefinisikan gambar2srcAtribut untuk menentukan URL gambar3altMendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan4width – heightMenentukan ukuran gambar5floatProperti untuk float image pada CSS6<map>Mendefinisikan gambar peta7<area>Mendefinisikan area atau daerah-daerah gambar pada peta8<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

NoNama TagFungsi1<form>Membuat formulir untuk mengumpulkan input pengguna2<input>Membuat tipe inputan pada form yang akan dibuat3<textare>Elemen untuk mendefinisikan field input4<label>Memberikan label pada elemen input5<fieldset>Mengelompokan elemen yang terdapat pada sebuah form6<select>Membuat input dengan pilihan yang berbentuk list drop down7<optgroup>Mengelompokan beberapa pilihan pada daftar pilihan input8<option>Mendefinisikan opsi yang bisa dipilih9<button>Membuat Button10<datalist>Membuat daftar pilihan untuk input data11<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

NoNama TagFungsi1<table>Membuat tabel pada web2<tr>Membuat baris pada tabel3<td>Membuat kolom pada tabel4<th>Membuat judul pada kolom. Contohnya nama, kelas, dan alamat.5<caption>Membuat judul tabel6borderMengatur garis tabel7border-collapseMengatur batas garis tabel8paddingMengatur padding pada cell9text-alignMengatur perataan pada konten tabel10border-spacingMengatur jarak spasi garis tabel11colspanMenggabungkan beberapa kolom. Kalau di office disebutnya Merge Cell12rowspanMenggabungkan beberapa baris13idMemberikan 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

NoNama TagFungsi1<ul>Untuk membuat tampilan daftar menggunakan simbol seperti bullet, cyrcle, dan lainnya.2<ol>Membuat daftar menggunakan nomor, huruf, romawi, dan lainnya3<li>Menentukan berbagai item yang ingin ditampilkan4<dl>Mendefinisikan daftar deskripsi5<dt>Mendefinisikan istilah deskripsi6<dd>Menggambarkan istilah dalam daftar deskripsi7<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

HTML Itu Penting

Menguasai HTML secara fundamental sangatlah penting jika kuasai ingin menjadi Front End Developer, Web Developer, ataupun Full Stack Developer. Karena HTML bisa disebut sebagai basic dari sebuah web yang harus benar-benar kamu kuasai.

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.

Apa yang dimaksud dengan tag title?

Meta title (disebut juga title tag) adalah elemen di bagian “head” dokumen HTML yang mendefinisikan judul setiap halaman situs web.

Apa fungsi dari pada HTML?

Fungsi utama dari HTML adalah untuk membuat halaman website. Sehingga Anda dapat berbagi informasi pada banyak orang melalui browser di internet.

Apa itu HTML dan fungsinya?

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. Fungsi HTML yang lebih spesifik yaitu : Membuat halaman web. Menampilkan berbagai informasi di dalam sebuah browser Internet.