Tổng hợp các thẻ HTML theo mục đích sử dụng

Có khoảng 118 thẻ HTML, nhiều phết, trong đó có thẻ bạn sẽ dùng rất thường xuyên, có cái hoạ hoằn lắm mới dùng. Tuy vậy cũng giống như ngôn ngữ, cho dù ít dùng ta cũng cần biết nghĩa của nó là gì, để khi người khác nói, hoặc khi ta muốn trình bày một ý tưởng gì đó không giống như mọi lần thì ta lôi ra mà dùng được.

Các thẻ HTML trình bày dưới đây hay ở chỗ, nó phân theo mục đích sử dụng, do vậy ta dễ dàng liên kết các thẻ với nhau, nó cũng giúp ta có cái nhìn tổng thể, cũng như chi tiết về các thẻ. Và có thể nó gúp mình đỡ nhàm khi học, vì mình có thể chọn học cái mình ưa thích trước (dù rằng cuối cùng mình vẫn phải học hết thôi).

Một lần nữa tôi cứ phải nhắc lại rằng, HTML chưa bao giờ khó, nó chỉ là sự cần cù. Nhưng nó là xương, một người khoẻ mạnh cần bộ khung xương tốt để đắp lên đó dung mạo tuấn tú (CSS) và trí tuệ sáng láng (JS và PHP). Do vậy hãy uống HTML cho xương chắc khoẻ. Bay cao nào, nhảy cao nào, nào nhảy cùng HTML (!)


Thẻ HTML cơ bản

ThẻMô tả
<!DOCTYPE>Định nghĩa kiểu tài liệu của HTML
<html>Định nghĩa rằng đây là tài liệu HTML
<title>Định nghĩa tiêu đề của tài liệu HTML
<body>Định nghĩa thân tài liệu HTML
<h1> tới <h6>Định nghĩa tiêu đề trong tài liệu (các mục chính)
<p>Định nghĩa văn bản
<br>Chèn xuống dòng
<hr>Định nghĩa sự thay đổi chủ đề trong nội dung, biểu thị bằng đường gạch ngang
<!–…–>Định nghĩa một comment (ghi chú trong tài HTML – không hiển thị ra ngoài)

Định dạng

ThẻMô tả
<acronym>Không được hỗ trợ trong HTML5. Sử dụng thẻ <abbr> để thay thế. Định nghĩa một từ viết tắt 
<abbr>Định nghĩa từ viết tắt
<address>Định nghĩa thông tin liên hệ cho tác giả/người sở hữu tài liệu/bài viết
<b>Định nghĩa văn bản bôi đậm
<bdi>Yếu tố này rất hữu ích khi nhúng nội dung do người dùng tạo ra với một hướng chưa biết
<bdo>Định nghĩa hướng của văn bản
<big>Không hỗ trợ trong HTML5. Sử dụng CSS để thay thế. Định nghĩa văn bản lớn hơn
<blockquote>Định nghĩa một nội dung được trích dẫn từ nguồn khác (khối trích dẫn)
<center>Không hỗ trợ trong HTML5. Sử dụng CSS để thay thế. Định nghĩa một đoạn văn bản ở giữa
<cite>Định nghĩa tên một sản phẩm
<code>Định nghĩa một đoạn code máy tính
<del>Xác định văn bản đã bị xóa từ một tài liệu
<dfn>Thay thế một định nghĩa cho một thuật ngữ
<em>Định nghĩa một văn bản được nhấn mạnh
<font>Không hỗ trợ trong HTML5. Sử dụng CSS để thay thế. Định nghĩa font, màu sắc và kích cỡ của văn bản
<i>Mục đích để tạo văn bản in nghiêng trong HTML4, còn trong HTML5 ý nghĩa của nó không quá rõ ràng, chủ yếu để biểu thị sự thay đổi trong giọng văn.
<ins>Định nghĩa một văn bản được chèn vào bên trong tài liệu
<kbd>Định nghĩa thông tin người dùng nhập
<mark>Định nghĩa một văn bản được hightlight (giống như bút đánh dấu sách)
<meter>Đo lường dữ liệu trong một phạm vi nhất định
<pre>Định nghĩa định dạng văn bản có sẵn
<progress>Mô tả tiến trình hoàn thành một nhiệm vụ (thí dụ như tiến trình tải về một phần mềm nào đó)
<q>Định nghĩa nội dung được trích dẫn từ nguồn khác (dòng) – cần thấy sự giống và khác nhau giữa thẻ này và thẻ <blockquote>
<rp>Định nghĩa sẽ hiển thị điều gì lên trình duyệt nếu trình duyệt không hỗ trợ chú thích ruby
<rt>Định nghĩa một lời giải thích / cách phát âm của ký tự (đối với kiểu chữ Đông Á)
<ruby>Định nghĩa một chú thích ruby (cho kểu chữ Đông Á)
<s>Định nghĩa văn bản không còn đúng nữa
<samp>Định nghĩa mẫu đầu ra từ một chương trình máy tính
<small>Định nghĩa một đoạn nhỏ hơn
<strike>Không được hỗ trợ trong HTML5. Sử dụng <del> hoặc <s> để thay thế
<strong>Định nghĩa một đoạn văn bản quan trọng
<sub>Định nghĩa chỉ số dưới (hay dùng trong khoa học – thí dụ hoá học)
<sup>Định nghĩa chỉ số trên (hay dùng trong khoa học – thí dụ toán học)
<time>Định nghĩa ngày tháng/thời gian
<tt>Không hỗ trợ trong HTML5. Định nghĩa văn bản giống font đánh máy chữ (monospace). Sử dụng CSS để thay thế. 
<u>Định nghĩa một văn bản phải có phong cách khác với văn bản thông thường
<var>Định nghĩa một biến
<wbr>Định nghĩa một vị trí để xuống dòng

Nhập dữ liệu – Form và Input

ThẻMô tả
<form>Định nghĩa một form HTML cho người dùng nhập liệu
<input>Định nghĩa một điều khiển input (nhập liệu)
<textarea>Giống input nhưng là vùng nhập liệu nhiều dòng chứ không phải một dòng. Thích hợp cho nhập văn bản dài
<button>Định nghĩa một nút bấm
<select>Định nghĩa một danh sách thả xuống
<optgroup>Định nghĩa một nhóm các lựa chọn liên quan trong danh sách thả xuống
<option>Định nghĩa một lựa chọn trong danh sách thả xuống
<label>Định nghĩa một nhãn cho thẻ <input>
<fieldset>Nhóm các phần tử liên quan trong một form
<legend>Định nghĩa một mô tả cho thẻ <fieldset>
<datalist>Chỉ định một danh sách các tùy chọn định trước cho điều khiển đầu vào
<keygen>Chỉ định một cặp khoá được tạo ra để sử dụng cho form
<output>Định nghĩa một kết quả của một phép tính

Các khung

ThẻMô tả
<frame>Không hỗ trợ trong HTML5. Định nghĩa một cửa sổ (khung) trong frameset
<frameset>Không hỗ trợ trong HTML5. Định nghĩa một bộ khung
<noframes>Không hỗ trợ trong HTML5.
Định nghĩa nội dung thay thế cho người dùng khi trình duyệt không hỗ trợ thẻ frames
<iframe>Định nghĩa một frame nhúng

Hình ảnh

ThẻMô tả
<img>Định nghĩa hình ảnh
<map>Định nghĩa một image-map phía máy khách
<area>Định nghĩa một khu vực bên trong image-map
<canvas>Được sử dụng để vẽ đồ hoạ thông qua mã (thường là JavaScript)
<figcaption>Định nghĩa một mô tả cho thẻ <figure>
<figure>Xác định nội dung khép kín (ví dụ như ảnh, biểu đồ)

Audio / Video

ThẻMô tả
<audio>Định nghĩa nội dung âm thanh
<source>Định nghĩa các nguồn media cho các phần tử media (<video> và <audio>)
<track>Định nghĩa văn bản đi kèm với file đa phương tiện (<audio> và <video>). Ví dụ như để làm phụ đề.
<video>Định nghĩa video hoặc phim

Các liên kết

ThẻMô tả
<a>Định nghĩa một liên kết
<link>Định nghĩa một quan hệ giữa tài liệu và một liên kết bên ngoài (hầu như được sử dụng để liên kết với style sheets – CSS)
<nav>Định nghĩa các liên kết điều hướng

Danh sách

ThẻMô tả
<ul>Định nghĩa một danh sách không có thứ tự
<ol>Định nghĩa một danh sách có thứ tự
<li>Định nghĩa một danh sách
<dir>Không hỗ trợ trong HTML5. Sử dụng <ul> để thay thế. Định nghĩa danh sách thư mục
<dl>Định nghĩa một danh sách mô tả
<dt>Định nghĩa một thuật ngữ / tên trong danh sách mô tả
<dd>Định nghĩa mô tả cho một thuật ngữ / tên trong danh sách mô tả
<menu>Định nghĩa một danh sách / menu các lệnh
<menuitem>Định nghĩa một mục lệnh / menu mà người dùng có thể gọi từ một menu popup

Các bảng

ThẻMô tả
<table>Định nghĩa một bảng
<caption>Định nghĩa tiêu đề một bảng (table)
<th>Định nghĩa tiêu đề cột trong bảng (table)
<tr>Định nghĩa hàng trong bảng (table)
<td>Định nghĩa một ô trong bảng (table)
<thead>Nhóm các tiêu đề nội dung trong một bảng (table)
<tbody>Nhóm nội dung body trong một bảng (table)
<tfoot>Nhóm nội dung phần chân trong một bảng (table)
<col>Chỉ định thuộc tính cột cho mỗi cột, dùng trong thẻ <colgroup>
<colgroup>Chỉ định một nhóm của một cột hoặc nhiều cột trong bảng dùng cho việc định dạng được thuận lợi và đỡ mất công

Kiểu dáng và Ngữ nghĩa

ThẻMô tả
<style>Định nghĩa thông tin style (kiểu dáng) cho tài liệu
<div>Định nghĩa không gian / khu vực trong tài liệu
<span>Định nghĩa một không gian / khu vực trong tài liệu
<header>Định nghĩa phần đầu mục cho tài liệu hoặc khu vực
<footer>Định nghĩa phần chân trang cho tài liệu hoặc khu vực
<main>Chỉ định phần tài liệu chính của tài liệu
<section>Định nghĩa một không gian / khu vực trong tài liệu
<article>Định nghĩa một bài viết
<aside>Xác định nội dung ngoài các nội dung trang
<details>Định nghĩa thông tin bổ sung mà người dùng có thể xem hoặc ẩn
<dialog>Định nghĩa một hộp thoại hoặc cửa sổ
<summary>Định nghĩa tiêu đề rõ ràng cho phần tử <details>

Thông tin Meta

ThẻMô tả
<head>Định nghĩa các thông tin về tài liệu
<meta>Định nghĩa các siêu dữ liệu về tài liệu HTML
<base>Chỉ định URL / đích cơ bản cho tất cả các URL tương đối trong một tài liệu
<basefont>Không hỗ trợ trong HTML5. Sử dụng CSS để thay thế. Chỉ định màu, kích cỡ và font cho tất cả văn bản trong tài liệu

Lập trình

ThẻĐịnh nghĩa
<script>Định nghĩa script phía máy khách, thường là JavaScript
<noscript>Định nghĩa thông tin bổ sung cho người dùng trong trường hợp trình duyệt của họ không hỗ trợ script phía máy khách
<applet>Không hỗ trợ trong HTML5. Sử dụng <embed> hoặc <object> để thay thế. Định nghĩa một ứng dụng nhúng
<embed>Định nghĩa nội dung cho ứng dụng bên ngoài (không phải HTML)
<object>Định nghĩa một đối tượng nhúng
<param>Định nghĩa tham số cho một đối tượng

Leave a Comment