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.

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>

Quảng cáo

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.

Đá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>

<!DOCTYPE html>

<html>

   <head>
      <meta cha