Example
Three articles with independent, self-contained content:
Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!Google Chrome
Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been
the second most popular web browser since January, 2018.Mozilla Firefox
Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.Microsoft Edge
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the element:
- Forum post
- Blog post
- News story
Note: The element does not render as anything special in a browser. However, you can use CSS to style the
element [see example
below].
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
Global Attributes
The tag also supports the Global Attributes in HTML.
Event Attributes
The tag also supports the Event Attributes in HTML.
More Examples
Example
Use CSS to style the
.all-browsers
{
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h2, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today! Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second
most popular web browser since January, 2018. Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.
Most Popular Browsers
Google Chrome
Mozilla Firefox
Microsoft Edge
Try it Yourself »
Related Pages
HTML DOM reference: Article Object
Default CSS Settings
Most browsers will display the element with the following default values:
article {
display: block;
}
Indonesian [Bahasa Indonesia] translation by Kurniawan Sugi Purwanto [you can also view the original English article]
Dalam tutorial ini saya akan tunjukkan pada Anda betapa mudahnya memperluas bahasa HTML dengan menggunakan tag-tag custom. Berbagai tag kustom bisa digunakan untuk mengimplementasikan beragam perilaku [behavior], jadi penggunaannya adalah cara yang memudahkan untuk menulis lebih sedikit kode dan membuat dokumen HTML Anda lebih sederhana.
Apa Itu Tag HTML Kustom?
Sebagai contoh, dengan HTML Anda menggunakan tag , untuk menampilkan teks cetak tebal. Jika Anda butuh daftar, Anda bisa menggunakan tag
dengan tag anak untuk
tiap item di list. Tag-tag tersebut diinterpretasikan oleh peramban dan bersama dengan CSS menentukan bagaimana ditampilkannya konten suatu halaman web dan bagaimana perilaku konten tiap-tiap bagian.
Terkadang penggunaan satu tag HTML saja tidaklah cukup untuk fungsionalitas yang dibutuhkan dalam aplikasi web. Biasanya hal ini diselesaikan dengan menggunakan berbagai tag HTML berikut JavaScript dan CSS, tetapi solusi semacam ini tidaklah begitu elegan.
Solusi yang lebih elegan
adalah dengan menggunakan tag kustom—pengidentifikasi yang dilingkupi dengan tanda dan diinterpretasikan oleh peramban unuk menampilkan fungsionalitas yang diharapkan. Sama seperti tag HTML, kita harus bisa menggunakan tag HTML kustom beberapa kali dalam satu halaman, dan kita juga harus bisa membuat atribut tag dan sub tag untuk membantu fungsionalitas tag kustom. Mari kita lihat satu contohnya!
Contoh #1: Membuat Tag HTML Kustom Gravatar
Mari membuat tag kustom yang akan
menampilkan gambar Gravatar untuk alamat email tertentu. Tag ini akan kita namai , dan kita akan memasukkan alamat email sebagai atribut yang dinamai
email
.
Anda bisa memberi nama tag kustom dengan apa saja sesuai keinginan, tetapi satu hal yang harus diperhatikan adalah bahwa dalam contoh ini nama tag kustomnya dimulai dengan codingdude-
. Yang terbaik adalah dengan menggunakan prefiks semacam ini untuk tag kustom Anda agar terhindar dari konflik penamaan dengan tag kustom lainnya.
Sangat penting juga untuk tidak menggunakan nama tag yang sudah didefinisikan oleh HTML.
Untuk mengimplementasikan dan menguji tag kita, ada beberapa hal yang perlu dibuat terlebih dahulu:
- Satu folder untuk menyimpan file-file proyek; kita beri nama folder ini
gravatar-custom-tag
. - Satu file HTML
index.html
di dalam foldergravatar-custom-tag
. File ini akan berisi kode-kode HTML. - Satu file JS
codingdude-gravatar.js
di dalam foldergravatar-custom-tag
. File ini berisi kode JavaScript yang mengimplementasikan tag kustom.
Mari menyunting file index.html
dan menjadikan kontennya terlihat sebagaimana berikut:
This is my Gravatar picture:
Jika kita memuat index.html
di peramban saat ini, hasilnya tidak akan semengesankan itu karena kode untuk tag kustom belum diimplementasikan:
Satu hal yang harus diperhatikan adalah bahwa peramban sangatlah pemaaf, jadi Anda bisa memiliki tag tak dikenal dalam suatu dokumen dan peramban akan sekedar mengabaikannya. Agar tag kustom Gravatar benar-benar bisa menampilkan gambar untuk email, sebelumnya harus dipahami cara kerja Gravatar.
Gravatar
bekerja dengan menerjemahkan alamat email ke URL suatu gambar PNG yang telah dipilih pengguna. Penerjemahannya dilakukan dengan memperhitungan tanda MD5 alamat email. URL gambar Gravatar akan terlihat seperti ini: //www.gravatar.com/avatar/EMAIL_MD5_HASH.png Maka pertama kali kita membutuhkan fungsi untuk memperhitungkan hash MD5 dari suatu string. Untuk itu kita akan menggunakan library sumber terbuka yang akan ditambahkan ke file index.html
seperti ini:
This is my Gravatar picture:
Sekarang mari kita
lanjutkan ke implementasi tag kustom. Harus dilakukan implementasi kode yang mula-mula mengidentifikasi tag kustom di dokumen kemudian kita akan mengimplementasikan fungsionalitas tag kustomnya. Ini semua akan masuk ke file codingdude-gravatar.js
dan akan tampak seperti ini:
function customTag[tagName,fn]{ document.createElement[tagName]; //find all the tags occurrences [instances] in the document var tagInstances = document.getElementsByTagName[tagName]; //for each occurrence run the associated function for [ var i = 0; i < tagInstances.length; i++] { fn[tagInstances[i]]; } } function codingdudeGravatar[element]{ //code for rendering the element goes here if [element.attributes.email]{ //get the email address from the element's email attribute var email = element.attributes.email.value; var gravatar = "//www.gravatar.com/avatar/"+md5[email]+".png"; element.innerHTML = "Contoh #2: Tag HTML Kustom Tingkat Lanjut untuk Menggambar Diagram Lingkaran
Dalam contoh kita sebelumnya, kita menyaksikan implementasi tag HTML kustom yang sangat sederhana. Anda bisa menggunakan pendekatan yang sama untuk mengimplementasikan tag kustom apa saja yang Anda inginkan.
Mari kita lihat cara mengimplementasikan tag kustom yang lebih canggih, yang bisa digunakan untuk menggambar diagram lingkaran. Mari membuat file-file yang dibutuhkan untuk tag kustom ini:
- Membuat suatu folder dan beri nama
piechart-custom-tag
. Ini akan menjadi folder proyeknya. - Di dalam folder
piechart-custom-tag
, buatlah suatu file HTML dan beri namaindex.html
. File ini akan berisi kode HTML. - Buat juga file JavaScript
codingdude-piechart.js
yang akan berisi implementasi tag kustom kita.
Tag kustom sangat
sering digunakan sebagai wrapper untuk berbagai fungsionalitas. Dalam hal ini, kita akan menggunakan tag sebagai wrapper untuk menggambar diagram lingkaran. Jika Anda melewatkan tutorial saya tentang Bagaimana Menggambar Diagram dengan JavaScript dan HTML5 Canvas, mungkin Anda ingin melihatnya terlebih dahulu. Kita akan
menggunakan kode dari tutorial itu dan menggunakan fungsionalitasnya dalam tag kustom kita.
Jadi suntinglah file codingdude-piechart.js
dan tambahkan fungsi berikut ini dari tutorial tersebut:
drawLine[]
drawArc[]
-
drawPieSlice[]
Piechart[]
Sekarang mari menyunting file index.html
dan menempatkan tag kustom untuk menggambar diagram lingkaran seperti ini:
10 14 2 12
Tujuannya di sini adalah mengatur lebar dan panjang diagram lingkaran dengan menggunakan atribut
width
dan height
. Atribut colors
mengatur warna yang digunakan untuk potongan diagram lingkaran.
Sebagaimana disebutkan sebelumnya, tag kustom ini sedikit lebih kompleks karena kita akan menggunakan sub-tag untuk tag kustom ini. Kita akan menggunakan sub-tag di sini untuk mengatur data bagi diagramnya. Sekarang mari kita lihat cara mengimplementasikan kode tersebut untuk tag kustom ini.
Sunting file codingdude-piechart.js
dan berdasarkan fungsi yang diambil dari tutorial
diagram lingkaran, letakkan kode berikut ini:
//here you should add the function from the tutorial //How to Draw Charts Using JavaScript and HTML5 Canvas //... function customTag[tagName,fn]{ document.createElement[tagName]; //find all the tags occurrences [instances] in the document var tagInstances = document.getElementsByTagName[tagName]; //for each occurrence run the associated function for [ var i = 0; i < tagInstances.length; i++] { fn[tagInstances[i]]; } } function PiechartTag[element]{ //add the canvas where to draw the piechart var canvas = document.createElement["canvas"]; //get the width and height from the custom tag attributes canvas.width = element.attributes.width.value; canvas.height = element.attributes.height.value; element.appendChild[canvas]; //get the colors for the slices from the custom tag attribute var colors = element.attributes.colors.value.split[","]; //load the chart data from the sub-tags var chartData = {}; var chartDataElements = element.querySelectorAll["codingdude-data"]; for [var i=0;i