Tài liệu HTML được chia thành hai phần chính: phần tiêu đề (head) và phần nội dung (body). Phần tiêu đề chứa các thông tin mô tả về tài liệu như siêu dữ liệu, tiêu đề trang, liên kết tới CSS hoặc JavaScript. Phần nội dung hiển thị mọi thứ người dùng nhìn thấy trên trình duyệt. Toàn bộ tài liệu được bao bọc bởi thẻ <html>, tuy nhiên các tệp có phần mở rộng .html hoặc .htm sẽ được trình duyệt tự động nhận diện là tài liệu HTML.
Cấu trúc cơ bản của một trang HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Tiêu đề trang</title>
</head>
<body>
<!-- Nội dung hiển thị tại đây -->
</body>
</html>Các thẻ HTML phổ biến
Chèn hình ảnh:
<img src="duong-dan-anh.jpg" alt="Mô tả hình ảnh">Tạo liên kết:
<a href="https://example.com">Văn bản liên kết</a>Mở liên kết trong tab mới:
<a href="https://example.com" target="_blank">Văn bản liên kết</a>Chữ chạy (marquee):
<marquee>Đoạn văn bản cuộn</marquee>In đậm chữ:
<strong>Văn bản in đậm</strong>In nghiêng chữ:
<em>Văn bản in nghiêng</em>Gạch chân:
<u>Văn bản gạch chân</u>Gạch ngang chữ:
<s>Văn bản gạch ngang</s>Tăng kích thước chữ:
<big>Văn bản lớn hơn</big>Điều chỉnh kích thước tiêu đề (h1 đến h6):
<h1>Tiêu đề cấp 1 (lớn nhất)</h1>
<h2>Tiêu đề cấp 2</h2>
<h6>Tiêu đề cấp 6 (nhỏ nhất)</h6>Thay đổi màu chữ bằng mã hex:
<font color="#FF5733">Văn bản màu cam</font>Bỏ gạch chân cho liên kết:
<a href="https://example.com" style="text-decoration: none;">Liên kết không gạch chân</a>Chèn âm thanh:
<audio src="am-nhac.mp3" controls></audio>Chèn video:
<video src="video.mp4" controls width="480" height="320"></video>Ngắt dòng:
<br>Đoạn văn:
<p>Đoạn văn bản</p>Hiển thị văn bản giữ nguyên định dạng:
<pre>
Văn bản giữ nguyên
khoảng trắng và xuống dòng
</pre>Thay màu nền trang:
<body bgcolor="#F0F8FF">Cố định ảnh nền không cuộn:
<body background="hinh-nen.jpg" bgproperties="fixed">Nhúng âm thanh nền tự động lặp:
<bgsound src="nhac-nen.mp3" loop="-1">Nhúng trang web (iframe):
<iframe src="https://example.com" width="600" height="400"></iframe>Kiểu chữ đóng khung (div):
<div align="center">Nội dung căn giữa</div>Chữ nhỏ hơn:
<small>Văn bản nhỏ</small>Chỉ số trên và chỉ số dưới:
X<sup>2</sup> (chỉ số trên)
H<sub>2</sub>O (chỉ số dưới)Ghi chú (không hiển thị trên trình duyệt):
<!-- Đây là ghi chú -->Liên kết kèm hình ảnh có âm thanh:
<img border="0" src="anh.jpg" dynsrc="am-thanh.mp3">Hình ảnh nổi (floating):
<img src="anh.jpg" alt="Mô tả" height="150" style="float: left;">