HTML5 là phiên bản lớn tiếp theo của HTML thay thế cho HTML 4.01, XHTML 1.0, và XHTML 1.1. HTML5 là một chuẩn để cấu trúc và hiện diện nội dung trên WWW. ( Thông tin thêm : dịch vụ thiết kế web )
Chuẩn mới này kết hợp các tính năng như Video Playback và drag-and-drop mà trước đây đã phụ thuộc vào plug-ins trình duyệt thứ 3 như Adobe Flash, Microsoft Silverlight, và Google Gears.
HTML5 là kết quả của sự hợp tác giữa W3C và WHATWG (viết tắt của Web Hypertext Application Technology Working Group).
Trình duyệt hỗ trợ
Các phiên bản mới nhất của Apple Safari, Google Chrome, Mozilla FireFox, và Opera hỗ trợ nhiều tính năng HTML5 và IE 9.0 cũng sẽ hỗ trợ một số tính năng HTML5.
Các trình duyệt Mobile web mà đã cài đặt trên iPhones, iPads và Android hỗ trợ tốt cho HTML5. ( Tìm hiểu thêm : thiết kế web thân thân thiện với công cụ tìm kiếm )
Tính năng mới
HTML5 giới thiệu một số các phần tử và thuộc tính mới mà giúp xây dựng một Website hiện đại. Dưới đây liệt kê các tính năng tuyệt vời được giới thiệu trong HTML5.
Phần tử ngữ nghĩa học (semantic) mới: Đó là <header>, <footer>, và <section>.
Forms 2.0: Nâng cấp Form của HTML web với các thuộc tính mới giới thiệu cho thẻ <input>.
Web Storage nội bộ lâu dài: Không dùng đến plugins của bên thứ 3.
WebSocket : Một công nghệ giao tiếp hai chiều thế hệ mới cho các ứng dụng web.
Các sự kiện Server-Sent: HTML5 giới thiệu các sự kiện từ Web Server tới trình duyệt web và chúng được gọi là Các sự kiện Server-Sent (SSE).
Canvas: Hỗ trợ vẽ bề mặt hai chiều mà bạn có thể chương trình hóa với JavaScript.
Audio & Video: Bạn có thể nhúng Audio và Video trên các trang web mà không cần sự hỗ trợ của plugins bên thứ 3.
Geolocation: Bây giờ các khách truy cập có thể chọn để chia sẻ vị trí vật lý với ứng dụng web.
Microdata: Cho bạn tạo các từ vựng của riêng bạn trên HTML5 và mở rộng các trang web của bạn với Custom Semantics.
Drag và drop: Kéo và bỏ một item từ một vị trí tới vị trí khác trên cùng một trang web.
Khả năng tương thích ngược
HTML5 được thiết kế, nhiều có thể, để có thể tương thích với các trình duyệt web đang tồn tại. Các tính năng mới xây dựng trên các tính năng đang tồn tại và cho phép bạn cung cấp nội dung cho các trình duyệt cũ hơn.
Nó được đề nghị là phát hiện sự hỗ trợ cho từng tính năng HTML5 với một vài dòng JavaScript.
Nếu bạn chưa làm quen với bất cứ phiên bản HTML nào, chúng tôi đề nghị bạn truy cập Bài hướng dẫn HTML trước khi bạn tìm hiểu xa hơn các khái niệm về HTML5.
Cú pháp HTML5
Ngôn ngữ HTML5 có một cú pháp "custom" mà tương thích với tài liệu HTML4 và XHTML1 đã công bố trên Web, nhưng nó không tương thích với các tính năng riêng SGML của HTML4.
HTML5 không có quy tắc cú pháp chung như XHTML, như chúng ta cần các tên thẻ là chữ thường, trích dẫn các thuộc tính của nó, một thuộc tính phải có một giá trị và để đóng tất cả các phần tử trống. ( Thông tin thêm : thiết kế web bán hàng chuẩn seo )
Nhưng HTML5 có nhiều sự linh động hơn và sẽ hỗ trợ những điều sau:
Các tên thẻ chữ hoa
Trích dẫn là tùy ý cho các thuộc tính
Giá trị của thuộc tính là tùy ý
Đóng các phần tử trống là tùy ý
DOCTYPE
DOCTYPE trong các phiên bản HTML cũ là dài hơn bởi vì ngôn ngữ HTML là trên cơ sở SGML và vì thế cần tham chiếu tới một DTD.
Cú pháp đơn giản DOCTYPE trong HTML5 như sau:
<!DOCTYPE html>
Tất cả cú pháp trên là không phân biệt chữ hoa-chữ thường.
Mã hóa ký tự
HTML5 sử dụng cú pháp đơn giản để mã hóa ký tự như sau:
<meta charset="UTF-8">
Tất cả cú pháp trên là không phân biệt chữ hoa-chữ thường.
Thẻ <script>
Nó là thực tiễn phổ biến để thêm một thuộc tính type với một giá trị "type/javascript" để script các phần tử như sau:
<script type="text/javascript" src="scriptfile.js"></script>
HTML5 gỡ bỏ thông tin thêm được yêu cầu và bạn có thể sử dụng cú pháp đơn giản sau:
<script src="scriptfile.js"></script>
Thẻ <link>
Cho đến giờ, bạn đang viết thẻ <link> như sau:
<link rel="stylesheet" type="text/css" href="stylefile.css">
HTML5 gỡ bỏ thông tin thêm được yêu cầu và bạn có thể sử dụng cú pháp đơn giản sau:
<link rel="stylesheet" href="stylefile.css">
Các phần tử HTML5
Các phần tử HTML5 được đánh dấu bằng sử dụng các thẻ đóng và thẻ mở. Các thẻ được giới hạn trong các dấu ngoặc nhọn với tên thẻ ở giữa.
Sự khác nhau giữa thẻ mở và thẻ đóng là thẻ đóng bao gồm một dấu gạch chéo trước tên thẻ.
Sau đây là ví dụ về một phần tử HTML5:
<p>...</p>
Các tên thẻ HTML5 là không phần biệt chữ hoa-chữ thường và có thể được viết trong kiểu chữ hoa hoặc kiểu hỗn hợp, mặc dù quy ước phổ biến nhất là chữ thường.
Hầu hết các phần tử chứa một số nội dung như <p>...</p> chứa một đoạn văn. Tuy nhiên một số phần tử bị cấm để chứa bất cứ nội dung nào và chúng được biết là các phần tử void. Ví dụ: br, hr, link, và meta, …
Truy cập vào link sau để có danh sách 2.jsp"%>
Các thuộc tính HTML5
Các phần tử có thể chứa các thuộc tính mà được sử dụng để thiết lập các thuộc tính đa dạng của một phần tử.
Một số thuộc tính được định nghĩa chung và có thể được sử dụng trong bất kỳ phần tử nào, trong khi thuộc tính khác chỉ được định nghĩa cho các phần tử riêng. Tất cả thuộc tính có một tên và một giá trị và trông giống như ví dụ sau.
Sau đây là ví dụ về thuộc tính HTML5 mà minh họa cách đánh dấu một phần tử div với một thuộc tính với tên class sử dụng một giá trị là "example":
<div class="example">...</div>
Các thuộc tính chỉ có thể được xác định trong thẻ mở, và không bao giờ được xác định trong thẻ đóng.
Các thuộc tính HTML5 là không phân biệt kiểu chữ và có thể được viết bởi chữ hoa hoặc kiểu hỗn hợp, mặc dù quy ước phổ biến nhất là chữ thường.
Bạn truy cập vào trang sau để quan sát danh sách đầy đủ Các thuộc tính HTML5.
Tài liệu HTML5
Các thẻ sau đã được giới thiệu cho cấu trúc tốt hơn:
section: Thẻ này biểu diễn một khu vực tài liệu hoặc một ứng dụng chung. Nó có thể được sử dụng cùng với h1-h6 để chỉ cấu trúc tài liệu.
article: Thẻ này biểu diễn một phần độc lập của nội dung tài liệu, như là một Blog Entry hoặc bài báo.
aside: Thẻ này biểu diễn một phần nội dung mà chỉ hơi liên quan tới phần còn lại của trang.
header: Thẻ này biểu diễn Header của một khu vực.
footer: Thẻ này biểu diễn một Footer cho một khu vực và có thể chứa thông tin về tên tác giả, thông tin bản quyền, …
nav: Thẻ này biểu diễn một khu vực tài liệu được dự định để điều hướng.
dialog: Thẻ này có thể được sử dụng để đánh dấu một cuộc hội thoại.
figure: Thẻ này có thể được sử dụng để liên kết một phụ đề cùng với một số nội dung được nhúng, như đồ họa hoặc video. ( Thông tin thêm : dịch vụ thiết kế web tối ưu seo chuyên nghiệp )
Đánh dấu một tài liệu HTML5 sẽ trông giống như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
Phần sau ad sẽ giới thiệu phần nâng cao nhớ đón xem nhé !