HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được thiết kế ra để tạo nên các trang web. Tập tin HTML là một văn bản có chứa các thẻ đánh dấu (markup tags), các thẻ đánh dấu này giúp các trình duyệt Web hiểu được cách trình bày và hiển thị trang Web. Tập tin HTML có phần mở rộng (Extension) là htm hay html và có thể được tạo ra bằng bất cứ chương trình xử lý văn bản đơn giản nào.

Trong tập HTML các phần tử (Element) được đánh dấu bằng các thẻ HTML. Các thẻ này được bao bởi dấu < và dấu > Thông thường các thẻ HTML được dùng theo một cặp <tên thẻ> (thẻ bắt đầu, thẻ mở) và </tên thẻ> (thẻ kết thúc, thẻ đóng), văn bản nằm giữa cặp thẻ này là nội dung của phần tử, một số thẻ không cần thẻ kết thúc (thẻ đóng). Các thẻ HTML không phân biệt chữ hoa và chữ thường, có nghĩa là các kiểu chữ đều được xem như nhau.

Cấu trúc cơ bản của một tập tin văn bản HTML

<!doctype html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
  1. Thẻ khai báo cho trình duyệt web biết loại văn bản HTML này  có chuẩn gì để hiển thị đúng với yêu cầu của nội dung cần thiết. Thẻ này đặt ở ngay dòng đầu tiên của mỗi văn bản HTML.
  2. Thẻ đánh dấu bắt đầu của văn bản HTML, thẻ này bắt buộc phải có. Thuộc tính lang="en" dùng để khai báo ngôn ngữ của trang Web hoặc một phần của trang Web, en là tiếng Anh, nếu là tiếng Việt thì có thể thay bằng vi.
  3. Thẻ bắt đầu của phần khai báo thông tin về trang web, thông tin này sẽ không được hiển thị trên trang Web
  4. Thẻ kết thúc phần khai báo thông tin về trang web.
  5. Thẻ đánh dấu bắt đầu phần nội dung của trang web, đây là phần nội dung sẽ hiển thị trên trang web, thẻ này bắt buộc phải có.
  6. Thẻ đánh dấu kết thúc phần nội dung của trang web.
  7. Thẻ đánh dấu kết thúc văn bản HTML.

Những nội dung thường được đặt trong thẻ <HEAD>

<head>
<meta charset="UTF-8">
<meta name="generator" content="Tên chương trình">
<meta name="author" content="Tên tác giả">
<meta name="keywords" content="Từ khóa">
<meta name="description" content="Mô tả trang web">
<title>tên của trang web</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<script type="text/javascript" src="/script/script.js"></script>
</head>
  1. Thẻ bắt đầu của phần khai báo thông tin về trang web. 
  2. Thẻ này cho biết trang web sử dụng các ký tự mã UTF-8
  3. Thẻ khai báo tên và số phiên bản của công cụ, chương trình tạo ra trang web.
  4. Thẻ khai báo tên tác  giả của trang web.
  5. Thẻ khai báo các từ khóa, được dùng để liệt kê các từ khóa có liên quan đến nội dung trang web. Từ khóa cần thiết để hỗ trợ trong việc tìm kiếm, sắp xếp chỉ mục,... mỗi trang web có thể có nhiều từ khóa và được cách nhau bởi dấu phẩy.
  6. Thẻ khai báo phần mô tả giới thiệu nội dung của trang web. Dòng mô tả này thường chỉ khoản từ 20 đến 25 từ hoặc ít hơn. Các công cụ tìm kiếm sẽ dựa vào các thẻ này để hiển thị trên kết quả tìm kiếm.
  7. Thẻ khai báo tên của trang web, tên này sẽ được hiển thị trên thành trạng thái của trình duyệt.
  8. Thẻ khai báo tập tin CSS (Cascading Style Sheets), đây là tập tin chứa các mã định dạng cho các thành phần và nội dung của trang web.
  9. Thẻ khai báo tập tin chứa các lệnh được viết bằng ngôn ngữ JavaScript được dùng để hỗ trợ thêm một số tính năng nào đó cho trang web.
  10. Thẻ kết thúc phần khai báo thông tin về trang web.

Những nội dung thường được đặt trong thẻ <BODY>

<body>
<div>Nội dung</div>
<table>Nội dung</table>
<p>Nội dung</p>
<span>Nội dung</span>
<a href="/Địa chỉ URL">Liên kết</a>
<img src="/Địa chỉ URL của tập tin ảnh">
<br>
<ul>
<li>Dòng thứ 1</li>
<li>Dòng thứ 2</li>
</ul>
<ol>
<li>Dòng số 1</li>
<li>Dòng số 2</li>
</ol>
<!-- Nội dung ghi chú -->
</body>
  1. Thẻ đánh dấu bắt đầu phần nội dung của trang web.
  2. Thẻ dùng để phân nhóm cho nội dung của trang web. Thẻ này thường được dùng để tạo giao diện cho trang web, có thể dùng nhiều thẻ <div> lồng vào nhau. Trong văn bản HTML có thể có nhiều thẻ này.
  3. Thẻ tạo bảng cho nội dung của trang web, thẻ này giúp tạo giao diện có nhiều cột và dòng cho nội dung trên trang web. Có thể đặt thẻ <table> vào trong thẻ <div> và dùng nhiều thẻ <table> lồng vào nhau. Trong văn bản HTML có thể có nhiều thẻ này.
  4. Thẻ đánh dấu một đoạn trong nội dung của trang web. Thẻ <p> có thể được đặt trong thẻ <div><table> và bất cứ chỗ nào trong phần nội dung của trang web. Trong văn bản HTML có thể có nhiều thẻ này.
  5. Thẻ đánh dấu một phần văn bản trong nội dung của trang web. Thẻ này thường được dùng để định dạng cho riêng một phần văn bản trong cùng một đoạn. Thẻ <span> có thể được đặt trong thẻ <div>, <table>, <p> và bất cứ chỗ nào trong phần nội dung của trang web. Trong văn bản HTML có thể có nhiều thẻ này.
  6. Thẻ tạo liên kết đến một trang web khác cho đoạn văn bản nào đó. Trong văn bản HTML, các thẻ này thường được dùng để tạo các Menu liên kết đến các trang khác. Thẻ <a> có thể được đặt bất cứ chỗ nào trong phần nội dung của trang web. Trong văn bản HTML có thể có nhiều thẻ này.
  7. Thẻ giúp hiển thị hình ảnh trên trang web. Thẻ <img> có thể được đặt bất cứ chỗ nào trong phần nội dung của trang web. Trong văn bản HTML có thể có nhiều thẻ này.
  8. Thẻ <br> hoặc <br/>, </br> dùng để ngắt dòng văn bản trong nội dung của trang web. Thẻ này sẽ ngắt bất cứ thành phần nào nằm ngay sau nó xuống một dòng, có thể dùng liên tiếp nhiều thẻ này (<br><br>) để ngắt xuống nhiều dòng. Trong văn bản HTML có thể có nhiều thẻ này.
  9. Thẻ tạo danh sách gạch đầu dòng (không đánh số đầu dòng). Trong văn bản HTML có thể có nhiều thẻ này.
  10. Thẻ tạo dòng thứ 1 trong danh sách này.
  11. Thẻ tạo dòng thứ 2 trong danh sách này.
  12. Thẻ đóng danh sách gạch đầu dòng.
  13. Thẻ tạo danh sách có số thứ tự (đánh số đầu dòng). Trong văn bản HTML có thể có nhiều thẻ này.
  14. Thẻ tạo dòng thứ 1 trong danh sách này.
  15. Thẻ tạo dòng thứ 2 trong danh sách này.
  16. Thẻ đóng danh sách có số thứ tự.
  17. Thẻ đánh dấu ghi chú trong tập tin HTML. Thẻ này chỉ dùng để đánh dấu hoặc ghi chú cho 1 đoạn HTML nào đó, trình duyệt web sẽ bỏ qua phần chú thích này.
  18. Thẻ đánh dấu kết thúc phần nội dung của trang web.

Trên đây chỉ là những thẻ cơ bản được dùng trong tập tin HTML, các bạn có thể tham khảo thêm các thẻ khác khác tại chuyên mục Thiết kế web.

Phản hồi bài viết

Gửi ý kiến đóng góp hoặc thắc mắc của
bạn về bài viết này!

Xin vui lòng nhập chính xác địa chỉ Email của bạn để nhận được thư trả lời.