I. Mục tiêu:

• Giới thiệu tổng quan về HTML5;
• Biết được những thành phần HTML được cập nhật và những thành phần mới trong HTML5;
• Biết sử dụng một số thành phần HTML5.

II. Nội dung:

1. Tổng quan HTML5

HTML5 là chuẩn mới nhất của HTML, nó có các đặc điểm:

• Cập nhật một số thành phần HTML
• Có các thành phần và thuộc tính HTML mới (các thành phần HTML5)
• Hỗ trợ đầy đủ CSS3 (chuẩn mới nhất của CSS)
• Có thành phần video và audio
• Hỗ trợ đồ họa 2D/3D
• Lưu trữ cục bộ (local storage)
• Cơ sở dữ liệu SQL cục bộ (local SQL database)

HTML5 được tạo ra để đáp ứng cho sự phát triển web mạnh mẽ hiện nay, hướng đến một khái niệm web mới – web ngữ nghĩa (sematic web). Nên trọng điểm cải tiến các thành phần HTML ở chuẩn mới này là tạo ra các thẻ mang ngữ nghĩa nhiều hơn để bố cục một tài liệu HTML một cách rõ ràng hơn.

2. Các thành phần HTML được cập nhật

2.1. Cập nhật khai báo

2.1.1. <!doctype>

Khai báo <!doctype> mà chúng ta đã được học ở bài trước là mặc định khai báo kiểu tài liệu là HTML5.

Ví dụ một số cách khai báo kiểu tài liệu HTML4.

2.1.2. <meta>

Thẻ <meta> mà ta được học ở bài trước cũng đã được định nghĩa theo cú pháp của HTML5 (đã lược bớt một số thuộc tính không cần thiết). Xem ảnh minh họa để thấy được sự gọn gàng trong việc khai báo thẻ meta ở chuẩn HTML5.

2.1.3. <script>

Tương tự như vậy, trong khai báo thẻ <script> ở HTML5 cũng đã được lược bớt thuộc tính type không cần thiết.

2.1.4. <link>

Một lần nữa, HTML5 đã lược bỏ thuộc tính type ở thẻ <link>.

2.2. Cập nhật ngữ nghĩa

Các thẻ định dạng văn bản: thẻ <i>, <b>, <em>, <strong> được bổ sung thêm một số ngữ nghĩa mới.

2.2.1. <i></i>

Trong HTML4, thẻ <i> (italic) là thành phần định kiểu chữ in nghiêng.

Trong HTML5, thẻ <i> thể hiện nội dung với “alternate voice” hoặc “mood”.

Một số ví dụ trường hợp sử dụng thẻ <i>:

• Tên loài (Taxonomic designation)
• Thuật ngữ kỹ thuật (Technical term)
• Cụm thành ngữ từ ngôn ngữ khác (Idiomatic phrase from another language)
• Phiên dịch (Transliteration)
• Một suy nghĩ (Thought)
• Tên tàu trong các văn bản phương Tây (Ship name in Western texts)

2.2.2. <b></b>

Trong HTML4, thẻ <b> (bold) là thành phần định kiểu chữ in đậm.

Trong HTML5, thẻ <b> thể hiện nội dung với “stylistically offset”.

Một số ví dụ trường hợp sử dụng thẻ <b>:

• Từ khóa trong phần tổng quan của tài liệu (Key words in a document abstract)
• Các tên sản phẩm trong một bài đánh giá (Product names in a review)
• Các chữ mang hành động trong các phần mềm tương tác định hướng văn bản (Actionable words in interactive text-driven software)
• Phần dẫn dắt bài viết (Article lead)

2.2.3. <em></em>

Trong HTML4, thẻ <em> (emphasis) mang nghĩa nhấn mạnh (emphasis).

Trong HTML5, thẻ <em> mang nghĩa mới là đặc biệt nhấn mạnh (stress emphasis).

2.2.4. <strong></strong>

Trong HTML4, thẻ <strong> mang nghĩa nhấn mạnh (strong emphasis).

Trong HTML5, thẻ <strong> mang nghĩa mới là rất quan trọng (strong importance).

3. Các thành phần HTML5:

3.1. Các thẻ gom nhóm:

Các thẻ này có chức năng tương tự như thẻ <div> đã nói ở bài trước. Có thể nói những thẻ này là phiên bản nâng cấp của thẻ <div> bởi chúng thực chất là thẻ <div> mang ngữ nghĩa cụ thể giúp ta phân đoạn tài liệu HTML một cách rõ ràng hơn, tiện lợi và đầy ngữ nghĩa để ta dễ dàng hiểu được bố cục khi đọc tài liệu HTML.

3.1.1. <section></section>

Theo định nghĩa của W3C (World Wide Web Consortium) – tổ chức tiêu chuẩn quốc tế chính cho www, thành phần section thể hiện một phân đoạn chung trong một tài liệu hay một ứng dụng.

Hay nói cách khác, thẻ <section> là một thẻ <div> mang ngữ nghĩa, được dùng để nhóm các nội dung liên quan (theo chủ đề) lại với nhau.

Hình sau minh họa các nội dung có liên quan với nhau:

Để gom nhóm các nội dung này ta có thể làm như sau:

Các bạn có thể thấy với sự hỗ trợ của HTML5, việc phân đoạn tài liệu HTML rõ ràng, dễ hiểu hơn với thẻ <section>.

• Để đảm bảo đúng ngữ nghĩa của thẻ <section>, khi sử dụng thẻ này ta cần cân nhắc xem các nội dung có liên quan với nhau không.
• Các thành phần HTML5 sau có outline riêng của mình:
  • Article
  • Aside
  • Nav
  • Section

Ví dụ:

Cả hai cách khai báo tiêu đề <h1> và <h2> bên trong <section> đều cho ra kết quả như sau:

3.1.2. <header></header>

Theo định nghĩa W3C, thành phần header thể hiện một nhóm các hỗ trợ giới thiệu hoặc điều hướng.

Có thể có nhiều header khác nhau trong một trang.

Thường xuất hiện trên đầu tài liệu hoặc phân đoạn, tuy nhiên nó được xác định bởi nội dung của nó hơn là vị trí của nó.

Hình minh họa header của một trang web:

Tài liệu HTML định nghĩa đoạn header:

Ví dụ tài liệu HTML đoạn header trong section:

3.1.3. <footer></footer>

Theo định nghĩa của W3C, thành phần footer thể hiện cho một footer của nội dung phân đoạn hoặc thành phần phân đoạn gần nhất.

Giống như header, thành phần footer không phụ thuộc vào vị trí. Nó nên mô tả cho nội dung chưa nó.

Hình minh họa footer của một trang web:

Tài liệu HTML định nghĩa đoạn footer:

Ví dụ tài liệu HTML đoạn footer trong section:

3.1.4. <aside></aside>

Ban đầu, HTML5 định nghĩa thành phần aside là “quan hệ tiếp giáp với các nội dung xung quanh mình”.

Bây giờ thành phần aside bao phủ nhiều ngữ cảnh:

• Khi được sử dụng bên trong thành phần article, nội dung của aside phải liên quan đến article đó.
• Khi được sử dụng bên ngoài thành phần article, nội dung aside phải đặc biệt liên quan đến trang web.

Một thành phần aside phù hợp khi nó được dùng để thể hiện nội dung không phải là trọng tâm chính của bài viết hay trang web, nhưng nội dung đó vẫn liên quan đến bài viết hay trang web đó.

Hình minh họa aside của một trang web:

Tài liệu HTML định nghĩa đoạn aside:

Ví dụ tài liệu HTML đoạn aside trong section:

3.1.5. <nav></nav>

Theo định nghĩa của W3C, thành phần nav (major navigation) thể hiện một đoạn của một trang mà nó liên kết đến những trang khác hoặc những phần khác trong trang đó: một phân đoạn với các liên kết điều hướng.

Hình minh họa navigation của một trang web:

Tài liệu HTML định nghĩa đoạn nav:

3.1.6. <article></article>

Theo định nghĩa của W3C, thành phần article thể hiện một thành phần hoàn chỉnh (hay khép kín) trong một tài liệu, trang web hay ứng dụng và theo nguyên tắc thì nó có thể được phân phối hoặc tái sử dụng một cách độc lập.

Thành phần article là một loại section. Nó được dùng cho nội dung hoàn chỉnh.

Một số ví dụ trường hợp sử dụng thẻ <article>:

• Một bài đăng trên blog
• Một mẩu tin tức
• Một bình luận trên một bài đăng
• Một bài đánh giá

Hình minh họa một article trong một trang web:

Tài liệu HTML định nghĩa đoạn article:

3.1.7. <main></main>

Theo định nghĩa của W3C, thành phần main thể hiện nội dung chính của phần thân của một tài liệu hoặc ứng dụng.

Và cũng theo W3C, vùng nội dung của main bao gồm các nội dung liên quan trực tiếp hoặc mở rộng dựa trên chủ đề chính của một tài liệu hoặc chức năng chính của một ứng dụng.

Lưu ý:

• Không chứa nhiều hơn một thành phần main trong một tài liệu
• Không chứa thành phần main trong một thành phần article, aside, footer, header, nav.

Hình minh họa nội dung main trong một trang web:

Tài liệu HTML định nghĩa đoạn main:

3.2. <figure></figure>

Theo W3C, thành phần figure thể hiện một đơn vị của nội dung (có thể có caption) thường được tham chiếm như một đơn vị duy nhất từ mạch tài liệu, và có thể bỏ khỏi mạch tài liệu mà không làm ảnh hưởng đến nghĩa của tài liệu.

Thẻ <figure> thường được dùng cho một ảnh trong một article:

3.2.1 <figcaption></figcaption>

Theo W3C, thành phần figcaption (figure caption) thể hiện cho một caption hoặc legend của một figure.

Hình ảnh minh họa của figcaption:

3.3. <time></time>

Theo W3C, thành phần time thể hiện hoặc thời gian trên đồng hồ, hoặc ngày tháng trong lịch (có thể có thêm thời gian và múi giờ).

Hình ví dụ sử dụng thành phần time trong trang web:

Định nghĩa thẻ <time> trong tài liệu HTML:

Ta có thể sử dụng thuộc tính datetime để định dạng thời gian.

Lưu ý: Nếu không sử dụng thuộc tính datetime thì nội dung phải là ngày, giờ hợp lệ hoặc thời gian chính xác.

3.4. HTML5 Form:

HTML5 hỗ trợ việc tạo biểu mẫu mạnh mẽ hơn với các loại input mới, thành phần biểu mẫu mới và các thuộc tính mới.

3.4.1. Loại input mới

HTML5 cung cấp nhiều loại input mới:

• search
• email
• url
• tel
• number
• range
• date
• month
• week
• time
• datetime
• datetime-local
• color

Lưu ý: Các loại input này không được hỗ trợ đầy đủ ở các trình duyệt khác nhau. Nếu trình duyệt không hỗ trợ loại input thì nó sẽ chuyển về loại mặc định là text.

Để biết thêm thông tin về các loại input này và các trình duyệt hỗ trợ chúng, bạn có thể truy cập tại đây.

3.4.2. Các thành phần mới của biểu mẫu:

HTML5 cung cấp các thành phần biểu mẫu mới:

• Datalist
• Keygen
• Output

Ở đây ta chỉ nói đến thành phần thường được sử dụng là datalist. Bạn có thể tham khảo các thành phần khác của biểu mẫu tại đây.

3.4.2.1. <datalist></datalist>

W3C định nghĩa thành phần datalist định nghĩa một tập các thành phần option thể hiện các lựa chọn.

Các lựa chọn được khai báo bằng thẻ <option> với giá trị là thuộc tính value.

<option> không có thẻ đóng.

Kết quả của đoạn HTML trên sẽ tạo một một input kiểu text có mũi tên ở góc phải, và khi ta nhấn vào thì danh sách các option sẽ hiện ra, hoặc khi ta nhập ký tự vào input thì browser sẽ tìm kiếm trong danh sách option các giá trị khớp với nội dung nhập để hiển thị lên.

3.4.3. Các thuộc tính mới của biểu mẫu

HTML5 cung cấp nhiều thuộc tính của biểu mẫu:

• placeholder
• autofocus
• autocomplete
• required
• pattern
• list
• multiple
• novalidate
• formnovalidate
• form
• formaction
• formenctype
• formmethod
• formtarget

Ở bài này ta chỉ xem xét các thuộc tính placeholder, autofocus, required. Những thuộc tính còn lại bạn có thể tham khảo thêm tại đây.

3.4.3.1. Placeholder:

Thuộc tính placeholder cho phép bạn xác định một thông điệp hiển thị bên trong trường input, thông điệp ẩn đi khi người dùng bắt đầu nhập, và hiện trở lại nếu trường input vẫn còn trống và bị mất focus (Để con nháy đi chỗ khác).

Kết quả hiển thị placeholder trên trình duyệt:

3.4.3.2. Autofocus

Thuộc tính autofocus sẽ giúp tự động focus (đưa con nháy) vào trường input xác định khi trang web được nạp lên trình duyệt.

Trường input được focus khi trang web được hiển thị:

3.4.3.3. Required

Nếu bạn thêm thuộc tính required vào input, khi biểu mẫu được gửi đi (submit), người dùng sẽ nhận được thông báo lỗi nếu trường nhập còn trống.

Ảnh thông báo khi submit trường input required còn trống (kết quả trên Chrome 49.0):

3.5. HTML5 Video

Trước khi có HTML5, không có một chuẩn nào để hiển thị video trên trang web, video chỉ có thể được hiển thị bằng plug-in (như flash).

Thẻ HTML5 <video></video> quy định một phương thức chuẩn để nhúng một video vào một trang web.

Thuộc tính controls thêm trình điều khiển video như phát, tạm dừng và âm lượng.

Thuộc tính autoplay giúp video tự động phát khi trang web được nạp lên trình duyệt.

Thuộc tính kích thước width và height nên được thêm vào để trình duyệt biết kích thước của video. Nếu không có 2 thuộc tính này thì khi video được nạp lên thì trang web sẽ bị thay đổi (hay flicker).

Đoạn văn bản nằm giữa cặp thẻ <video> </video> chỉ hiển thị trên trình duyệt không hỗ trợ thành phần video.

Thẻ <source> dùng để xác định file video nguồn “src” và định dạng video “type”.

<source> không có thẻ đóng.

Nhiều thành phần source có thể liên kết đến nhiều tập tin video khác nhau. Trình duyệt sẽ sử dụng thẻ có định dạng video được nhận diện đầu tiên.

Hiện tại có 3 định dạng video được hỗ trợ: MP4, WebM và Ogg.

Kết quả hiển thị video trên trình duyệt:

3.6. HTML5 Audio

Cũng giống như video, phương pháp chuẩn để nhúng audio vào trang web chỉ có từ HTML5, bằng cách dùng thẻ <audio></audio>.

Các thuộc tính và cách hoạt động của thành phần audio tương tự như video.

Hiện nay có 3 định dạng tập tin âm thanh được hỗ trợ là: MP3, Wav, Ogg.

Hiển thị trình điều khiển audio trên trình duyệt:

H.T.T

III. Nguồn tham khảo:

[1]. https://www.codeschool.com

[2]. http://www.w3schools.com