Các mẫu cấu trúc mới của HTML6

HTML6 là phiên bản thứ sáu của HTML với không gian tên có cấu trúc như XML, không gian tên XML sẽ giúp bạn sử dụng cùng một từ khóa mà không mâu thuẫn với bất kỳ thẻ khác. Ví dụ những sử dụng trong các DOCTYPE XHTML:

Trước đây HTML5 đã đem lại nhiều tính năng thú vị cho thiết kế website như âm thanh, hỗ trợ video, lưu trữ offline cục bộ, và quan trọng nhất là khả năng xây dựng các trang web tối ưu hóa phù hợp cho điện thoại di động. Tuy nhiên nó vẫn còn trong giai đoạn phát triển và vẫn chưa thực sự trở thành một dấu mốc quan trọng cho HTML. Nó cần phải phát triển thêm và đó cũng chính là lí do mà HTML6 đang chuẩn bị hoàn tất để ra mắt.

Các cấu trúc mới của HTML6

HTML6 cung cấp cho bạn cách sử dụng thẻ mà bạn muốn chứ không đơn thuần là chỉ sử dụng các thẻ được định nghĩa.

Nhìn vào các tài liệu HTML6 ở bên, bạn sẽ thấy một số thẻ lẻ <html: x>. Những thẻ lẻ là các yếu tố không gian tên thuộc về W3C và HTML6 , và sẽ kích hoạt sự kiện trình duyệt. Ví dụ, <html: title> phần tử sẽ thay đổi thanh tiêu đề của trình duyệt của bạn và <html: media> sẽ giúp làm cho hình ảnh được xác định xuất hiện trên màn hình trình duyệt của bạn. Thế mạnh HTML6 là làm sao cho tương thích mọi trình duyệt.

[!DOCTYPE html]
[html:html]
	*[html:head]
		**[html:title]A Look Into HTML6[/html:title]
		**[html:meta type="title" value="Page Title"]
		**[html:meta type="description" value="HTML example with namespaces"]
		**[html:link src="css/mainfile.css" title="Styles" type="text/css"]
		**[html:link src="js/mainfile.js" title="Script" type="text/javascript"]
	*[/html:head]
	*[html:body]
		**[header]
			***[logo]
				****[html:media type="image" src="images/xyz.png"]
			***[/logo]
			***[nav]
				****[html:a href="/img1"]a1[/a]
				****[html:a href="/img2"]a2[/a]
			***[/nav]
		**[/header]
		**[content]
			***[article]
				****[h1]Heading of main article[/h1]
				****[h2]Sub-heading of main article[/h2]
				****[p]...[/p]
				****[p]...[/p]
			***[/article]
			***[article]
				****[h1]The concept of HTML6[/h1]
				****[h2]Understanding the basics[/h2]
				****[p]...[/p]
			***[/article]
		**[/content]
		**[footer]
			***[copyright]This site is © to BaoNguyen 2014[/copyright]
		**[/footer]
	*[/html:body]
[/html:html]

Một số cấu trúc mới

Advanced Anchors

[a href="w3.org/page.html$section]div]p"]Go to Anchors[/a]

Bạn thấy một chút kỳ quặc trong thẻ bên, nhưng đây là cách liên kết đến 1 vị trí chính xác trong một tài liệu rất thú vị phải không nào?.

Target link

[a href="http://goo.gl]http://goo.gl"]Go to Google[/a]

Trong định nghĩa mới thẻ [a] chỉ có 1 thuộc tính duy nhất là 'href' nhưng trình duyệt vẫn hiểu để mở trang mới.

Decompress

[decompress href="/mobile/demo.zip"]

Cho phép đọc nội dung bên trong file nén trên trình duyệt, mục đích là giảm băng thông và dung lượng lưu trữ.

Font

[font fontsrc="http://www.demo.com/fontexample.ttf" size="5"]
	*Text written here will be displayed according to the font file format specified.
[/font]

Cho phép định dạng font ngay trên HTML

HTML6 APIs – Giao diện chương trình ứng dụng

<html: html>

[!DOCTYPE html]
[html:html]
[/html:html]

Các thẻ HTML6 sẽ có html namespace như <html: html> hoặc <html: head>, v.v.. Hãy nhìn vào những thuộc tính của mỗi thẻ, được sử dụng trong các tài liệu ví dụ HTML6 ở trên.

<html: head>

[!DOCTYPE html]
[html:html]
	*[html:head]
	*[/html:head]
[/html:html]

Thẻ này là tương đương với thẻ <head>.

<html: title>

[!DOCTYPE html]
[html:html]
	*[html:head]
		**[html:title]Hello![/html:title]
	*[/html:head]
[/html:html]

Như tên gọi của nó, nó sẽ thay đổi tiêu đề của tài liệu HTML, và tương tự như thẻ <title> được sử dụng trong các phiên bản HTML trước đó. Thẻ này được sử dụng bởi các trình duyệt để thay đổi thanh tiêu đề yêu thích, v.v..

<html: meta>

[!DOCTYPE html]
[html:html]
	*[html:head]
		**[html:title]Hello![/html:title]
		**[html:meta type="description" value="demo"]
	*[/html:head]
[/html:html]

Thẻ này khác nhau một chút với thẻ <meta> được sử dụng trong các phiên bản HTML mới nhất. Sử dụng thẻ HTML6 này bạn có thể sử dụng bất kỳ loại dữ liệu meta. Không giống như HTML5 bạn không cần phải sử dụng các loại meta tiêu chuẩn trong HTML6.

<html: link>

[!DOCTYPE html]
[html:html]
	*[html:head]
		**[html:title]Hello![/html:title]
		**[html:link src="main.js" type="text/javascript"]
	*[/html:head]
[/html:html]

Thẻ này sẽ giúp bạn liên kết tài liệu bên ngoài (như CSS, JS vv) vào trong tài liệu HTML. Nó tương tự như thẻ <link> được sử dụng trong HTML5. Thẻ này bao gồm các thuộc tính sau:

charset: “UTF-8” khai báo mã hoá.
href: Liên kết đến tập tin nguồn của bạn.
media: Xác định các loại thiết bị mà bạn sẽ chạy
type: kiểu MIME của tài liệu

<html: body>

[!DOCTYPE html]
[html:html]
	*[html:head]
		**[html:title]Hello![/html:title]
	*[/html:head]
	*[html:body]
		**...
	*[/html:body]
[/html:html]

Cũng giống như thẻ <body> mà bạn đã sử dụng trong phiên bản HTML hiện hành. Đây là nơi mà tất cả các nội dung trang web của bạn như văn bản, hình ảnh được đặt vào.

<html: a>

[!DOCTYPE html]
[html:html]
	*[html:head]
		**[html:title]Hello![/html:title]
	*[/html:head]
	*[html:body]
		**[html:a href="//google.com"]Go to google[/html:a]
	*[/html:body]
[/html:html]

Thẻ này là tương tự như các thẻ <a>, và được sử dụng để đi đến một liên kết khác. Tuy nhiên, không giống như các thẻ <a> thẻ <html: a> chỉ có 1 thuộc tính ‘href’

<html: buton>

[!DOCTYPE html]
[html:html]
	*[html:head]
		**[html:title]Hello![/html:title]
	*[/html:head]
	*[html:body]
		**[html:buton]Click me[/html:buton]
	*[/html:body]
[/html:html]

Thẻ này là tương đương với thẻ <button> hoặc <input type="button"> được sử dụng trong các phiên bản HTML hiện hành. Thẻ này cho phép bạn tạo ra một nút để giúp người dùng thực hiện một số tương tác trên trang web của bạn.

<html: media>

[!DOCTYPE html]
[html:html]
	*[html:head]
		**[html:title]Hello![/html:title]
	*[/html:head]
	*[html:body]
		**[html:media src="image.png" type="image"]
		**[html:media src="video.mov"]
	*[/html:body]
[/html:html]

Thẻ này sẽ là tổng kết của các thẻ <media> như <img> , <video> , <embed> ,v.v.. Bằng cách sử dụng thẻ <html: media>, bạn không còn phải xác định một từ khóa cho từng loại tập tin. Các thẻ <html: media> mà bạn đang sử dụng sẽ được thực hiện bởi các trình duyệt dựa trên các loại thuộc tính (nếu được cung cấp), hoặc nó sẽ tự phán đoán trên cơ sở đọc thuộc tính mở rộng của tập tin, hoặc bằng 'MIME'

HTML6 vẫn chưa thực sự được ra mắt, nhưng nó sẽ sớm được chào đón và cung cấp bởi Oscar Godson. Bài viết này sẽ cung cấp cho bạn một cái nhìn tổng quan về một số khái niệm cơ bản của HTML6. Hi vọng bạn sẽ tìm thấy nhiều điều bổ ích từ bài viết.