Apa perbedaan utama antara HTML 4 dan HTML 5?

145

Apa perbedaan utama antara konsep HTML4 dan HTML5 ?

Harap simpan jawaban yang terkait dengan sintaks yang diubah dan elemen html yang ditambahkan / dihapus.

deepwell
sumber

Jawaban:

197

HTML5 memiliki beberapa tujuan yang membedakannya dari HTML4.

Konsistensi dalam Menangani Dokumen Cacat

Yang utama adalah penanganan kesalahan yang konsisten dan didefinisikan . Seperti yang Anda ketahui, HTML dengan sengaja mendukung 'tag soup', atau kemampuan untuk menulis kode yang salah dan membuatnya diperbaiki menjadi dokumen yang valid. Masalahnya adalah bahwa aturan untuk melakukan ini tidak ditulis di mana pun. Ketika vendor browser baru ingin memasuki pasar, mereka hanya perlu menguji dokumen yang cacat di berbagai browser (terutama IE) dan merekayasa balik penanganan kesalahan mereka. Jika tidak, maka banyak halaman tidak akan ditampilkan dengan benar (perkiraan menempatkan sekitar 90% halaman di internet sebagai setidaknya agak salah bentuk).

Jadi, HTML5 berusaha menemukan dan mengkodifikasikan penanganan kesalahan ini, sehingga pengembang peramban semua dapat membuat standar dan sangat mengurangi waktu dan uang yang diperlukan untuk menampilkan segala sesuatu secara konsisten. Selain itu, lama di masa depan setelah HTML mati sebagai format dokumen, sejarawan mungkin masih ingin membaca dokumen kami, dan memiliki algoritma penguraian yang benar-benar terdefinisi akan sangat membantu ini.

Fitur Aplikasi Web yang Lebih Baik

Tujuan sekunder HTML5 adalah untuk mengembangkan kemampuan browser untuk menjadi platform aplikasi, melalui HTML, CSS, dan Javascript. Banyak elemen telah ditambahkan langsung ke bahasa yang saat ini (di HTML4) Flash atau hacks berbasis JS, seperti <canvas>, <video>, dan <audio>. Hal-hal yang berguna seperti Penyimpanan Lokal (basis data nilai kunci yang dapat diakses browser, yang dapat diakses js, untuk menyimpan informasi di luar apa yang dapat disimpan cookie), tipe input baru seperti tanggal di mana browser dapat mengekspos antarmuka pengguna yang mudah (sehingga kami dapat tidak harus menggunakan pemetik tanggal kalender berbasis js kami), dan validasi formulir yang didukung browser akan membuat pengembangan aplikasi web lebih mudah bagi pengembang, dan membuatnya lebih cepat untuk pengguna (karena banyak hal akan didukung secara asli, daripada diretas melalui javascript).

Semantik Elemen yang Ditingkatkan

Ada banyak upaya lain yang lebih kecil terjadi di HTML5, seperti peran semantik-didefinisikan yang lebih baik untuk elemen yang ada ( <strong>dan <em>sekarang benar-benar berarti sesuatu yang berbeda, dan bahkan <b>dan <i>memiliki semantik yang samar-samar yang harus bekerja dengan baik ketika parsing dokumen warisan) dan menambahkan elemen baru dengan berguna semantik - <article>, <section>, <header>, <aside>, dan <nav>harus mengganti mayoritas <div>s digunakan pada halaman web, membuat halaman Anda sedikit lebih semantik, tetapi yang lebih penting, lebih mudah dibaca . Tidak ada lagi pemindaian yang menyakitkan untuk melihat apa yang </div>ditutup secara acak - sebaliknya Anda akan memiliki yang jelas </header>, atau </article>, membuat struktur dokumen Anda jauh lebih intuitif.

Xanthir
sumber
14
Tolong buat beberapa highlight untuk tag dan kalimat dengan mengedit jawabannya. (Itu hanya saran karena ketika saya membaca ini, itu membuat saya lelah.)
Mohammad Faisal
44

Dari Wikipedia :

  • Aturan penguraian baru berorientasi pada penguraian dan kompatibilitas yang fleksibel
  • Elemen baru - bagian, video, kemajuan, nav, meter, waktu, samping, kanvas
  • Atribut input baru - tanggal dan waktu, email, url
  • Atribut baru - ping, charset, async
  • Atribut global (yang dapat diterapkan untuk setiap elemen) - id, tabindex, repeat
  • Elemen yang tidak digunakan lagi jatuh - tengah, font, mogok
Christian Davén
sumber
12

Anda akan ingin memeriksa Perbedaan HTML5 dari HTML4: Kelompok Kerja W3C Catatan 9 Desember 2014 untuk perbedaan lengkap. Ada banyak elemen dan atribut elemen baru. Beberapa elemen telah dihapus dan yang lainnya memiliki nilai semantik yang berbeda dari sebelumnya.

Ada juga API yang ditentukan, seperti penggunaan kanvas, untuk membantu membangun generasi aplikasi web berikutnya dan memastikan implementasi terstandarisasi.

Zach
sumber
11

HTML5 memperkenalkan sejumlah API yang membantu dalam membuat aplikasi Web. Ini dapat digunakan bersama dengan elemen baru yang diperkenalkan untuk aplikasi:

  • API untuk memutar video dan audio yang dapat digunakan dengan elemen video dan audio baru.
  • API yang memungkinkan aplikasi Web offline.
  • API yang memungkinkan aplikasi Web untuk mendaftar sendiri untuk protokol atau jenis media tertentu.
  • API pengeditan dalam kombinasi dengan contenteditableatribut global baru .
  • Drag & drop API dalam kombinasi dengan draggableatribut.
  • API yang memaparkan riwayat dan memungkinkan halaman untuk menambahkannya untuk mencegah kerusakan tombol kembali.
Viktor Fonic
sumber
3

Anda mungkin tertarik pada daftar elemen dan atribut HTML5 ini .

Perlu diketahui juga bahwa itu "HTML 4", bukan "HTML4". Memang, untuk HTML 5, kedua varian digunakan, tetapi ada perbedaan penting dalam artinya. HTML 5 mengacu pada nama spesifikasi W3C, sedangkan "HTML5" adalah tipe dokumen dari file HTML tersebut dengan text/htmltipe MIME yang mengikuti spesifikasi ini. Hal yang sama berlaku untuk XHTML 5 vs XHTML5.

Mathias Bynens
sumber
1
Anda tampaknya menyiratkan bahwa XHTML 5 ada, sementara ini tidak terjadi. Rekomendasi W3C terbaru dari XHTML adalah 1.1, dan 2.0 adalah dalam tahap konsep.
David Rivers
4
@ David Rivers: Itu memang ada. XHTML5 adalah serialisasi XML dari HTML5 .
Mathias Bynens
2
@ David Rivers: Omong-omong, XHTML 2 tidak lagi dalam tahap konsep. Itu telah dihentikan demi HTML5 .
Mathias Bynens
Terima kasih. Saya baru saja menemukan ini juga dan tidak bisa percaya betapa saya sudah gila. Ini merupakan tahun yang sulit!
David Rivers
2

Sekarang W3c memberikan perbedaan resmi di situs mereka:

http://www.w3.org/TR/html5-diff/

Sajit
sumber
1
Dokumen terlalu banyak bertele-tele.
Hitesh Sahu
0

HTML 5 mengundang Anda memberikan banyak nilai semantik pada kode Anda. Terlebih lagi, ada solusi asli untuk menyematkan konten multimedia.

Sisanya penting, tetapi ini lebih merupakan gula teknis yang akan menyelamatkan Anda dari melakukan hal yang sama dengan bahasa pemrograman klien.

e-satis
sumber