Panduan Tambahan – Elemen Dasar HTML

tagsBerikut ini panduan tambahan bagi yang ingin belajar HTML. Elemen-elemen yang terdapat didalam pemrograman HTML dapat disimak dibawah ini. Masing-masing elemen di kelompokkan berdasarkan fungsi untuk membantu anda mengingat lebih mudah. Meskipun paduan ini di khususkan bagi yang baru belajar koding, kami berharap ini juga berguna bagi siapa saja. – Developer Mozzilla tentang Elemen HTML

Elemen Dasar

Elemen dasar merupakan tulang punggung/dasar dari semua dokumen HTML, yang karenanya wajib harus ada dalam setiap penulisan kode HTML. Anda dapat menemukan elemen dasar ini disemua halaman web, setelah deklarasi doctype pada baris pertama halaman HTML. Doctype menjelaskan tentang versi apa yang digunakan pada halaman tersebut. Elemen yang disisipkan pada konten halaman ini ditempatkan antara pembuka <html> dan tag penutup  </html> . Elemen <html> juga dikenal sebagai Elemen Akar/Dasar (En:root element).

 metadata Dokumen

Metadata berisi informasi tentang halaman. Informasi ini termasuk juga informasi tentang style (gaya), Script (skrip) dan data untuk membantu perangkat lunak seperti mesin pencari dan browser (search engines, browsers, etc.) serta perangkat lunak lainnya menggunakan dan me-render halaman tersebut. Meta data untuk style dan script didefenisikan didalam halaman atau link ke berkas lainnya yang mengandung informasi tersebut.

Element Deskripsi
<base>
<head>
<link>
<meta>
<style>
<title>

Pembagian konten / Content sectioning

Elemen untuk pembagian kontent (en:Content sectioning elements) memungkinkan anda untuk mengatur konten-konten didalam dokumen menjadi potongan-potongan yang masuk akal. Gunakan pembagian elemen untuk membuat garis perwakilan / board outline untuk konten halaman anda, termasuk navigasi pada header dan footer, dan juga elemen heading untuk identifikasi bagian yang digunakan untuk konten tersebut.

Element Description
<address>
<article>
<aside>
<footer>
<header>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<hgroup>
<nav>
<section>

Text content

GUnakan elemen konten HTML text untuk mengatur blok dan bagian dari konten yang ditempat diantara tag pembuka <body> dan tag penutup </body>. Penting untuk akesesibilitas dan SEO, elemen-elemen ini mengidentifikasi tujuan dan struktur dari konten tersebut.

Element Description
<dd>
<div>
<dl>
<dt>
<figcaption>
<figure>
<hr>
<li>
<main>
<ol>
<p>
<pre>
<ul>

Baris Teks Semantik / Inline text semantics

Gunakan HTML inline text semantic untuk mendefinisikan arti, struktur atau style dari kata, garis ataupun teks arbitari (teks yang ditempatkan dimana saja sesuai keinginan tanpa memperhatikan elemen)

Elemen Deskrisi
<a>
<abbr>
<b>
<bdi>
<bdo>
<br>
<cite>
<code>
<data> Elemen HTML <data> merujuk pada konten yang ada dengan penjermahan yang dapat dibaca oleh mesin (machine-readable translation). Jika kontent tersebut ada waktu (time-) atau yang berhubungan dengan tanggal (date-related), elemen <time> harus digunakan.
<dfn>
<em>
<i>
<kbd>
<mark>
<q>
<rp>
<rt>
<rtc>
<ruby>
<s>
<samp>
<small>
<span>
<strong>
<sub>
<sup>
<time>
<u>
<var>
<wbr>

Image and multimedia

HTML mendukung banyak jenis sumber daya multimedia seperti gambar, audio, dan video.

Element Description
<area>
<audio>
<img>
<map>
<track>
<video>

Konten Sisipan / Embedded content

Sebagai tambahan untuk konten multimedia biasa, HTML dapat juga menambahkan beberapa jenis konten, walaupun jika konten tersebut tidak mudah untuk diinteraksikan dengan HTML.

Element Description
<embed>
<object>
<param>
<source>

Scripting

Untuk membuat konten dinamis dan aplikasi berbasis web, HTML mendukung penggunaan bahasa pemrograman (scripting languages), lebih kepada JavaScript. Beberapa elemen tertentu mendukung kemampuan ini.

Elemen Deskripsi
<canvas> Elemen HTML <canvas> dapat digunakan untuk menggambar grafis melalui scripting (biasanya JavaScript). Sebagai contoh, elemen ini dapat digunakan untuk menggambar grafik, membuat komposisi foto, bahkan dapat digunakan untuk menampilkan animasi. Anda mungkin (dan harus) menyediakan konten alternatif didalam blok  <canvas>  tersebut. Konten tersebut akan di-render baik itu pada browser yang lama yang tidak mendukung canvas dan pada browser dengan JavaScript di-disabled.
<noscript>
<script>

Batasan Pengeditan / Demarcating edits

Elemen-elemen ini memungkinkan anda untuk menyediakan indikasi yang menjelaskan bagian tertentu dari teks yang telah diubah.

Elemen Deskripsi
<del>
<ins>

Konten Tabel / Table content

Elemen-elemen ini digunakan untuk membuat dan mengelola tabulasi data.

Element Deskripsi
<caption>
<col>
<colgroup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<tr>

Formulir / Forms

HTML menyediakan beberapa elemen yang dapat digunakan bersama-sama untuk membuat formulir (forms) yang mana pengguna dapat mengisi dan mengirimkannya ke situs web atau aplikas. Silahkan melihat penjelasan lebih rinci tentang ini di HTML forms guide.

Elemen Deskripsi
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>

Elemen Interaktif / Interactive elements

HTML menawarkan beberapa seleksi elemen yang dapat membantu membuat obyek antar-muka pengguna yang dapat berinterkasi (interactive user interface objects).

Elemen Deskripsi
<details>
<dialog>
<menu>
<menuitem>
<summary>

Komponen Web / Web Components

Komponen Web / Web Components adalah teknologi yang berhubungan dengan HTML yang secara esensi memungkinkan untuk membuat dan menggunakan elemen kostum sebagaimana elemen tersebut seperti elemen HTML biasa. Tambahan, anda dapat membuat versi kostum dari elemen HTML Standar.

Element Deskripsi
<content>
<element>
<shadow>
<template>

Elemen Lampau dan Deprecated / Obsolete and deprecated elements

 Deprecated elemen adalah elemen yang sudah ditinggalkan dan tidak akan digunakan lagi.
Element Deskripsi
<acronym>
<applet>
<basefont>
<big>
<blink>
<center>
<command>
<content>
<dir>
<font>
<frame>
<frameset>
<isindex>
<keygen>
<listing>
<marquee>
<multicol>
<nextid>
<noembed>
<plaintext>
<spacer>
<strike>
<tt> Elemen HTML Teletype Text Element (<tt>) memproduksi elemen baris (inline element) yang ditampilkan pada browser dengan jenis font monotype. Elemen ini sebenarnya ditujukan untuk membuat gaya teks yang nantinya akan ditampilkan pada layar penampil yang tidak berubah (fixed display) seperti teletype. Namun biasanya untuk menampilkan  fixed width type, lebih menggunakan elemen <code>
<xmp>

Sampai disini dulu artikel kali ini, jika ada pertanyaan, saran atau koreksi pada artikel ini, silahkan tinggalkan komentar.

Salam, r4ndieL.

Note: Semua sumber disini disadur dari developer.mozilla.org bagian Elemen HTML, translasi dokumen ini dilakukan sendiri sehingga mohon dimaafkan jika ada kesalahan translasi.

r4ndiel

Leave a Reply

Your email address will not be published. Required fields are marked *