HTML5 là gì?
HTML5 là sự phát triển kế tiếp của các phiên bản HTML cũ (HTML4 và XHTML) với nhiều đặc trưng mới, cải tiến những đặc trưng đã tồn tại và sử dụng giao diện lập trình ứng dụng (API). Một số đặc trưng mới trong HTML5 là:
- Cung cấp các phần tử đánh dấu (markup elements) mới giàu ngữ nghĩa (semantic) như section, header, footer, article, v.v…làm cho tài liệu có thể được truy cập dễ dàng bởi người và máy, dẫn đến tối ưu hoá truy cập và tìm kiếm.
- Hỗ trợ công nghệ mới và giao diện lập trình ứng dụng như đồ hoạ (SVG, CANVAS), video, audio, tính năng kéo – thả, …cho thiết kế ứng dụng web.
Cấu trúc trang HTML5
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> </title> </head> <body> …… </body> </html>
- Doctype: khai báo kiểu tài liệu. Chú ý rằng ở đây không có số 5, vì HTML5 không phải là một phiên bản HTML mà nó đại diện cho sự tiến hoá của các tiêu chuẩn HTML trước đó – hay nó là nền tảng web hiện tại (web platform). Các trình duyệt web phải hỗ trợ tất cả nội dung tồn tại trên web nên không cần chỉ rõ đặc trưng nào được hỗ trợ trong một trang đã cho.
- Html: là phần tử mở đầu và kết thúc trong một trang HTML. Thuộc tính lang dùng để chỉ ngôn ngữ dùng trong trang (en là dùng tiếng Anh).
- Head: chứa các thông tin hỗ trợ thêm trong tài liệu HTML như tiêu đề trang, mã kí tự,…
- Meta: dùng khai báo mã kí tự qua thuộc tính charset (dùng phổ biến là utf-8, có thể xem thêm thông tin về mã kí tự tại http://www.w3.org/TR/html-markup/syntax.html#character-encoding). Meta dùng trong thẻ head.
- Title: định nghĩa tiêu đề trang và dùng trong head.
- Body: chứa nội dung trang.
Một số chú ý khi dùng HTML5
Không cần dùng thuộc tính type khi muốn liên kết tài nguyên bên ngoài như CSS, JavaScript bằng các thẻ <link>, <script>. Ví dụ trong HTML4 hay XHTML ta viết:
<link href="foo.css" rel="stylesheet" type="text/css"> <script src="foo.js" type="text/javascript"></script>
Trong HTML5 ta viết như sau:
<link href="foo.css" rel="stylesheet" > <script src="foo.js" ></script>
HTML5 cũng rất thoải mái trong việc viết hoa hay thường, các gia trị chuỗi trong các thuộc tính hay đóng thẻ. Do đó, 3 trường hợp sau đều hợp lệ trong HTML5:
<img src=foo.png> <img src=foo.png /> <IMG SRC="foo.png"/>
Tuy nhiên, nếu việc bỏ thuộc tính type trong <link> hay <script> khiến chúng ta viết code nhẹ nhàng hơn, thì trong trường hợp với thẻ <img> chúng ta nên dùng lại tiêu chuẩn HTML trước đó để làm đoạn code sáng sủa, dễ đọc. Như vậy, với img, chúng ta nên viết:
<img src="foo.png"/>
Một tiện ích khác trong HTML5 hỗ trợ các nhà thiết kế web là việc không cần cung cấp giá trị cho các thuộc tính luận lý (boolean attriutes) – các thuộc tính chỉ có giá trị true hoặc false – khi các thuộc tính này nhận giá trị true. Ví dụ thuộc tính checked của input checkbox nhận giá trị true sẽ được viết như sau trong HTML4 hay XHTML:
<input type="checkbox" checked="checked">
Trong HTML5:
<input type="checkbox" checked>
Cấu trúc của một trang
Nhìn chung, các trang web sẽ có cấu trúc như sau:
Header: là vùng chứa nội dung giới thiệu hay hỗ trợ tìm kiếm nội dung trang,…và thường đặt đầu trang hay đầu mỗi chuyên đề nào đó (section). Trong HTML4 hay XHTML chúng ta dùng <div id=”header“ >, trong HTML5 chúng ta dùng <header>.
Nav: là vùng chứa các liên kết điều hướng đến các nội dung trong site (thanh điều hướng). Vùng này được định nghĩa trong HTML5 bởi thẻ <nav>.
Section: là vùng chứa nội dung liên quan một chuyên đề như kinh doanh, giải trí, giáo dục, v.v… Vùng này được định nghĩa trong HTML5 bởi thẻ <section>.
Article: ý nghĩa vùng này hơi giống section nên đôi khi gây nhầm lẫn, nhưng, nếu section chứa nội dung có tính chuyên đề và liên quan đến nội dung cả website thì, article chứa nội dung có tính độc lập với nội dung tổng thể của website – nghĩa là có thể được dùng lại trên một website khác mà không cần chỉnh sửa. Article có thể dùng cho các bài viết trên blog, diễn đàn, các bài trên báo, tạp chí, v.v… Vùng này được định nghĩa trong HTML5 bởi thẻ <article>.
Aside: là vùng chứa một phần của toàn bộ nội dung website như một khối các liên kết điều hướng (bên cạnh thanh điều hướng trong vùng nav), thông tin quảng cáo hay sidebar. Vùng này được định nghĩa trong HTML5 bởi thẻ <aside>.
Footer: là vùng thường cuối trang, chứa nội dung liên quan thông tin bản quyền, tác giả hay tổ chức sở hữu website, các liên kết liên quan, v.v… Vùng này được định nghĩa trong HTML5 bởi thẻ <footer>.
Chú ý rằng, cấu trúc trang web trên chỉ là một trường hợp chung, đơn giản. Tuỳ theo nội dung, tính năng của website mà cấu trúc của nó sẽ khác nhau.
Phân loại nội dung
Trong các phiên bản cũ của HTML nội dung ít được quan tâm, chủ yếu hai dạng là inline (span, em, cite,…) hay block (như div). Nhưng khi ngôn ngữ HTML tiến hoá đến HTML5 thì vấn đề này cực kỳ quan trọng. Trong viễn cảnh HTML5, nội dung được phân loại thành các kiểu sau:
- Metadata content: đây là các nội dung không hiển thị trực tiếp trong trang nhưng ảnh hưởng đến cách thể hiện, phong cách và cung cấp một số thông tin hỗ trợ cho trang. Các phần tử dùng cho nội dung này như title, link, meta, style.
- Flow content: là các nội dung trong phần body của trang như header, footer, p.
- Sectioning content: là vùng nội dung chuyên biệt có thể chứa đầy đủ các yếu tố như phần tiêu đề trang, chân trang, thanh điều hướng,…Các phần tử cho vùng nội dung này gồm aside, header, footer, section, article.
- Heading content: nội dung định nghĩa tiêu đề cho trang hay một vùng nội dung (section) nào đó. Bao gồm h1,…, h6 và phần tử mới là hgroup.
- Phrasing content: là kiểu nội dung phụ hay mô tả cho nội dung khác (giống inline. Các phần tử bao gồm strong, em, cite,…
- Embedded content: gồm các nội dung được nhúng vào trang như hình ảnh, video,…Các phần tử gồm img, object, embed, video, canvas,…
- Interactive content: là nội dung người dùng có thể tương tác như form, link,…
(có thể tham khảo chi tiết về các kiểu nội dung này tại https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#heading-content )
Cấu trúc nội dung
Khi đọc nội dung một trang web, chúng ta có thể hình dung ra cấu trúc của nó thông qua các phần tử h1, h2,…, h6. Ví dụ đoạn mã html sau:
<h1>Title</h1> ⋮ <h2>Subtitle</h2> ⋮ <h3>Another level</h3> ⋮ <h2>Another subtitle</h2>
Với đoạn mã này, chúng ta có thể dễ dàng thấy được cấu trúc nó như sau:
Tuy nhiên, với cách viết như trên, việc dùng chúng cho mục đích dùng lại ở những trang khác hay chia sẻ trong nhóm làm việc sẽ không hiệu quả. Trong HTML5, một thuật toán được tạo ra để tự động cấu trúc nội dung một cách hiệu quả cho việc chia sẻ và sử dụng lại. Để dễ hình dung, đoạn mã HTML ví dụ trên sẽ được viết lại trong HTML5 như sau:
<section> <h1>Title</h1> ⋮ <article> <h1>Article Title</h1> ⋮ <h2>Article Subtitle</h2> ⋮ </article> <article> <h1>Another subtitle</h1> ⋮ </article> </section>
Như vậy, với cách thể hiện mới này, nội dung, thay vì bố trí dàn trải, sẽ được chia thành những nội dung nhỏ hơn (section chứa các article) hay một cấu trúc lớn được chia thành những cấu trúc nhỏ hơn.
Phần tử hgroup
Định nghĩa các tiêu đề trong một nhóm (ví dụ một tiêu đề chính và 1 tiêu đề phụ) và các tiêu đề trong nhóm này sẽ độc lập các tiêu đề khác. Điều này làm tăng tính ngữ nghĩa đối với các phần mềm người dùng (user agents) hay cỗ máy tìm kiếm (search engine). Xét ví dụ hai tiêu đề sau:
<h1>Title</h1> <h2>Subtitle</h2>
Nếu chúng ta viết như trên, các user agent hay search engine (như Google) sẽ hiểu đây là hai tiêu đề độc lập. Tuy nhiên, nếu chúng ta viết lại như sau:
<hgroup> <h1>Title</h1> <h2>Subtitle</h2> </hgroup>
Lúc này, các user agents hay search engine sẽ hiểu đây là hai tiêu đề trong cùng một khối hay nhóm và có một tiêu đề chính (h1), một tiêu đề phụ (h2).
Hai cách viết này nếu thực thi trên browsers sẽ cho hiển thị cùng một nội dung đối với người xem, nhưng với các user agents hay search engine là một trời cách biệt.
Phần tử figure và figcaption
Cũng giống như hgroup (và nhiều phần tử khác trong HTML5), figure và figcaption góp phần tăng tính ngữ nghĩa đối với user agents hay search engine.
Figure chứa các nội dung mang tính minh hoạ, giải thích cho nội dung của trang. Các nội dung trong figure có thể là hình ảnh, sơ đồ, các đoạn mã, văn bản, v.v… Nội dung trong figure quan hệ chặt chẽ với nội dung chính của trang, nếu thiếu nó thì nội dung trong trang không thể hiểu được.
Figcaption dùng để định nghĩa tiêu đề (caption) cho phần nội dung trong figure.
Ví dụ cách dùng figure và figcaption:
<article> <hgroup> <h1>HỌC HTML5</h1> <h2>Miễn phí, nhanh chóng, hiệu quả.</h2> </hgroup> <p>Ngôn ngữ HTML có nhiều phiên bản khác nhau. </p> <p>Bạn có thể xem <a href="#lichsu">lịch sử HTML</a>, <figure id="lichsu"> <figcaption>Lịch sử phát triển HTML</figcaption> <img src="HTMLfig.png" alt="Lịch sử HTML"> </figure> </article>
Phần tử mark
Đánh dấu (highlight) các phần quan trọng hay cần làm nổi bật trong văn bản. Mặc định, nội dung được định nghĩa bởi mark có màu chữ là đen và màu nền là vàng. Ví dụ:
<p>Chào mừng đến với <mark>HTML5</mark></p>
Phần tử progress
Dùng để mô tả trạng thái hoàn thành hiện tại của một công việc nào đó như sao chép tập tin, tải một tập tin, v.v… Phần tử này thường dùng kết hợp với các thuộc tính như min (giá trị nhỏ nhất), max (giá trị lớn nhất), và value (giá trị hiện tại). Ví dụ:
<h1>Your Task is in Progress</h1> <p>Status: <progress min="0" max="100" value="0"><span>0</span></progress></p>
Nếu thay giá trị của value thành 15 thì kết quả >
Phần tử progress cần dùng kết hợp với các đoạn mã JavaScript để tạo hiệu ứng thay đổi các trạng thái. Tham khảo minh hoạ đơn giản kết hợp progress và JavaScript:
<!DOCTYPE html>
<html>
<body>
Đang tải tập tin. . . .
<progress id="myProgress" value="22" max="100">
</progress>
<p>Nhấp chuột vào nút Try it để thay đổi giá trị của thuộc tính value, cụ thể là 75.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myProgress").value = "75";
}
</script>
</body>
</html>
Phần tử meter
Ý nghĩa cũng tương tự progress, chỉ khác là meter dùng mô tả trạng thái với giá trị cao nhất biết trước, trong khi progress không cần quan tâm đến giá trị cao nhất. Dùng progress khi cần thể hiện sự thay đổi các trạng thái (động), trong khi meter thể hiện trạng thái hoàn thành (tĩnh). Ví dụ dùng meter là thể hiện dung lượng đĩa hiện tại như đoạn mã sau:
<p>Total current disk usage: <meter value="63" min="0" max="320" low="10" high="300" optimun="250" title="gigabytes">63 GB</meter>
Meter có các phần tử min, max, low (giá trị thấp tuỳ vào ngữ cảnh), high (giá trị cao tuỳ vào ngữ cảnh), value, và optimun là giá trị lý tưởng. Trong ví dụ trên, dung lượng tối đa của đĩa là 320, nếu dung lượng đĩa sử dụng khoảng 10GB trở xuống là thấp, nếu dùng trên 300GB là cao, dung lượng dùng lý tưởng là 250GB. Ta có thể lập trình (JavaScript hay jQuery) cho meter thể hiện các màu sắc quy ước khác nhau thể hiện các trạng thái như thấp, cao, lý tưởng. Tham khảo đoạn mã sau:
<!DOCTYPE html>
<html>
<body>
<p>Nhấn vào button Try it để tạo một meter.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.createElement("METER");
x.setAttribute("min", "0");
x.setAttribute("max", "100");
x.setAttribute("value", "75");
x.setAttribute("low", "10");
x.setAttribute("high", "85");
x.setAttribute("optimun", "75");
document.body.appendChild(x);
}
</script>
</body>
</html>
Nhập value = 5 và kết quả
Nhập value = 89
Phần tử time
Hỗ trợ ngữ nghĩa cho các cỗ máy tìm kiếm (search engine) như Bing hay Google. Trong trường hợp không dùng time, người xem có thể hiểu được nhưng máy tìm kiếm thì không thể hiểu, ví dụ:
<p>Hội thảo sẽ khai mạc vào ngày 03 tháng 12 năm nay.</p>
Có thể thêm time vào đoạn mã trên để giúp máy tìm kiếm có thể hiểu được như sau:
<p>Hội thảo sẽ khai mạc vào <time datetime="2016-12-03">ngày 12 tháng 12 năm nay.</p>
Nhập thời gian vào thuộc tính datetime theo định dạng YYYY-MM-DD. Có thể kết hợp giờ vào thuộc tính datetime, ví dụ thay đổi nội dung và thêm time vào ví dụ trên như sau:
<p>Hội thảo sẽ khai mạc vào <time datetime="2016-12-03T08:00:00.014Z">8 giờ ngày 12 tháng 12 năm nay.</p>
Chữ T cho máy tìm kiếm biết bắt đầu giờ. Định dạng cho giờ là HH:MM:SS và giờ giấc thường theo múi giờ (time zone) UTC và thể hiện bằng chữ Z cuối cùng. Số mili giây có thể được thể hiện sau dấu chấm thập phân (.014 ở ví dụ trên). Có thể thể hiện sự chênh lệch múi giờ giữa các vùng miền (time zone offset) bằng cách kết hợp dấu + hay -, ví dụ thông báo sau ở Việt Nam là 8 giờ nhưng người xem ở Malaysia là 9 giờ:
<p>Hội thảo sẽ khai mạc vào <time datetime="2016-12-03T08:00:00.014Z + 01:00">8 giờ ngày 12 tháng 12 năm nay.</p>
Time cũng hỗ trợ thuộc tính pubdate để thông báo thời gian xuất bản sách, tạp chí,… Rất hữu ích cho các website kinh doanh về sách hay tạp chí.
Một vài lưu ý khi dùng time:
- Không dùng time khi thời gian là không rõ ràng, ví dụ thời tiền sử, kỉ băng hà,…
- Không dùng thời gian BC hay BCE (trước Công Nguyên), chỉ dùng Tây lịch (Gregorian Calendar).
- Đúng định dạng quy ước.
- Nếu không dùng thuộc tính datetime trong time thì phải viết chuỗi thời gian đúng định dạng quy ước trong phần nội dung.
Các phần tử tồn tại sẵn nhưng định nghĩa lại về ngữ nghĩa
Phần tử deprecate và obsolete
Trong các phiên bản HTML cũ, có sự tồn tại của các phần tử deprecate, tức là các phần tử được khuyên không nên dùng vì có thể bị xoá trong tương lai. Trong HTML5, không có phần tử deprecate, chỉ có phần tử obsolete (lỗi thời). Điểm khác biệt là phần tử deprecate có thể bị xoá trong tương lai, còn phần tử obsolete thì không bị xoá.
(xem thêm tại https://www.w3.org/TR/html401/conform.html#deprecated)
Phần tử a và các phần tử mức khối (block level)
Trong các phiên bản trước, phần tử a không được phép chứa các phần tử mức khối (ví dụ div), ví dụ:
<div class="story"> <h3><a href="story1.html">Bruce Lawson voted sexiest man on Earth</a></h3> <p><a href="story1.html"><img src="bruce.jpg" alt="full story. " />A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</a></p> <p><a href="story1.html">Read more</a></p> </div>
Trong HTML5 chúng ta được phép dùng a chứa các phần tử block. Đoạn mã sau đây là hợp lệ trong HTML5:
<article> <a href="story1.html"> <h3>Bruce Lawson voted sexiest man on Earth</h3> <p><img src="bruce.jpg" alt="gorgeous lovebundle. ">A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p> <p>Read more</p> </a> </article>
Phần tử in đậm
Trong các phiên bản HTML trước, hai phần tử dùng để in đậm văn bản là b và strong. Cả hai đều làm cho đoạn văn bản in đậm trước người xem, nhưng strong có thêm ngữ nghĩa (đối với search engine) nhấn mạnh sự quan trọng cho đoạn văn bản. Trong HTML5, b cũng được định nghĩa lại là phần văn bản in đậm nhưng không quan trọng và strong nhấn mạnh tầm quan trọng.
Phần tử in nghiêng
Cũng giống như in đậm, in nghiêng văn bản cũng có hai phần tử là i và em. HTML5 định nghĩa phần tử i dùng để in nghiêng đoạn văn bản nhưng không nhấn mạnh tính quan trọng (về ngữ nghĩa), em in nghiêng và nhấn mạnh (về ngữ nghĩa).
big và small
Phần tử big dùng để định nghĩa văn bản hiển thị với font lớn và small định nghĩa văn bản hiển thị với font nhỏ. Trong HTML5, big không còn được dùng nữa (phần tử obsolete), còn small thì được định nghĩa lại về ngữ nghĩa chỉ dùng cho văn bản ngắn như dòng bản quyền ở footer của các website (như © 2016 ngocminhtran.com) và vẫn hiển thị văn bản với font nhỏ.
Cite
Phần tử cite trong phiên bản HTML4 cho phép thể hiện một trích dẫn hay một tham chiếu đến nguồn tài nguyên khác. Lúc này, cite cho phép tên của một cá nhân được gộp vào thông tin của cite. Trong HTML5, cite vẫn có vai trò như cũ nhưng không cho phép đính kèm tên cá nhân vào thông tin của cite.
Danh sách mô tả (description list)
Một danh sách mô tả được định nghĩa bởi các phần tử dl, dt, và dd. Trong các phiên bản HTML trước, dl được cho phép đánh dấu các đoạn hội thoại (dialogue), nhưng đến HTML5, điều này không được phép. Danh sách mô tả có thể được dùng để đánh dấu bất cứ nội dung tổ chức theo cặp tên – giá trị như thuật ngữ – mô tả, siêu dữ liệu (dữ liệu về dữ liệu) – giá trị, câu hỏi – câu trả lời.
Một số phần tử và thuộc tính mới
Details
Là phần tử mới trong HTML5. Cho phép định nghĩa ẩn một phần thông tin và cho phép mở rộng để xem thông tin đó khi cần. Ví dụ đoạn mã sau:
<!DOCTYPE html> <html> <body> <details> <summary>Copyright 1999-2014.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details> <p><b>Note:</b> The details tag is not supported in Internet Explorer.</p> </body> </html>
Nếu nhấp vào dấu mũi tên đen, kết quả:
Thuộc tính reversed cho ol
Danh sách thứ tự được định nghĩa bởi phần tử ol. Trong HTML5, ol được hỗ trợ thêm thuộc tính reversed, cho phép đảo ngược thứ tự. Ví dụ đoạn mã sau:
<ol > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Kết quả:
Thêm thuộc tính reversed
<ol reversed> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Kết quả:
Chú ý: reversed không hỗ trợ bởi IE, Safari.
Thuộc tính scoped cho style
Là thuộc tính mới trong HTML5 và hiện tại chỉ có FireFox hỗ trợ. Nếu dùng phần tử style với thuộc tính scoped thì các khai báo định dạng của nó chỉ tác dụng đến phần tử cha và con của nó, không phải toàn bộ tài liệu. Ví dụ đoạn mã sau (lưu ý dùng trên FireFox):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:green;}
p {color:black;}
</style>
</head>
<body>
<div>
<style scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>Đoạn này có màu đỏ (red) vì là con của div</h1>
<p>Đoạn này có màu blue vì là con của div</p>
</div>
<h1>Đoạn này màu green</h1>
<p>Đoạn này màu black</p>
</body>
</html>
Thuộc tính async cho script
HTML5 cung cấp thêm thuộc tính async cho phần tử script. Đây là thuộc tính boolean (nhận một trong hai giá trị true hay false) cho phép đoạn script sẽ load ngay khi hợp lệ mà không làm trì hoãn hay ảnh hưởng quá trình load của trang.
Trần Ngọc Minh Notes 
Ý kiến bài viết