HTML Cheatsheet

2 min readFeb 15, 2021

Basic structure

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

Basic tags

<html>
<head>
<body>

Didalam tag <head>

<title>
<style>
<script>

Heading text

<h1> Ukuran 1</h1>
<h2> Ukuran 2</h2>
<h3> Ukuran 3</h3>
<h4> Ukuran 4</h4>
<h5> Ukuran 5</h5>
<h6> Ukuran 6</h6>

Container & Section

<div> //blockline
<span> //inline ( satu baris )
<hr>
<br>

Paragraph

<p>Lorem ipsum dolor....</p>

Karakter

  digunakan untuk spasi

" digunakan untuk double quote (")

< digunakan untuk simbol (<)

> digunakam untuk simbol (>)

© digunakan untuk simbol copyright

™ digunakan untuk simbol trademark

Formatting

<b>Ini teks tebal</b>
<strong>Ini teks tebal</strong>
<i>Ini teks miring</i>
<em>Ini teks miring</em>
<u>Ini teks bergaris bawah</u>
<mark>Ini teks diblock warna kuning</mark>
<small>ini teks berukuran kecil</small>
<del>Ini teks digaris tengah</del>
<blockquote>Ini sebuah kutipan quote</blockquote>

Link

<a></a>

Images

<img>

List

<ul></ul>
<ol></ol>
<li></li>
<dt></dt>
<dd></dd>

Forms

<label>
<input>
<fieldset>
<button>
<select>
<optgroup>
<output>

Tables

<table>
<td>
<tr>
<th>
<caption>

Comment

<!--Ini adalah sebuah komen—->

HTML Atribut

img

src

<img src="image.jpg"> 
<img src="<http://site.com/gambar.jpg>">

width atau height

<img src="image.jpg" width="400" height="600">

alt

<img src="<https://site.com/gambar.jpg>" alt="Harimau">

link

href

<a href="<https://www.google.com>">Google</a>
<a href="/konten.php">Konten</a>

title
target
ref

style

<p style="color: red">Teks berwarna merah</p>

lang / bahasa

<html lang="en">

action

<form action="/halo.php">....</form>

id / class

<p id="contohid"> Dipanggil di CSS dengan tanda #<p>
<p class="contohclass"> Dipanggil di CSS dengan tanda .</p>

Tag baru di HTML5

Section

Mendeskripsikan konten dengan tepat

<section>
<nav>
<header>
<article>
<aside>
<footer>

Audio dan video pada HTML5

<audio>
<video>

Tag baru di section tag

<mark>
<time>
<data>
<main>
<output>
<figure>
<figcaption>
<meter>

Efek 2D/3D

<canvas> dapat dipadukan dengan javascript

Elemen / Atribut Baru di HTML5

<label> hanya digunakan di tag label berupa input, antara lain :

date
datetime-local
email
month
search
tel (gunakan dengan pattern number,contoh : pattern=[0-9]{12}. Berarti hanya diperbolehkan angka 0-9 dengan 12 digit)
time
url (gunakan http:// atau https://)
week