Tiêu chuẩn Ngôn ngữ đánh dấu siêu văn bản phiên bản 5 (Hypertext Markup Language 5 - HTML 5) 

Trong năm năm đầu tiên (1990-1995), Ngôn ngữ đánh dấu siêu văn bản (Hypertext Markup Language – HTML) đã trải qua một số phiên bản và một số phần mở rộng, chủ yếu được lưu trữ đầu tiên tại CERN (Tổ chức Nghiên cứu Hạt nhân châu Âu, viết tắt của Conseil Européen pour la Recherche Nucléaire), và sau đó tại IETF (Lực lượng chuyển trách về Kỹ thuật liên mạng, viết tắt của Internet Task Task Force)...

 I. Giới thiệu

          Trong năm năm đầu tiên (1990-1995), Ngôn ngữ đánh dấu siêu văn bản (Hypertext Markup Language HTML) đã trải qua một số phiên bản và một số phần mở rộng, chủ yếu được lưu trữ đầu tiên tại CERN (Tổ chức Nghiên cứu Hạt nhân châu Âu, viết tắt của Conseil Européen pour la Recherche Nucléaire), và sau đó tại IETF (Lực lượng chuyển trách về Kỹ thuật liên mạng, viết tắt của Internet Task Task Force). Đến nay, qua 17 năm phát triển, lịch sử phát triển của HTML được tóm lược và thông qua bảng 1 như sau:

    • Từ năm 1991 đến năm 1999, HTML được phát triển từ phiên bản 1 lên phiên bản 4.
    • Vào năm 2000, World Wide Web Consortium (W3C) đã đề xuất XHTML 1.0. Cú pháp XHTML rất nghiêm ngặt và các nhà phát triển buộc phải viết mã tuân thủ theo các nguyên tắc cú pháp này.
    • Năm 2004, W3C quyết định đóng cửa phát triển HTML, ủng hộ XHTML.
    • Năm 2004, WHATWG (Nhóm công nghệ ứng dụng Web Hypertext) đã được thành lập. WHATWG muốn phát triển HTML, phù hợp với cách web được sử dụng, trong khi tương thích ngược với các phiên bản HTML cũ hơn.
    • Trong năm 2004 - 2006, WHATWG đã nhận được sự hỗ trợ của các nhà cung cấp trình duyệt chính.
    • Năm 2006, W3C thông báo rằng họ sẽ hỗ trợ WHATWG.
    • Trong năm 2008, bản nháp HTML5 đầu tiên được phát hành.
  • Trong năm 2012, WHATWG và W3C đã quyết định chia tách:
    • WHATWG muốn phát triển HTML dưới dạng "Tiêu chuẩn sống". Tức là Tiêu chuẩn luôn được cập nhật và cải thiện. Có thể thêm các tính năng mới nhưng không thể xóa chức năng cũ. Tiêu chuẩn sống WHATWG HTML5 đã được xuất bản vào năm 2012 và được cập nhật liên tục.
    • W3C muốn phát triển một tiêu chuẩn HTML5 và XHTML chính xác. Đề xuất HTML5 của W3C đã được phát hành vào ngày 28 tháng 10 năm 2014. Khuyến nghị W3C HTML5.1 2nd Edition được phát hành vào ngày 3 tháng 10 năm 2017. Khuyến cáo W3C HTML5.2 đã được phát hành ngày 14/12/2017.

STT

Năm

Phiên bản

1

1989

Tim Berners-Lee đã phát minh ra www

2

1991

Tim Berners-Lee đã phát minh ra HTML

3

1993

Dave Raggett soạn thảo HTML +

4

1995

Nhóm làm việc HTML định nghĩa HTML 2.0

5

1997

Khuyến nghị W3C năm 1997: HTML 3.2

6

1999

Khuyến nghị của W3C năm 1999: HTML 4,01

7

2000

Khuyến nghị của W3C năm 2000: XHTML 1.0

8

2008

WHATWG HTML5 Dự thảo công khai đầu tiên

9

2012

Tiêu chuẩn sống 365 WHATWG HTML5

10

2014

Khuyến nghị W3C 2014: HTML5

11

2016

Đề xuất ứng cử viên năm 2016 của W3C: HTML 5.1

12

2017

Khuyến nghị của W3C năm 2017: HTML5.1 Phiên bản thứ hai

13

2017

Khuyến nghị của W3C năm 2017: HTML5.2

          Bảng 1: Lịch sử phát triển của HTML giai đoạn 1991 - 2017

Như vậy, trước HTML5 đã có nhiều phiên bản khác của HTML được phát hành và sử dụng, tuy nhiên, phiên bản HTML5 được đánh giá là hiện đại và sở hữu nhiều tính năng đặc biệt hơn cả.

II. Nội dung HTML5

          HTML5 là một chuẩn mới và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu văn bản – HyperText Markup Language explained (gọi tắt là HTML). Các phiên bản trước của HTML, như HTML 4.01 đã ra đời từ năm 1999. Cho đến nay các trang web đã có những thay đổi rất nhiều kể từ đó. HTML5 vẫn còn trong giai đoạn phát triển và hoàn thiện. Tuy nhiên, nhiều phiên bản trình duyệt mới hiện nay đã có các hỗ trợ cho những phần tử, thẻ mới có trong HTML5 và các APIs.

          HTML5 là kết quả của sự hợp tác giữa tổ chức W3C và nhóm WHATWG. WHATWG làm việc với các định dạng web (web form) và các ứng dụng, còn W3C thì được làm việc với XHTML 2.0 (EXtensible HyperText Markup Language - XHTML là một ngôn ngữ đánh dấu có cùng các khả năng như HTML, nhưng có cú pháp chặt chẽ hơn). Trong năm 2006, họ quyết định hợp tác và tạo ra một phiên bản mới của HTML, đó chính là HTML5.

          HTML5 được xây dựng dựa trên các nguyên tắc sau đây:

          - Ít phụ thuộc vào các plugin (trình cắm hoặc các phần mềm phụ trợ) cho các chức năng.

          - Scripting nên được thay thế bằng markup bất cứ khi nào có thể.

          - Độc lập thiết bị (ví dụ, có sẵn trên tất cả các thiết bị và cung cấp các trải nghiệm giống nhau đối với người dùng).

          - Công bố quá trình phát triển để mọi người đều có thể nhìn thấy những gì đang diễn ra.

Cụ thể hơn, HTML5 đã bổ sung thêm rất nhiều các thẻ đánh dấu (markup) mới:

          - Các thẻ <header> và <footer> giúp bạn tách các phần trên và dưới của các block (khối) nội dung. Để có thể sử dụng nhiều lần trên một trang duy nhất.

          - Thẻ <article> giúp xác định một phần cụ thể về nội dung, ví dụ, một bài blog hoặc một bình luận của độc giả.

          - Thẻ <nav> để xác định những phần nào được coi là khối điều hướng.

          - Thẻ <section> cho phép bạn xác định một phần nội dung nào đó; tương tự như các thẻ <div> hiện nay.

          - Các thẻ <audio> và <video> để đánh dấu những nội dung bao gồm âm thanh hoặc video.

          - Thẻ <canvas> cho phép bạn vẽ đồ họa sử dụng một ngôn ngữ kịch bản riêng biệt.

          - Thẻ <embed> dùng để nhúng các nội dung hoặc các ứng dụng bên ngoài vào trang web.

          - HTML5 cũng bỏ đi một số thẻ: <acronym>, <applet>, <font>, <frame>, <frameset>, <noframes> và một số thẻ khác.

          Các tiêu chuẩn đặc tả kỹ thuật đầy đủ cho HTML5 đã được lên kế hoạch hoàn thành từ năm 2014, nhưng HTML5 đã có nhiều tiến bộ đã và nó có thể được sử dụng để thực hiện các tính năng cho đến hiện nay.

II.1. Một số điểm mới trên HTML5

 - Giảm thiếu nhu cầu sử dụng các plugins (là các trình cắm, hay phần bổ trợ là một bộ phần mềm hỗ trợ) bên ngoài, với HTML5, sẽ không cần đến các công nghệ độc quyền.

          Ngôn ngữ web HTML5 ra đời nhằm mục đích giảm bớt sự phụ thuộc và cần thiết của những công nghệ ứng dụng Internet độc quyền như Adobe Flash, Microsoft Silverlight và Sun JavaFX.

          HTML5 sẽ cho phép bạn xem video mà không cần sử dụng một plugin như Flash hoặc Silverlight. Vậy có những lợi ích lớn gì với tính năng video của HTML5? Thứ nhất, nó là miễn phí và không cần phần mềm Adobe Flash plugin. Thứ hai, Flash có thể làm chậm máy tính. Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống. Với HTML5, tính năng video đã được xây dựng sẵn trong đó.

- Thêm các thể đánh dấu mới để dần thay thế cho các mã lập trình

          Điểm đặc trưng đầu tiên của một ngôn ngữ đánh dấu (markup language) là các thẻ. Và ở mặt này thì HTML5 được bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và đa phương tiện multimedia (video, audio…). Trong HTML5 cũng xuất hiện một khái niệm gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa. Các thẻ này ra đời từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”). Việc sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả. Bên cạnh đó, thẻ <form> của HTML5 cũng được xem là một cải tiến lớn. Giờ đây với Form 2.0 (một cách gọi form trong HTML5), tất cả những chức năng mà bạn cần (định dạng, validate data…) đã được xây dựng trực tiếp vào trong HTML. Bạn không còn cần đến Ajax, Flash hay các công nghệ hỗ trợ để làm công việc này.

- Công cụ thiết kế mới

          HTML5 và CSS3 cũng làm cho các ứng dụng Web và các trang Web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các file ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này làm một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên tiến gần tới những gì mà nhà thiết kế tưởng tượng trong đầu hơn.

- Khả năng hoạt động xuyên suốt giữa các trình duyệt

          HTML5 cung cấp các khai báo đơn giản hơn và một API mạnh mẽ, so với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết hóa mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau.

II.2. Cấu trúc của một trang web sử dụng HTML5

          Một cách truyền thống để hiện thực cấu trúc trên trong các phiên bản HTML trước đây là sử dụng các tag với thuộc tính id=“header”, id=“nav”… Cách này vừa khó quản lý (đối với các trang phức tạp, số lượng tag <div> có thể rất nhiều), vừa không mô tả tự nhiên ý nghĩa của từng thành phần (không thể biết <div> nào đánh dấu header, <div> nào đánh dấu body nếu không nhìn vào thuộc tính id hoặc nội dung bên trong). Để giải quyết vấn đề này, HTML5 đưa ra các thẻ mới, với tên gọi phản ánh chính xác vai trò của nó. Hãy xem qua đoạn code khung của trang web ở trên trong HTML5:

<!DOCTYPE html>

<head>

<meta charset=”utf-8”/>

<title>Worm Page</title>

</head>

<body>

<header> </header>

<navigation> </navigation>

<section> </section>

<footer> </footer>

</body>

</html>

          Đoạn mã (code) trên có nhiều điểm đáng lưu ý. Trong đó điều đầu tiên là khai báo DOCTYPE, trước đây vốn dài dòng và khó nhớ, nay đã được rút gọn tối đa. Cùng với đó là thẻ meta dùng để chỉ định tập kí tự (character set) cũng được tinh giản. Tham khảo thêm dòng code tương đương trong HTML4:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          Tuy nhiên, sự khác biệt lớn nhất nằm trong thẻ body, với hàng loạt các thành viên mới: <header>, <navigation>, <section>, <footer>>. Có thể thấy rằng bố cục một trang HTML5 đã được minh bạch hóa đáng kể: các thẻ <header>, <footer>… đều tự nói lên nội dung mà chúng chứa đựng. Hơn thế nữa, các thẻ này còn mang lại lợi ích từ việc tối ưu hóa search engine.

          Thẻ (tag) là nét đặc trưng của một ngôn ngữ đánh dấu (markup language). Bài viết này giới thiệu khái quát về cách sử dụng một số thẻ mới trong HTML5.

- Thẻ header và footer

Thẻ <header> và <footer> đánh dấu phần mở đầu và kết thúc của một trang web, đây là nơi thích hợp để đặt các banner, logo hình ảnh và thông tin bản quyền. Ví dụ sau minh họa cách sử dụng <header> và <footer>:

<header>

<section>

<img src=”logo.jpg” border=”none” />

</section>

<nav>

<ul>

<li><a href=”/first.aspx”>First Page</a></li>

<li><a href=”/second.aspx”>Second Page</a></li>

<li><a href=”/third.aspx”>Third Page</a></li>

</ul>

</nav>

</header>

<footer>

<p>Copyright 2010 WormTech.</p>

</footer>

- Thẻ Session và Article

          Thẻ <section> chia nội dung trang web ra thành nhiều phần chính. Mỗi <section> lại có thể có nhiều <article>. Một <article> có thể xem như một bài viết cụ thể (chẳng hạn như một blog entry rất thích hợp để đặt trong một <article>). Cuối cùng, thẻ <aside> thường đóng vai trò như một sidebar cung cấp các thông tin liên quan cho <article> chứa nó (thực tế thì bạn sẽ cần đến CSS nếu muốn hiển thị thẻ <aside> này như một sidebar).

<article>

<p>This is the first paragraph</p>

<p>This is the second paragraph</p>

<aside>

<h1>Hello Worm!</h1>

<p>Do you think that HTML5 is great?</p>

</aside>

</article>

- Thẻ dialog

          Thẻ <dialog> cũng là một bổ sung thú vị, thẻ này cho phép đánh dấu một cuộc đàm thoại giữa nhiều người trên mạng. Trong đó <dt> xác định người nói và <dd> chứa nội dung đàm thoại.

<dialog>

<dt>Worm.NET </dt>

<dd>Hello, PC</dd>

<dt>PC </dt>

<dd>Don’t attack me! I have firewall installed! </dd>

</dialog>

- Thẻ Video và Audio

          Cho phép nhúng video và audio file vào trong trang web mà không cần đến các plugin của trình duyệt

Video: <video src=”catz.mp4” width=”200” heigh = “400”> </video>

Audio: <video src=”happy_new_year.mp3” controls preload=”auto” autobuffer></video>

- Thẻ Form

          Form 2.0 – một tên gọi khác của form trong HTML5, là một trong những thành phần mới nhất. Form 2.0 có nhiều bổ sung đáng giá cho các phần tử , khiến chúng trở nên mạnh mẽ và đáp ứng được các yêu cầu thiết kế phức tạp mà không cần đến một giải pháp công nghệ bên ngoài nào như Flash và Silverlight.

<form>

<label>Text Box:</label><br/>

<input name=”TextBox” type=”text” maxlength=”25″ required placeholder=”Enter your text here” autofocus><br/><br/>

<label>Numeric:</label><br/>

<input name=”Numeric” type=”number” min=”18″ max=”100″><br/><br/>

<label>Slider:</label><br/>

<input type=”range” name=”points” min=”1″ max=”10″ />

<label>Date:</label><br/>

<input name=”Date” type=”date”><br/><br/>

<button type=submit>Submit</button>

</form>

          Có lẽ bạn sẽ dễ dàng nhận ra sự xuất hiện nhiều thuộc tính mới trong thẻ <input>: thuộc tính required đánh dấu một trường (field) là bắt buộc, placeholder sẽ hiện một dòng text mờ trên textbox (dòng text này sẽ biến mất khi click vào textbox) và tự động tập trung tại một điểm (autofocus) xác định phần tử nhận focus đầu tiên trên form. Với HTML4, việc hiện thực các tính năng này đều yêu cầu kĩ năng lập trình JavaScript, nhưng nay thì chúng đã được xây dựng trực tiếp trong HTML5.

          Bên cạnh đó, thuộc tính kiểu (type) cung cấp nhiều kiểu điều khiển (control) mới cho form. Chẳng hạn như ta có thể dễ dàng tạo một date control để lựa chọn ngày tháng bằng cách set thuộc tính type=”date”. HTML5 thậm chí còn có sẵn các trường được thiết kế riêng cho địa chỉ email hoặc điện thoại. HTML5 cho khả năng tương thích ngược khá tốt. Khi thử đoạn code trên trên một trình duyệt không hỗ trợ HTML5 thì các field sẽ được hiển thị như các textbox thông thường mà không gây ra lỗi nào. Tất cả các hỗ trợ này khiến cho việc xây dựng form trở nên dễ dàng hơn bao giờ hết.

III. Kết luận

          Một trong những khó khăn ngăn cản việc phổ biến HTML là trình duyệt Internet Explorer, hiện chiếm thị phần lớn nhất thế giới, vốn không có mấy quan tâm đến việc tương thích chuẩn này. Tuy nhiên, với việc Microsoft chính thức tuyên bố hỗ trợ HTML5 trong trình duyệt Internet Exploxer IE9 (các kết quả thử nghiệm gần đây cho thấy tốc độ HTML5 trên IE9 rất khả quan), có thể nói rằng tất cả các trình duyệt lớn đều đã sẵn sàng chào đón HTML5. Điều đó vừa cho thấy sức cuốn hút công nghệ mới này, đồng thời hứa hẹn một tương lai tốt đẹp cho HTML5 phát triển mạnh.

          HTML5 dự kiến đạt đến mức tương thích giữa các trình duyệt vào năm 2022. Dù chặng đường có thể còn dài, nhưng những lợi ích mà HTML5 đem lại có thể đảm bảo cho nó một thành công không kém các phiên bản trước. HTML5 được dự đoán sẽ phổ biến như HTML4 hiện nay.

          Trong Thông tư số 39/2017/TT-BTTTT ngày 15/12/2017 của Bộ trưởng Bộ Thông tin và Truyền thông Công bố Danh mục tiêu chuẩn kỹ thuật về ứng dụng công nghệ thông tin trong cơ quan nhà nước quy định Khuyến nghị áp dụng tiêu chuẩn Web Service Dynamic Discovery phiên bản 1.1, thuộc mục 1.16 Dịch vụ đặc tả Web và được xếp vào nhóm Tiêu chuẩn về kết nối.

Nguyễn Thị Thu Trang

Tài liệu tham khảo

[1] https://www.w3schools.com/html/html5_intro.asp

[2] https://www.html-5-tutorial.com/about-html5.htm

[3] https://html.spec.whatwg.org/multipage/introduction.html#abstract  

 

44 Go top

Ý kiến về Trang thông tin điện tử Cục Tin học hóa?



THÔNG KÊ TRUY CẬP
  • Người trực tuyến Người trực tuyến
    • Khách Khách 32
    • Thành viên Thành viên 0
    • Tổng Tổng 32
    • Tổng lượt truy cập: Tổng lượt truy cập: 10409834