initial commit

2 files changed, 519 insertions, 0 deletions

diff --git a/files/id/web/guide/html/forms/index.html b/files/id/web/guide/html/forms/index.html
new file mode 100644
index 0000000000..9daf1d6077
--- /dev/null
+++ b/files/id/web/guide/html/forms/index.html
@@ -0,0 +1,340 @@
+---
+title: HTML forms guide
+slug: Web/Guide/HTML/Forms
+translation_of: Learn/Forms
+---
+<p><span class="seoSummary">Panduan ini adalah seri dari artikel-artikel yang akan membantu anda menguasai form HTML.</span> Form HTML adalah tool yang paling poweful untuk berinteraksi dengan para pengguna; namun, karena beberapa alasan sejarah dan teknis, tidak jelas bagaimana cara menggunakannya hingga pontensi penuhnya. Dalam panduan ini, kita akan membahas seluruh aspek dari form HTML, struktur form untuk pemberian style, mulai dari penanganan data sampai widget buatan. Anda akan mempelajari bagaimana menikmati kekuatan yang mereka miliki!</p>
+<h2 id="Articles">Articles</h2>
+<ol>
+  <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Form HTML pertama saya</a></li>
+  <li><span><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">Cara membuat struktur form HTML</a></span></li>
+  <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Form Widget native</span></a></li>
+  <li>CSS dengan form HTML
+    <ol>
+      <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Pemberian style form HTML</span></a></li>
+      <li><a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Pemberian style form HTML Lanjut</a></li>
+      <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabel kompatibilitas property widget form</a></li>
+    </ol>
+  </li>
+  <li><span><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Mengirim dan menerima data form</a></span></li>
+  <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validasi data form</a></li>
+  <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Bagaimana cara membuat gidget form buatan</a></li>
+  <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Mengirimkan form melalui JavaScript </a>
+    <ol>
+      <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Menggunakan object FormData</a></li>
+    </ol>
+  </li>
+  <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+</ol>
+<h2 id="Dokumentasi_HTML">Dokumentasi HTML</h2>
+<h3 id="Elemen-elemen_HTML">Elemen-elemen HTML</h3>
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Element</th>
+      <th scope="col">Related DOM interface</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("button")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>button</code> menampilkan tombol yang dapat diklik.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
+      <td style="vertical-align: top;">Elemen <span style="font-family: Courier New;">datalist</span> menampung kumpulan dari elemen {{ HTMLElement("option") }} yang merepresentasikan pilihan-pilihan yang mungkin untuk nilai dari elemen form lainnya.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td>
+      <td style="vertical-align: top;"><span style="font-family: Courier New;">fieldset</span> digunakan untuk menggabungkan beberapa elemen form dalam sebuah form.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("form")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>form</code> merepresentasikan bagian dari dokumen yang memiliki elemen interaktif yang memungkinkan pengguna mengirimkan informasi ke web server.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("input")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>input</code> digunakan untuk membuat kontrol interaktif untuk form.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>keygen</code> memfasilitasi pembuatan key secara otomatis dan pengiriman public ke sebagai bagian dari form HTML.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("label")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>label</code> merepresentasikan judul dari sebuah item dalam antar muka user</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>legend</code> merepresentasikan judul utama dari konten parentnya {{ HTMLElement("fieldset") }}.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("meter")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>meter</code> merepresentasikan nilai skalar dalam jangkauan yang diketahui atau nilai fraksi.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>optgroup </code>membuat grup dari pilihan-pilihan dalam sebuah elemen {{ HTMLElement("select") }}.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("option")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
+      <td style="vertical-align: top;">Elemen HTML<em> </em><code>option<em> </em></code>digunakan untuk membuat kontrol yang merepresentasikan item yang terdapat dalam sebuah elemen {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} atau {{ HTMLElement("datalist") }}.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("output")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td>
+      <td style="vertical-align: top;">Element <code>output</code> merepresentasikan hasil dari sebuah kalkulasi.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
+      <td style="vertical-align: top;">Element <code>progress</code> digunakan untuk menampilkan progress dari sebuah tugas.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("select")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>select</code> merepresentasikan kontrol yang menyajikan pilihan-pilihan menu.</td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
+      <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
+      <td style="vertical-align: top;">Elemen <code>textarea</code> merepresentasikan sebuah kontrol edit dengan multi baris.</td>
+    </tr>
+  </tbody>
+</table>
+<div class="note">
+  <p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p>
+</div>
+<h3 id="HTML_Attributes">HTML Attributes</h3>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th>Attribute Name</th>
+      <th>Elements</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>accept</td>
+      <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+      <td>List of types the server accepts, typically a file type.</td>
+    </tr>
+    <tr>
+      <td style="white-space: nowrap;">accept-charset</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>List of supported charsets.</td>
+    </tr>
+    <tr>
+      <td>action</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>The URI of a program that processes the information submitted via the form.</td>
+    </tr>
+    <tr>
+      <td>autocomplete</td>
+      <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+      <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td>
+    </tr>
+    <tr>
+      <td>autofocus</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>The element should be automatically focused after the page loaded.</td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <td>challenge</td>
+      <td>{{ HTMLElement("keygen") }}</td>
+      <td>A challenge string that is submitted along with the public key.</td>
+    </tr>
+    <tr>
+      <td>checked</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>Indicates whether the element should be checked on page load.</td>
+    </tr>
+    <tr>
+      <td>cols</td>
+      <td>{{ HTMLElement("textarea") }}</td>
+      <td>Defines the number of columns in a textarea.</td>
+    </tr>
+    <tr>
+      <td>data</td>
+      <td>{{ HTMLElement("object") }}</td>
+      <td>Specifies the URL of the resource.</td>
+    </tr>
+    <tr>
+      <td>dirname</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>disabled</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indicates whether the user can interact with the element.</td>
+    </tr>
+    <tr>
+      <td>enctype</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>Defines the content type of the form date when the <code>method</code> is POST.</td>
+    </tr>
+    <tr>
+      <td>for</td>
+      <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+      <td>Describes elements which belongs to this one.</td>
+    </tr>
+    <tr>
+      <td>form</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indicates the form that is the owner of the element.</td>
+    </tr>
+  </tbody>
+  <tbody>
+    <tr>
+      <td>high</td>
+      <td>{{ HTMLElement("meter") }}</td>
+      <td>Indicates the lower bound of the upper range.</td>
+    </tr>
+    <tr>
+      <td>keytype</td>
+      <td>{{ HTMLElement("keygen") }}</td>
+      <td>Specifies the type of key generated.</td>
+    </tr>
+    <tr>
+      <td>list</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>Identifies a list of pre-defined options to suggest to the user.</td>
+    </tr>
+    <tr>
+      <td>low</td>
+      <td>{{ HTMLElement("meter") }}</td>
+      <td>Indicates the upper bound of the lower range.</td>
+    </tr>
+    <tr>
+      <td>max</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+      <td>Indicates the maximum value allowed.</td>
+    </tr>
+    <tr>
+      <td>maxlength</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Defines the maximum number of characters allowed in the element.</td>
+    </tr>
+    <tr>
+      <td>method</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td>
+    </tr>
+    <tr>
+      <td>min</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+      <td>Indicates the minimum value allowed.</td>
+    </tr>
+    <tr>
+      <td>multiple</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+      <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td>
+    </tr>
+    <tr>
+      <td>name</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Name of the element. For example used by the server to identify the fields in form submits.</td>
+    </tr>
+    <tr>
+      <td>novalidate</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td>This attribute indicates that the form shouldn't be validated when submitted.</td>
+    </tr>
+    <tr>
+      <td>optimum</td>
+      <td>{{ HTMLElement("meter") }}</td>
+      <td>Indicates the optimal numeric value.</td>
+    </tr>
+    <tr>
+      <td>pattern</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>Defines a regular expression which the element's value will be validated against.</td>
+    </tr>
+    <tr>
+      <td>placeholder</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Provides a hint to the user of what can be entered in the field.</td>
+    </tr>
+    <tr>
+      <td>readonly</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indicates whether the element can be edited.</td>
+    </tr>
+    <tr>
+      <td>required</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+      <td>Indicates whether this element is required to fill out or not.</td>
+    </tr>
+    <tr>
+      <td>rows</td>
+      <td>{{ HTMLElement("textarea") }}</td>
+      <td>Defines the number of rows in a textarea.</td>
+    </tr>
+    <tr>
+      <td>selected</td>
+      <td>{{ HTMLElement("option") }}</td>
+      <td>Defines a value which will be selected on page load.</td>
+    </tr>
+    <tr>
+      <td>size</td>
+      <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+      <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td>
+    </tr>
+    <tr>
+      <td>src</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td>The URL of the embeddable content.</td>
+    </tr>
+    <tr>
+      <td>step</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>target</td>
+      <td>{{ HTMLElement("form") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>type</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
+      <td>Defines the type of the element.</td>
+    </tr>
+    <tr>
+      <td>usemap</td>
+      <td>{{ HTMLElement("input") }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>value</td>
+      <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+      <td>Defines a default value which will be displayed in the element on page load.</td>
+    </tr>
+    <tr>
+      <td>wrap</td>
+      <td>{{ HTMLElement("textarea") }}</td>
+      <td>Indicates whether the text should be wrapped.</td>
+    </tr>
+  </tbody>
+</table>
+<h3 id="Normative_reference">Normative reference</h3>
+<ul>
+  <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li>
+  <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li>
+</ul>
diff --git a/files/id/web/guide/html/html5/index.html b/files/id/web/guide/html/html5/index.html
new file mode 100644
index 0000000000..48e2349af7
--- /dev/null
+++ b/files/id/web/guide/html/html5/index.html
@@ -0,0 +1,179 @@
+---
+title: HTML5
+slug: Web/Guide/HTML/HTML5
+tags:
+  - HTML
+  - HTML5
+  - NeedsTranslation
+  - References
+  - TopicStub
+  - Web Development
+translation_of: Web/Guide/HTML/HTML5
+---
+<p><span class="seoSummary"><strong>HTML5</strong> adalah evolusi terbaru dari standard yang mendefinisikan <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Istilah ini merepresentasikan dua konsep yang berbeda:</p>
+
+<ul>
+ <li><span class="seoSummary">Ini adalah versi baru dari <em>bahasa</em> HTML, dengan <em>element</em>, <em>attribute</em>, dan <em>behaviour </em>baru,</span></li>
+ <li><span class="seoSummary">dan sebuah <strong>teknologi</strong> dengan kelengkapan yang lebih besar yang memungkinkan situs Web dan aplikasi yang lebih beragam dan lebih berguna. Kelengkapan ini kadang-kadang disebut <em>HTML5 and friends</em> dan sering disingkat menjadi <em>HTML5</em> saja</span>.</li>
+</ul>
+
+<p>Dirancang untuk dapat digunakan oleh semua pengembang<em> </em>Web Terbuka, Berikut ini adalah tautan halaman referensi ke beberapa <em>resource</em> tentang teknologi HTML5, diklasifikasikan ke dalam beberapa kelompok berdasarkan fungsinya masing-masing.</p>
+
+<ul>
+ <li><em>Semantik</em>: memungkinkan Anda untuk mendeskripsikan konten dengan lebih presisi.</li>
+ <li><em>Konektivitas</em>: memungkinkan Anda untuk berkomunikasi dengan server dengan cara baru dan inovatif.</li>
+ <li><em>Offline &amp; Storage</em>: memungkinkan halaman <em>web</em> untuk menyimpan data di sisi <em>client</em> secara local dan beroperasi secara <em>offline</em> dengan lebih efisien.</li>
+ <li><em>Multimedia</em>: membuat <em>video</em> dan <em>audio</em> terbaik di Web Terbuka.</li>
+ <li><em>Grafik 2D/3D &amp; Efek</em>: memungkinkan lebih banyak pilihan presentasi yang lebih beragam.</li>
+ <li><em>Performa &amp; Integrasi</em>: memberikan optimalisasi pemakaian yang lebih cepat dan lebih baik dari perangkat keras komputer.</li>
+ <li><em>Akses Perangkat</em>: memungkinkan untuk menggunakan berbagai perangkat <em>input</em> dan <em>output</em>.</li>
+ <li><em>Styling</em>: memberi keleluasaan kepada para penulis untuk menulis tema yang lebih canggih.</li>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 id="Semantik" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantik</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document"><em>"Sections" </em>dan <em>"outlines"</em> pada HTML5</a></dt>
+ <dd>Sebuah tampilan pada elemen baru yaitu <em>outline</em> dan<em> section</em> pada HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Menggunakan fungsi "<em>audio</em>"  dan "<em>video</em>" pada HTML5</a></dt>
+ <dd>Elemen {{HTMLElement("audio")}} dan {{HTMLElement("video")}} ditanamkan sehingga kita dapat memanipulasi sebuah konten multimedia.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5"><em>"Forms"</em> pada HTML5</a></dt>
+ <dd>Perbaikan pada form di HTML5: the constraint validation API, beberapa attribute baru, nilai baru untuk {{HTMLElement("input")}} atribut {{htmlattrxref("type", "input")}} dan elemen baru yaitu {{HTMLElement("output")}}.</dd>
+ <dt>Elemen-elemen baru Semantik</dt>
+ <dd>Disamping section, media dan form elements, there are numerous new elements, like {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, or {{HTMLElement("meter")}} and {{HTMLElement("main")}}, increasing the amount of <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">valid HTML5 elements</a>.</dd>
+ <dt>Perbaikan pada {{HTMLElement("iframe")}}</dt>
+ <dd>Using the {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} attributes, authors can now be precise about the level of security and the wished rendering of an {{HTMLElement("iframe")}} element.</dd>
+ <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
+ <dd>Allows directly embedding mathematical formulas.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduction to HTML5</a></dt>
+ <dd>This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-compliant parser</a></dt>
+ <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd>
+</dl>
+
+<h2 id="Connectivity" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
+ <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd>
+ <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt>
+ <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd>
+</dl>
+
+<h2 id="Offline_storage" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline &amp; storage</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: the application cache</a></dt>
+ <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
+ <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd>
+ <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM Storage)</a></dt>
+ <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd>
+ <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt>
+ <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
+</dl>
+
+<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt>
+ <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
+ <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
+ <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd>
+ <dt>Track and WebVTT</dt>
+ <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd>
+</dl>
+
+<h2 id="3D_graphics_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphics &amp; effects</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt>
+ <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd>
+ <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code>&lt;canvas&gt;</code> elements</a></dt>
+ <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd>
+ <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
+ <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd>
+ <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
+ <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd>
+ <dt> </dt>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Performance_integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance &amp; integration</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
+ <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd>
+ <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt>
+ <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
+ <dt>JIT-compiling JavaScript engines</dt>
+ <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
+ <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd>
+ <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable attribute: transform your website to a wiki!</a></dt>
+ <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd>
+ <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt>
+ <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd>
+ <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt>
+ <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
+ <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
+ <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
+ <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
+ <dd>Allows control of animations rendering to obtain optimal performance.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
+ <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt>
+ <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd>
+</dl>
+
+<h2 id="Device_access" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Device access</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt>
+ <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd>
+ <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt>
+ <dd>Handlers to react to events created by a user pressing touch screens.</dd>
+ <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt>
+ <dd>Let browsers locate the position of the user using geolocation.</dd>
+ <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt>
+ <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd>
+ <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd>
+</dl>
+
+<h2 id="Styling" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling</h2>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p>
+
+<dl>
+ <dt>New background styling features</dt>
+ <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd>
+ <dt>More fancy borders</dt>
+ <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd>
+ <dt>Animating your style</dt>
+ <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd>
+ <dt>Typography improvement</dt>
+ <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd>
+ <dt>New presentational layouts</dt>
+ <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a>, and the <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd>
+</dl>
+</div>
+</div>
+
+<h4 id="External_References_Html5_Tutorial">External References<br>
+ <br>
+ <a href="http://www.html5andcss3.org" title="http://www.html5andcss3.org"><span style="color: #0000cd;">Html5 Tutorial</span></a><br>
+  </h4>
+
+<p> </p>