Thẻ Tag trong HTML5

Cập nhật: Lượt xem: 1238 [ HTML5 ]

Trong bài này chúng ta sẽ tìm hiểu sang các Tag mới trong HTML5. HTML5, phiên bản mới nhất của Ngôn ngữ đánh dấu siêu văn bản (HTML), là bản hiệu chỉnh triệt để nhất về ngôn ngữ này cho đến nay. Nó giới thiệu nhiều tính năng mới trong nhiều lĩnh vực. Ngày nay, có một vài tag được bỏ qua, không sử dụng tới hoặc sử dụng không đúng mục đích của nó đều bị loại bỏ hoặc viết lại bởi HTML5.

Thẻ Tag trong HTML5

Để tăng trải nghiệm của người dùng, HTML5 đã thêm nhiều tag về đồ họa, media, cấu trúc trang, xử lý form tốt hơn và một vài API dùng dể kéo/thả, tìm vị trí địa lý, local storage…

Các Tag mới trong HTML5

 

Tag Mô tả Trạng thái
<article> Định nghĩa một bài viết, một nội dung riêng biệt. ico_new
<aside> Định nghĩa nội dung bên ngoài nội dung chính (thường là phần sidebar). ico_new
<audio> Định nghĩa âm thanh, như nhạc hay trường audio khác.. ico_new
<canvas> Được dùng để hiển thị đồ họa. ico_new
<command> Định nghĩa một nút lệnh, giống như một Radiobutton, hộp kiểm, hoặc một button. ico_new
<datalist> Định nghĩa một danh sách tùy chọn, sử dụng thành phần này cùng với các thành phần input. ico_new
<details> Xác định thêm chi tiết hoặc điều khiển có thể được ẩn hoặc hiển thị theo yêu cầu. ico_new
<embed> Xác định nội dung nhúng như một plugin. ico_new
<figcaption> Xác định một chú thích cho tag figure. ico_new
<figure> Xác định các nội dung liên quan mạch lạc với nhau, như hình ảnh, sơ đồ, code,... ico_new
<footer> Định nghĩa khu vực footer (phần cuối) của trang. ico_new
<header> Định nghĩa khu vực header (phần đầu) của trang. ico_new
<hgroup> Định nghĩa một nhóm các tiêu đề. ico_new
<keygen> Xác định một cặp trường khóa chính sử dụng cho form. ico_new
<mark> Xác định văn bản được đánh dấu, sử dụng khi muốn làm nổi bật văn bản của mình. ico_new
<meter> Định nghĩa một phép đo. Sử dụng chỉ cho phép đo với giá trị tối thiểu và tối đa. ico_new
<nav> Định nghĩa link danh mục (navigation) ico_new
<output> Đại diện cho kết quả của phép tính (giống như được thực hiện bởi script). ico_new
<progress> Mô tả tiến trình làm việc. ico_new
<rp> Hiển thị những nội dung bên trong khi trình duyệt không hỗ trợ ruby. ico_new
<rt> Định nghĩa một lời giải thích hoặc cách phát âm của các ký tự (đối với kiểu chữ Đông Á). ico_new
<ruby> Định nghĩa một chú thích ruby (đối với kiểu chữ Đông Á). Chú thích Ruby được sử dụng trong khu vực Đông Á, hiển thị cách phát âm của các ký tự Đông Á. ico_new
<section> Định nghĩa một khu vực (vùng bao). ico_new
<source> Xác định nguồn cho một media. ico_new
<summary> Xác định một tiêu đề cho các thành phần details, được sử dụng để mô tả chi tiết về tài liệu, hoặc các bộ phận của tài liệu. ico_new
<time> Xác định thời gian, ngày tháng, hoặc năm sinh. ico_new
<video> Xác định một video, chẳng hạn như một đoạn phim hoặc một trường video. ico_new
<wbr> Xác định text quá dài sẽ tự động xuống hàng (không tràn layout) ico_new

 

Những tag tương tự HTML4 / XHTML

 

Tag Mô tả Trạng thái
<!--...--> Xác định một comment, một chú thích. ico_nochange
<!DOCTYPE> Xác định mẫu cho văn bản HTML. ico_change
<a> Xác định một liên kết. ico_change
<abbr> Mô tả cụm từ viết tắt. ico_nochange
<address> Xác định thông tin liên hệ (địa chỉ, mail, điện thoại,...). ico_change
<area /> Xác định vùng bên trong map của image. ico_change
<b> Hiển thị text đậm. ico_nochange
<base /> Xác định một địa chỉ mặc định hay một mục tiêu mặc định cho tất cả link trên trang. ico_nochange
<bdo> Xác định hướng của text (từ trái sang phải hoặc từ phải sang trái). ico_nochange
<blockquote> Xác định một đoạn trích dẫn dài. ico_nochange
<body> Xác định phần thân của văn bản HTML. ico_change
<br /> Ngắt một đoạn text xuống hàng. ico_nochange
<button> Xác định một button. ico_change
<caption> Xác định một chú thích cho table. ico_change
<cite> Xác định một câu trích dẫn. ico_nochange
<code> Xác định text giống code trong máy tính. ico_nochange
<col /> Xác định giá trị cột trong table. ico_change
<colgroup> Xác định một nhóm cột trong table cho cùng định dạng. ico_change
<dd> Xác định một mô tả đề mục trong danh sách (xem như phần nội dung trong danh sách). ico_nochange
<del> Hiển thị đường gạch bỏ text. ico_nochange
<dfn> Xác định một thuật ngữ. ico_nochange
<div> Xác định một phân chia khu vực hay một vùng trong văn bản. ico_change
<dl> Xác định một danh sách (definition list). ico_nochange
<dt> Xác định một đề mục trong danh sách (xem như phần tiêu đề trong danh sách). ico_nochange
<em> Xác định text nhấn mạnh. ico_nochange
<fieldset> Được dùng để nhóm các thành phần bên trong form một cách hợp lý. ico_change
<form> Xác định một form html cho người dùng nhập ico_change
<h1> tới <h6> Xác định tiêu đề html. ico_change
<head> Xác định, khai báo thông tin về văn bản HTML. ico_change
<hr /> Tạo một đường ngang. ico_change
<html> Xác định một văn bản html. ico_change
<i> Hiển thị chữ in nghiên. ico_change
<iframe> Xác định một khung nội tuyến. ico_change
<img /> Hiển thị một image. ico_change
<input /> Xác định một điều khiển nhập. ico_change
<ins> Xác định việc chèn text. ico_nochange
<isindex> Xác định một chỉ mục tìm kiếm liên quan đến văn bản. ico_nochange
<kbd> Hiển thị text kiểu bàn phím. ico_nochange
<label> Tạo một nhãn cho thành phần input. ico_change
<legend> Xác định một chú thích cho một phần tử fieldset. ico_change
<li> Xác định danh sách item. ico_change
<link /> Xác định một liên kết. ico_change
<map> Xác định map cho image. ico_change
<menu> Xác định danh sách menu. ico_change
<meta /> Xác định siêu dữ liệu về một văn bản HTML. ico_change
<noscript> Xác định một nội dung thay thế khi trình duyệt không hỗ trợ hoặc người dụng vô hiệu hóa script. ico_nochange
<object> Xác định một đối tượng nhúng. ico_change
<ol> Xác định danh sách có thứ tự. ico_change
<optgroup> Xác định một nhóm các tùy chọn liên quan trong một select. ico_nochange
<option> Xác định một tùy chọn trong một select. ico_change
<p> Xác định một đoạn văn. ico_change
<param /> Xác định một tham số cho một đối tượng. ico_change
<pre> Xác định văn bản định dạng sẵn. ico_change
<q> Định nghĩa một đoạn trích dẫn ngắn.. ico_nochange
<samp> Hiển thị text kiểu sample trong máy tính. ico_nochange
<script> Xác định một script. ico_change
<select> Xác định danh sách lựa chọn. ico_change
<small> Hiển thị text nhỏ. ico_change
<span> Được sử dụng để nhóm các inline trong văn bản HTML.. ico_nochange
<strong> Hiển thị text đậm (mục đích nhấn mạnh). ico_change
<style> Xác định thông tin style cho văn bản. ico_change
<sub> Hiển thị text lệch bên dưới. ico_nochange
<sup> Hiển thị text lệch bên trên. ico_nochange
<table> Xác định một table. ico_change
<tbody> Xác định một nhóm nội dung của table. ico_change
<td> Xác định một phần tử nội dung của table. ico_change
<textarea> Xác định một vùng điều khiển nhập text. ico_change
<tfoot> Một nhóm nội dung cuối của table. ico_change
<th> Xác định một phần tử tiêu đề của table. ico_change
<thead> Một nhóm phần tử tiêu đề của table. ico_change
<title> Xác định một tiêu đề của văn bản HTML. ico_nochange
<tr> Xác định một hàng của table. ico_change
<ul> Xác định danh sách không thứ tự. ico_change
<var> Xác định phần giá trị của text ico_nochange

 

Những tag không được hỗ trợ trong HTML5

 

Tag Mô tả Trạng thái Nên thay thế
<acronym> Mô tả từ viết tắt. X <abbr>
<applet> Xác định applet (nhúng JAVA). X <embed>,<object>
<basefont /> Xác định font, màu sắc, hay kích cỡ mặc định của text trong trang. X font
<big> Hiển thị text lớn. X font-size
<center> Canh giữa text. X text-align
<dir> Xác định danh sách thư mục. X <ul>
<font> Xác định font, màu sắc, và kích cỡ cho text. X font
<frame> Xác định một frame trong một khung (frameset). X <iframe>
<frameset> Xác định một khung (frameset). X <iframe>
<noframes> Xác định một nội dung thay thế khi trình duyệt không hỗ trợ hoặc người dụng vô hiệu hóa frame. X -
<s> Hiển thị gạch ngang text. X text-decoration
<strike> Hiển thị gạch ngang text. X <del>
<tt> Xác định teletype text (kiểu chữ văn bản máy). X -
<u> Hiển thị gạch dưới text. X text-decoration