HTML5 - Cú pháp
Ngôn ngữ HTML 5 có cú pháp HTML "tùy chỉnh" tương thích với các tài liệu HTML 4 và XHTML1 được xuất bản trên Web, nhưng không tương thích với các tính năng SGML bí truyền hơn của HTML 4.
HTML 5 không có các quy tắc cú pháp giống như XHTML, nơi chúng tôi cần tên thẻ viết thường, trích dẫn các thuộc tính của chúng tôi, 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.
HTML5 đi kèm với rất nhiều tính linh hoạt và nó hỗ trợ các tính năng sau:
- Tên thẻ viết hoa.
- Trích dẫn là tùy chọn cho các thuộc tính.
- Giá trị thuộc tính là tùy chọn.
- Việc đóng các phần tử trống là tùy chọn.
LOẠI TÀI LIỆU
DOCTYPE trong các phiên bản HTML cũ hơn vì ngôn ngữ HTML dựa trên SGML và do đó yêu cầu tham chiếu đến DTD.
Các tác giả HTML 5 sẽ sử dụng cú pháp đơn giản để chỉ định DOCTYPE như sau:
<!DOCTYPE html>Cú pháp trên không phân biệt chữ hoa chữ thường.
Mã hóa ký tự
Tác giả HTML 5 có thể sử dụng cú pháp đơn giản để chỉ định Mã hóa ký tự như sau:
<meta charset = "UTF-8">Cú pháp trên không phân biệt chữ hoa chữ thường.
Thẻ <script>
Thực tế phổ biến là thêm thuộc tính type có giá trị là "text / javascript" vào các phần tử script như sau:
<script type = "text/javascript" src = "scriptfile.js"></script>HTML 5 loại bỏ thông tin bổ sung cần thiết và bạn có thể sử dụng cú pháp đơn giản sau:
<script src = "scriptfile.js"></script>Thẻ <link>
Cho đến nay bạn đã viết <link> như sau:
<link rel = "stylesheet" type = "text/css" href = "stylefile.css">HTML 5 loại bỏ thông tin bổ sung cần thiết và bạn có thể chỉ cần sử dụng cú pháp sau:
<link rel = "stylesheet" href = "stylefile.css">Phần tử HTML5
Các phần tử HTML5 được đánh dấu bằng thẻ bắt đầu và thẻ kết thúc. Các thẻ được phân tách bằng dấu ngoặc nhọn với tên thẻ ở giữa.
Sự khác biệt giữa thẻ bắt đầu và thẻ kết thúc là thẻ sau bao gồm dấu gạch chéo trước tên thẻ.
Sau đây là ví dụ về phần tử HTML5:
<p>...</p>Các tên thẻ HTML5 không phân biệt chữ hoa chữ thường và có thể được viết bằng tất cả chữ hoa hoặc chữ hoa hỗn hợp, mặc dù quy ước phổ biến nhất là gắn với 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 kỳ nội dung nào và chúng được gọi là phần tử trống. Ví dụ,br, hr, link, meta, Vân vân.
Đây là danh sách đầy đủ các Phần tử HTML5 .
Thuộc tính HTML5
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 nhau của một phần tử.
Một số thuộc tính được xác định trên toàn cục và có thể được sử dụng trên bất kỳ phần tử nào, trong khi những thuộc tính khác chỉ được xác định cho các phần tử cụ thể. Tất cả các thuộc tính đều có tên và giá trị và trông giống như hình bên dưới trong ví dụ.
Dưới đây là ví dụ về thuộc tính HTML5 minh họa cách đánh dấu phần tử div với thuộc tính có tên là lớp bằng cách sử dụng giá trị "example" -
<div class = "example">...</div>Các thuộc tính chỉ có thể được chỉ định trong thẻ bắt đầu và không bao giờ được sử dụng trong thẻ kết thúc.
Các thuộc tính HTML5 không phân biệt chữ hoa chữ thường và có thể được viết bằng tất cả chữ hoa hoặc chữ hoa hỗn hợp, mặc dù quy ước phổ biến nhất là gắn với chữ thường.
Đây là 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 để có cấu trúc tốt hơn:
section- Thẻ này đại diện cho một phần tài liệu hoặc ứng dụng chung. Nó có thể được sử dụng cùng với h1-h6 để chỉ ra cấu trúc tài liệu.
article - Thẻ này đại diện cho một phần nội dung độc lập của tài liệu, chẳng hạn như một mục blog hoặc bài báo.
aside - Thẻ này đại diện cho một phần nội dung chỉ liên quan một chút đến phần còn lại của trang.
header - Thẻ này đại diện cho tiêu đề của một phần.
footer - Thẻ này đại diện cho chân trang cho một phần và có thể chứa thông tin về tác giả, thông tin bản quyền, v.v.
nav - Thẻ này đại diện cho một phần của tài liệu dành cho điều hướng.
dialog - Thẻ này có thể được sử dụng để đánh dấu một cuộc trò chuyện.
figure - Thẻ này có thể được sử dụng để liên kết chú thích cùng với một số nội dung được nhúng, chẳng hạn như hình ảnh hoặc video.
Đánh dấu cho tài liệu HTML 5 sẽ 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 charset = "utf-8">
<title>...</title>
</head>
<body>
<header role = "banner">
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or Mozila.</p>
</header>
<nav>
<ul>
<li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li>
<li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li>
<li><a href = "https://www.tutorialspoint.com/javascript">
JavaScript Tutorial</a></li>
</ul>
</nav>
<article>
<section>
<p>Once article can have multiple sections</p>
</section>
</article>
<aside>
<p>This is aside part of the web page</p>
</aside>
<footer>
<p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p>
</footer>
</body>
</html>Nó sẽ tạo ra kết quả sau: