Cập nhật · 2025-09-18

Khái quát về HTML

HTML (HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản).

Minh Lâm

@minhlam1996vn

HTML (HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ đánh dấu giúp cấu trúc nội dung trên trang web.

HTML là ngôn ngữ đánh dấu, HTML không phải là một ngôn ngữ lập trình.

Ngôn ngữ HTML

HTML là ngôn ngữ đánh dấu siêu văn bản, nó bao gồm nhiều thẻ (tiếng Anh: tag) để đánh dấu nội dung. Nội dung được đánh dấu có thể được "style" bởi CSS.
HTML, CSS và JavaScript là 3 ngôn ngữ duy nhất trình duyệt web có thể hiểu được.
HTML được sử dụng với vai trò tạo ra phần khung cho trang web, nơi xác định đầy đủ các thành phần và nội dung của trang web.
CSS được sử dụng để hoàn thiện tính thẩm mỹ cho nội dung được đánh dấu bởi HTML.
JavaScript được sử dụng để bổ sung các tính năng mang tính tương tác cho trang web.

Cấu trúc tiêu chuẩn của file HTML

Gồm 4 thành phần

DOCTYPE
Thẻ <html>
Thẻ <head>
Thẻ <body>

Ví dụ:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello HTML</title>
  </head>
  <body>
    Nội dung trang web
  </body>
</html>

DOCTYPE khai báo cho trình duyệt hiểu về phiên bản HTML đang được sử dụng
Thẻ <html> chứa toàn bộ nội dung trang web
Thẻ <head> chứa các thẻ <meta>
Thẻ <body> chứa nội dung hiển thị ra nội dung trình duyệt

Sử dụng các thẻ meta

Thẻ meta charset dùng để chỉ định bằng mã ký tự sử dụng cho trang web. Thẻ này cần được khai báo đầu tiên trong thẻ <head>
Thẻ meta title dùng để khai báo tiêu đề trang web, tiêu đề này hiển thị trên tab trình duyệt & trong kết quả của các công cụ tìm kiếm
Thẻ meta viewport dùng để tối ưu hiển thị giao diện trang web trên nhiều thiết bị. Nếu thiếu thẻ này, trang web có thể hiển thị nhỏ hơn bình thường, bạn cần phải phóng to lên để dễ nhìn hơn.
Thẻ meta open graph dùng để cung cấp dữ liệu cho trình thu thập dữ liệu của Facebook, giúp trang web hiển thị đầy đủ thông tin & đẹp mắt hơn khi được chia sẻ lên Facebook.

Ví dụ:

<head>
  <meta charset="UTF-8" />
  <meta name="description" content="Trang web học HTML cơ bản" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta property="og:title" content="Giới thiệu HTML" />
  <meta property="og:description" content="HTML (HyperText Markup Language)" />
  <meta property="og:image" content="https://example.com/thumbnail.jpg" />
  <title>Giới thiệu HTML</title>
</head>

Một số thẻ HTML thông dụng

Thẻ h1 sử dụng làm tiêu đề chính, thẻ h2 sử dụng làm tiêu đề phụ
Thẻ p sử dụng để chứa các đoạn văn bản
Thẻ b, i, u để in đậm, in nghiêng và gạch chân
Thẻ a tạo ra các liên kết có thể nhấn vào, sử dụng thuộc tính href để chứa liên kết
Thẻ img để hiển thị hình ảnh, liên kết tới hình ảnh được khai báo trong thuộc tính src
Thẻ ul, li để hiển thị danh sách không có số thứ tự
Thẻ ol, li để hiển thị danh sách có số thứ tự

Ví dụ:

<h1>Tiêu đề chính</h1>
<h2>Tiêu đề phụ</h2>
<p>Đây là một đoạn văn bản ví dụ.</p>
<p><b>In đậm</b>, <i>in nghiêng</i>, <u>gạch chân</u></p>
<a href="https://example.com" target="_blank">Truy cập Example</a>
<img src="https://placehold.co/400x400" alt="Mô tả hình ảnh" width="300" />
<ul>
  <li>Mục 1</li>
  <li>Mục 2</li>
</ul>
<ol>
  <li>Bước 1</li>
  <li>Bước 2</li>
</ol>

Thuộc tính trong HTML

Thuộc tính có dạng key="value", được viết trong thẻ mở của thẻ HTML
Mỗi thẻ HTML có thể có các thuộc tính riêng của nó, thuộc tính riêng này có thể không hoạt động ở các thẻ HTML khác
Thuộc tính toàn cục (tiếng Anh: Global attributes) là các thuộc tính có thể sử dụng ở mọi thẻ HTML Ví dụ: lang, hidden, title

Ví dụ thuộc tính toàn cục:

<p title="Đây là tooltip" lang="vi">Nội dung có tooltip khi rê chuột</p>

Một số mẹo viết HTML tốt hơn

Luôn viết cú pháp mở và đóng thẻ trước, sau đó mới viết nội dung
Sử dụng thụt lề bằng 1 dấu Tab cho các thẻ con
Không viết dư thừa các khoảng trắng và các dấu ngắt dòng
Sử dụng dấu ngắt dòng hợp lý, đảm bảo code dễ đọc
Đặt các thẻ đúng vị trí. Ví dụ: thẻ <li> luôn là con trực tiếp của thẻ <ul>, <ol>
Luôn nhớ sử dụng https cho các URL trong thuộc tính href

Kết luận

HTML là ngôn ngữ đánh dấu giúp xây dựng cấu trúc trang web, kết hợp với CSS để định dạng và JavaScript để tạo tương tác.
Một trang HTML chuẩn gồm DOCTYPE, thẻ <html>, <head> và <body>, trong đó <head> chứa các thẻ meta quan trọng cho SEO và hiển thị.
Nắm vững các thẻ cơ bản như h1–h6, p, a, img, ul, ol cùng thuộc tính toàn cục sẽ giúp bạn viết HTML gọn gàng, chuẩn và dễ bảo trì.
Thực hiện thụt lề, đặt thẻ đúng vị trí và ưu tiên https sẽ nâng cao chất lượng và tính chuyên nghiệp của trang web.

Bài trước

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Bài tiếp theo

Lorem ipsum dolor sit, amet consectetur adipisicing elit.