Apa yang baru dalam HTML5 / CSS3?

23

Saya telah melihat situs ini dan situs ini , tetapi itu banyak untuk dicerna. Apa hal utama tentang HTML5 yang membuatnya berbeda / lebih baik dari HTML / CSS lama (X) biasa?

html5 css3 css xhtml html Jason
sumber

Jawaban:

33

HTML5 sangat besar , tetapi juga mengagumkan .

Dalam pandangan saya, sebagian besar tentang interoperabilitas . Specnya pergi dan menentukan case edge untuk mencoba dan memastikan bahwa semua browser membaca markup dengan cara yang sama .

Di tempat kedua, HTML5 memiliki video dan audio, yang melakukan persis apa yang dikatakan namanya. Jika Anda ingin memasukkan video atau audio, HTML5 harus mengurangi kebutuhan plugin Anda.

Di tempat ketiga, HTML5 mencakup banyak aksesibilitas dan bantuan semantik. Misalnya, elemen menyukai <section>dan <article>membantu mesin mencari tahu konten apa yang seharusnya. Jenis input baru seperti <input type=email>juga dapat berguna untuk alasan yang sama, meskipun tipe input baru termasuk UI khusus yang membuatnya berguna bahkan untuk pembaca manusia "umum".

Perhatikan bahwa fitur Formulir baru lebih dari tipe input baru. Ini juga mencakup dukungan untuk teks placeholder dan beberapa atribut lainnya.

HTML5 termasuk <canvas>, yang memungkinkan menggambar bentuk 2D (dan, dengan WebGL, 3D) seperti bagan atau bahkan membuat game.

Perilaku lama sekarang distandarisasi, seperti Internet Explorer kuno contentEditable.

DOCTYPE akhirnya layak! Anda sekarang dapat benar-benar menghafalnya!<!DOCTYPE html>

Menentukan pengkodean juga lebih mudah, dengan <meta charset=utf-8>.

Jika Anda ingin mengirim data ke klien dan mengaitkannya dengan elemen, Anda sekarang dapat melakukannya dengan atribut khusus. Misalnya, <div data-status=open>Open</div>sekarang akhirnya diizinkan. Perhatikan bahwa nama atribut khusus harus diawali dengan data-.

Anda sekarang dapat memasukkan SVG dan MathML dalam dokumen HTML. Sebelumnya, Anda hanya bisa melakukannya dengan dokumen XHTML.

Di antara banyak fungsi dan bidang yang didefinisikan HTML5, salah satu yang paling mengesankan adalah classList, yang memungkinkan Anda untuk memanipulasi atribut kelas dengan lebih mudah. Alih-alih harus mendapatkanAttribute / setAttribute dan menggunakan peretasan kompleks untuk mencari tahu kelas mana yang dimiliki elemen dan menghapus kelas tertentu dari elemen itu, classList membuat situasi sulit itu sangat sederhana.

Ada juga beberapa spesifikasi terkait, seperti Pekerja Web, Soket Web, dan IndexedDB, yang sebenarnya bukan bagian dari HTML5 tetapi semua orang membicarakannya seolah-olah memang demikian. Mereka sangat berguna untuk mengambil keuntungan dari komputer multi-core, berkomunikasi dengan server dan menyimpan data secara lokal.

Adapun CSS3, itu termasuk dukungan untuk animasi , transisi , batas bulat dan model kotak fleksibel .

Juga baru di CSS3 adalah penyeleksi baru, yang membuatnya lebih mudah untuk mencocokkan elemen tertentu pada halaman (seperti hanya baris ganjil atau genap dalam tabel).

Opacity, unit baru, tenda dan ruby ​​juga merupakan bagian dari CSS3.

Saya pikir cukup banyak mencakup semua bagian penting.

luiscubal
sumber
1
Kerusakan yang luar biasa .
George Edison
Kerja bagus untuk memukul semua poin utama.
Grant Palin
1
Patut disebutkan bahwa HTML5 saat ini hanyalah Draft Kerja, dan belum sepenuhnya selesai.
Django Reinhardt
1
@ Django Reinhardt Seperti yang dikatakan WHATWG, tidak semua fitur HTML5 berada pada tahap yang sama. Beberapa sudah lebih banyak diterapkan, yang lain akan membutuhkan waktu lebih lama. Implementasi adalah hal yang sangat penting ketika mengembangkan situs web, dan status spesifikasi bukanlah ukuran yang baik untuk itu. Anda mungkin juga ingin melihat FAQ WHATWG.
luiscubal
1
Apakah mereka menghilangkan kebutuhan tanda kutip untuk atribut XHTML yang valid?
Lotus Notes
18

Untuk melacak dukungan fitur dan spesifikasi, Anda dapat memeriksa Kapan saya dapat menggunakan . Ini termasuk fitur HTML5 dan CSS3 dan hal-hal seperti SVG, PNG, CSS2.1 dan CSS2. Ini juga melacak status persetujuan mereka (Rekomendasi, Rekomendasi yang Diusulkan, Rekomendasi Kandidat, Draf Kerja, standar IETF). FindMeByIP mengelola matriks hanya fitur CSS3 yang didukung, oleh browser.

Beberapa rejiggering dan penyederhanaan sintaksis terjadi di mur dan baut:

  • String doctype yang disederhanakan: <!DOCTYPE html>
  • Sederhana languageatribut untuk <html>tag: <html lang="en">
    (masih dapat mencakup xmlnsdan xml:langjika Anda ingin kepatuhan XML)
  • <meta>Tag khusus untuk charset:<meta charset="utf-8" />
  • scripttidak lagi menerima typeatribut, mengharuskan charsetskrip jarak jauh:
    <script src="/media/js/jquery.js" charset="utf-8"></script>(skrip inline tidak memerlukan atribut tambahan sama sekali)

HTML5 menjadikan kemampuan markup Anda menjadi lebih semantik , dan secara keseluruhan jauh lebih mudah untuk membaca / menulis dan memiliki ukuran file yang lebih kecil. Alih-alih memiliki <div id="nav">, Anda hanya perlu <nav>. Kelihatannya tidak banyak tetapi bertambah.

Banyak elemen dari XHTML1 dan HTML4 telah ditinggalkan. Unsur-unsur berikut tidak didukung di HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>dan <xmp>.

Beberapa elemen baru di HTML5 hanya dimaksudkan untuk menambah markup semantik, dan tidak akan melakukan apa-apa kecuali memberikan alternatif yang lebih bermakna <div>. Elemen-elemen baru termasuk: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>, dan <figcaption>.

Formulir HTML5 sangat ditingkatkan.

Jenis Input Baru

Atribut Baru:

Elemen Baru

Kita bisa masuk ke formulir sepanjang hari, tetapi di sini ada beberapa sumber untuk menjelaskan semua hal baru ini dengan lebih baik.

CSS3 menghadirkan indahnya Media Queries . Pertanyaan Media sangat, sangat, sangat bagus. Tidak tersedia di IE8 dan di bawah, tetapi akan didukung oleh IE9.

CSS3 memiliki penghitung yang bertambah . Anda dapat menggunakan ini untuk elemen angka-otomatis tanpa daftar-urutan menggunakan :beforepseudo-selector dan contentgaya ketika daftar-urutan atau penomoran akan secara semantik salah. (Misalnya, memberi nomor langkah-langkah mengisi bidang formulir.)

Jika Anda penggemar Reset CSS , ada HTML5 CSS Reset yang tersedia dari HTML5 Doctor. Saya telah membuat tiga tambahan pada reset ini untuk halaman pribadi saya:

  • text-rendering: optimizeLegibility; ditambahkan ke gaya dalam definisi untuk <body>
  • labeltermasuk dalam definisi dengan inputdan selectkarena itu perluvertical-align: middle;
  • gaya untuk insdan :focusdari Reset CSS Eric Meyer ditambahkan kembali

Reset bersaing yang disebut reset5 tersedia, tetapi saya belum mengevaluasinya secara pribadi. Hal ini didasarkan pada kedua Eric Meyer dan HTML5 Dokter ulang.

The HTML5 Keamanan Cheatsheet trek bug di HTML5 fitur seperti yang diterapkan di berbagai browser, dan juga termasuk bug di fitur yang ada yang baik untuk melacak juga.

Namun, menggunakan elemen HTML5 tidak secara otomatis membuat kode Anda menjadi semantik. WHATWG telah menulis sebuah artikel yang disebut <bagian> bukan hanya "semantik <div>" yang menjelaskan bahwa itu bukan sekadar elemen wadah.

Di HTML 5, ada algoritma untuk membangun tampilan outline dokumen. Ini dapat digunakan, misalnya oleh AT, untuk membantu pengguna menavigasi dokumen. Dan <section> dan teman-teman adalah bagian penting dari algoritma ini. Setiap kali Anda membuat <section>, Anda meningkatkan kedalaman outline sebesar 1 (jika Anda bertanya-tanya apa kelebihan model ini dibandingkan dengan model <h1> - <h6> tradisional, pertimbangkan feedreader berbasis web yang ingin mengintegrasikan struktur dokumen konten sindikasi dengan situs sekitarnya. Dalam HTML 4 ini berarti mengurai semua konten dan memberi nomor baru semua judul. Dalam HTML5 judul berakhir pada kedalaman yang tepat secara gratis).

...

Jika Anda hanya mengkonversi secara membabi buta semua <div> pada halaman Anda ke <sections>, kemungkinan besar halaman Anda tidak akan memiliki garis besar yang Anda harapkan. Dan, selain sebagai palsu semantik, ini akan membingungkan orang-orang yang mengandalkan judul untuk navigasi.

Seperti semua hal lain di dunia ini, ada kerangka kerja untuk aplikasi web HTML5 yang disebut SproutCore , yang dibangun oleh mantan insinyur Apple bernama Charles Jolley.

Selain html5rocks.com Anda dapat mengikuti html5doctor.com dan html5gallery.com .

Bryson
sumber
+1 Jawaban yang bagus! Berpikir Anda mungkin kehilangan penutup pada salah satu bagian kode Anda di suatu tempat.
JasonBirch
+1 Terima kasih atas tautan ke tabel kompatibilitas browser! FindMeByIP sangat rapi. Selain itu, Selain SproutCore, ExtJS baru saja diluncurkan kembali sebagai Sencha dan mereka tampaknya membuang berat badan mereka di belakang HTML 5.
Sharpie
4

Ada hal tata letak dasar seperti batas-radius, bayangan (kotak / teks), dukungan rgba, dan sebagainya; Inilah yang paling dikenal dengan CSS3. Yang lebih menarik adalah tag kanvas, tag video, penyimpanan lokal, soket web, dan sebagainya yang akan menciptakan pengalaman pengguna yang lebih kaya dalam HTML / JS / CSS biasa. Fitur-fitur ini berpotensi menjadi alternatif hebat untuk Flash di web tanpa perlu tambahan plugin.

D4V360
sumber
4

Saya menemukan elemen-elemen HTML baru agak menarik ... beberapa dari mereka menjanjikan penggantian semantik untuk generik div. The menjanjikan unsur-unsur baru termasuk article, section, aside, figure, nav, header, dan footer, antara lain. Saya sangat suka ide elemen semantik menggantikan wadah yang tidak berarti.

Oh ya, item terkait: yang paling disederhanakan doctype- akhirnya sesuatu yang bisa saya ketik dari memori!

Grant Palin
sumber
4

( Ini jawaban saya untuk pertanyaan serupa di webapps.stackexchange.com )

The Canvas dan Web Worker Threads adalah aspek yang paling menarik dari HTML5 dengan saya. Saya telah menulis beberapa aplikasi web yang menggunakan fitur-fitur itu:

GioAUTHor [sic] menggunakan kanvas secara luas untuk memungkinkan Anda merencanakan jalur di peta dan kemudian menemukan rute terpendek dari awal hingga selesai (melalui algoritma Dijkstra dalam JavaScript).

JavaScript Thread Demo menggunakan kanvas secara terbatas tetapi menunjukkan penggunaan Worker Threads, lengkap dengan kode demo. Itu juga menggunakan kontrol slider input tipe HTML5 = "range" .

Dukungan browser HTML5 sangat beragam seperti browser itu sendiri. Ada situs yang bagus (dalam HTML5, natch) tentang kesiapan HTML5 yang menunjukkan siapa yang siap untuk apa.

Alan
sumber
Saya telah melihat situs Kesiapan HTML5 sebelumnya, tetapi tidak dapat mengingat di mana - terima kasih untuk tautannya! Benar-benar rapi, tujuan ganda yang dilayaninya.
Grant Palin
2

Sehubungan dengan CSS3 - miliki di http://css3please.com/ untuk melihat apa yang dapat Anda lakukan.

Semakin lama browser Anda, semakin besar kemungkinan Anda akan dapat melihat efeknya.

Sapu tangan
sumber
1

Tag audio dan video memungkinkan penyajian media tanpa perlu plugin seperti Flash atau Silverlight, dan yang paling penting berfungsi pada browser iPhone dan iPad. Ada beberapa masalah yang perlu diatasi berkenaan dengan codec dan manajemen hak digital.

Steve Tranby
sumber
1

Jeremy Kieth baru saja merilis buku yang sangat bagus tentang topik, "HTML5 for Web Designer". Anda mungkin ingin memeriksanya.

Ini adalah buku pertama dari A Book Apart. Sangat merekomendasikannya untuk desainer menengah ke lanjutan. A ++

http://books.alistapart.com/

CATATAN : Anda mungkin harus menunggu untuk mendapatkan salinannya

Kevin
sumber
1

Ini tidak menawarkan pendapat tentang pentingnya, tetapi ini adalah delta yang bermanfaat antara HTML 4 dan 5.

2 ¢ saya pada peningkatan utama:

  • <section>dan algoritma penguraian tajuk baru (saya bilang itu hanya 2 ¢ saya )
  • elemen bentuk baru, mis <input type=email>
  • data-* atribut
  • penyimpanan sisi klien
  • asli <audio>dan<video>
Paul D. Waite
sumber
0

Karena belum ada yang memasukkan ini:

HTML5 bagus untuk apa yang didaftar semua orang, tetapi juga mencakup geolokasi standar, pekerja web, soket web, kanvas, dan Penyimpanan lokal. Semua alat ini adalah bagian dari spesifikasi HTML5, yang menggunakan banyak JavaScript di belakang layar untuk mewujudkannya.

Ilan Biala
sumber