Pinned

Tag Article pada HTML5 dan Fungsinya

Tag <article> adalah salah satu elemen section terbaru pada HTML5. Tag <article> pada HTML digunakan untuk merepresentasikan artikel. Secara khusus, konten yang terdapat dalam tag <article> berdiri sendri dari konten lainnya dari situs meskipun hal tersebut saling berkaitan satu sama lain. Dengan kata lain, elemen artikel merepresentasikan sebuah komponen dari sebuah halaman yang terdiri dari komposisi mandiri pada sebuah dokumen, halaman, atapun situs.

Cara Sederhana Menggunakan Tag Article pada HTML5
Ilustrasi Tag Article HTML5

Sebelum memahami lebih dalam materi tentang Tag Article pada HTML5 dan Fungsinya, terlebih dahulu pelajari materi tentang: Fitur Unggulan pada HTML5 [klik], Entitas Reserved HTML dan Fungsinya [klik], dan Elemen Kode Komputer HTML dan Fungsinya [klik].

Potensi penggunaan elemen article pada web adalah:
  • Halaman website dengan konten majalah atau artikel berita.
  • Entri blog.
  • Post forum.
  • Komentar yang diberikan oleh pengguna.

Tag Article Sebagian Besar Sering Digunakan pada Dua Konteks:
  • Pada sebuah laman potongan kecil pada konten, sebuah elemen tunggal <article> dapat digunakan untuk memiliki konten utama dan membakukannya dari sisa halaman yang lain.
  • Pada halaman yang terdiri lebih dari satu halaman konten seperti laman indek blog, laman hasil pencarian, laman kategori, dan news feedmultiple elemen <article> dapat digunakan untuk mengandung setiap bagian kecil dari konten-konten tersebut.

Dengan kata lain hal ini mirip dengan elemen <div> yang juga menampilkan gaya kerja yang sama. Penggunaan elemen <article> akan membuat informasi yang dibaca pada layar terlihat lebih sistematis ketimbang menggunakan elemen <div>.


Pengaturan default CSS: kebanyakan browser akan menampilkan elemen article dengan diserta nilai berikut ini.

<article> {display:block;}

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Contoh Penerapan

</title>

</head>

 

<body>

<article 

style=

"width: 300px

border: 2px solid gray;

padding: 10px

border-radius: 10px;

margin:5px;">

 

<img 

src=

"https://1.bp.blogspot.com/-mhjmreJwUG4/YGfcp6l6BxI/AAAAAAAANpQ/qBy8tiBe1qMEtMDBHUXM1yhhkhgPGUmPgCLcBGAsYHQ/s2048/logo%2Bsman%2B8%2Bsemarang.png"

 

alt=""

width="300"

height="250"

class="alignnone size-medium wp-image-560930" />

 

<h1>

ElfanMauludi

</h1>

 

<p>

Kegiatan apa yang menghilangkan stres?

Jawab, mengupas kacang.

 

Karena dengan mengupas kacang akan 

menghilangkan PEANUT.

.</p>

</article>

</body>

 

</html>

Output:

ElfanMauludi

Kegiatan apa yang menghilangkan stres? Jawab, mengupas kacang. Karena dengan mengupas kacang akan menghilangkan PEANUT.

Artikel ini didedikasikan kepada: Dwi Pratiwiningrum, Fahrunisa Rahma Dewi, Heru Prasetyo, Ika Putri Rohmatussa'Diyah, dan Indra Yoga Saputra.

5 komentar:

  1. Apa yang dimaksud dengan tag artickle pada html?

    BalasHapus
    Balasan
    1. Tag Artickle pada HTMl digunakan untuk mendefinisikan konten mandiri independen dalam suatu dokumen, halaman, aplikasi, ataupun situs. Konten tag artickle bersifat independen dan lengkap dari konten lainnya yang ditampilkan pada suatu halaman website. Tag ini umumnya digunakan pada bentuk postingan forum, postingan blog, cerita, berita, komentar, dan lain sebagainya.

      Hapus
    2. Tag artickle pada html dapat digunakan dalam bentuk forum post, blog entry, artikel majalan, artikel koran, komentar pengguna, ataupun item konten independen.

      Hapus
  2. Berarti tag ini lebih spesifik untuk gaya pernulisan artikel HTML?

    BalasHapus
    Balasan
    1. Tag artickle memang digunakan untuk penulisan dalam format yang telah disebutkan sebelumnya. Namun tidak menutup kemungkinan untuk bentuk-bentuk penulisan atau penyajian lainnya pada html.

      Hapus

Hubungi admin melalui Wa : +62-896-2514-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -