HTML 5 không có các quy tắc cú pháp tương tự như XHTML nơi chúng cần tên thẻ viết thường, trích dẫn các thuộc tính của chúng, thuộc tính phải có giá trị và đóng tất cả các phần tử trống.
Nhưng HTML5 mang nhiều tính linh hoạt và hỗ trợ các nội dung sau:
- Tên thẻ chữ hoa.
- Dấu ngoặc kép tùy chọn cho các thuộc tính.
- Giá trị thuộc tính là tùy chọn.
- Đóng các phần tử trống nào là tùy chọn.
DOCTYPE:
Doctypes trong phiên bản cũ của HTML là còn bởi vì ngôn ngữ HTML là cở sở SGML và do đó yêu cầu tham chiếu đến DTD.
HTML 5 sẽ sử dụng cú pháp đơn giản để xác định DOCTYPE như sau:
<!DOCTYPE html>
Cú pháp ở trên là trường hợp nhạy cảm.
Character Encoding:
HTML 5 có thể sử dụng cú pháp đơn giản để xác định Mã hoá Ký tự như sau:
<meta charset="UTF-8">
Tất cả các cú pháp ở trên là trường hợp nhạy cảm.
Thẻ <script>:
Thực tế phổ biến để thêm loại thuộc tính với giá trị "text/javascript" đến các phần tử script như sau:
<script type="text/javascript" src="scriptfile.js"></script>
HTML 5 loại bỏ các thông tin bổ sung cần thiết và bạn có thể sử dụng cú pháp đơn giản sau đây:
<script src="scriptfile.js"></script>
Thẻ <link>:
Như trên, thay vì viết <link> như sau:
<link rel="stylesheet" type="text/css" href="stylefile.css">
HTML 5 loại bỏ các thông tin bổ sung cần thiết và bạn có thể sử dụng cú pháp đơn giản sau đây:
<link rel="stylesheet" href="stylefile.css">
Phần tử HTML 5:
Phần tử HTML5 được đánh dấu bằng cách sử dụng các thẻ bắt đầu và thẻ kết thúc. Thẻ được giới hạn sử dụng dấu ngoặc góc với tên thẻ ở giữa.
Sự khác biệt giữa các thẻ bắt đầu và thẻ kết thúc bao gồm một dấu gạch chéo trước tên thẻ.
Sau đây là ví dụ phần tử HTML5:
<p> ... </ p>
Tên thẻ HTML5 là trường hợp nhạy cảm và có thể được viết trong tất cả các trường hợp chữ hoa hoặc 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ử có chứa một số nội dung như <p> ... </ p> chứa đoạn văn. Một số phần tử bị cấm không được chứa bất kỳ nội dung nào và chúng được gọi là các phần tử void. Ví dụ, br, hr, link và meta ...
Đây là danh sách đầy đủ của phần tử HTML5
Thuộc tính HTML5:
Các phần tử có thể chứa các thuộc tính được sử dụng để thiết lập các thuộc tính khác của phần tử.
Một số thuộc tính được định nghĩa trên toàn cục và có thể được sử dụng trên phần tử bất kỳ. Tất cả các thuộc tính có tên và giá trị và trông giống như bên dưới.
Sau đây là ví dụ về một thuộc tính HTML5 minh họa làm thế nào để đánh dấu phần tử div với thuộc tính tên là lớp sử dụng giá trị "example":
<div class="example">...</div>
Thuộc tính chỉ có thể được xác định trong thẻ bắt đầu và không bao giờ được sử dụng trong các thẻ kết thúc.
HTML5:
- section: Thẻ này đại diện cho tài liệu chung chung hoặc phần ứng dụng. Nó có thể được sử dụng cùng với các thẻ h1-h6 để chỉ ra cấu trúc tài liệu.
- article: Thẻ này đại diện cho phần độc lập nội dung của tài liệu, chẳng hạn như entry blog hay bài báo.
- aside: Thẻ này đại diện cho phần nội dung được chỉ hơi liên quan đến phần còn lại của trang.
- header: Thẻ này đại diện cho tiêu đề của section.
- footer: Thẻ này đại diện cho footer và có thể chứa thông tin về tác giả, thông tin bản quyền,...
- nav: Thẻ này đại diện cho phần của tài liệu dành cho việc điều hướng.
- dialog: Thẻ này có thể được sử dụng để đánh dấu hộp thoại.
- figure: Thẻ này có thể được sử dụng để kết hợp chú thích cùng với một số nội dung nhúng, như hình ảnh hoặc video.
Ví dụ về cách bố trí các thẻ của HTML 5:
<!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>