Ví dụ HTML từ cơ bản đến nâng cao
Trần Thị Vân - 112
- 24/07/2026
Khám phá các ví dụ HTML từ cơ bản đến nâng cao với hướng dẫn chi tiết và đoạn code thực tế. Học cách sử dụng thẻ HTML, biểu mẫu, bảng, danh sách, HTML5 và nhiều ví dụ hữu ích dành cho người mới lẫn người đã có nền tảng, chi tiết như nào hãy cùng chúng tôi phân tích:
HTML là nền tảng của mọi website. Dù bạn mới bắt đầu học lập trình web hay đã có kinh nghiệm, việc xem nhiều ví dụ thực tế luôn là cách học nhanh nhất. Thay vì chỉ ghi nhớ lý thuyết, bạn sẽ hiểu cách các thẻ HTML hoạt động khi kết hợp với nhau để tạo thành một trang web hoàn chỉnh.
Bài viết này tổng hợp các ví dụ HTML từ cơ bản đến nâng cao theo từng chủ đề. Mỗi ví dụ đều được giải thích rõ ràng, dễ hiểu và có thể sao chép để thực hành ngay. Nội dung được sắp xếp theo lộ trình học tự nhiên, giúp bạn từng bước làm chủ HTML trước khi chuyển sang CSS và JavaScript.
Bắt đầu với tài liệu HTML đơn giản
Mọi trang HTML đều nên bắt đầu bằng một cấu trúc chuẩn. Đây là bộ khung giúp trình duyệt hiểu cách hiển thị nội dung.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang HTML đầu tiên</title>
</head>
<body>
<h1>Xin chào HTML</h1>
<p>Đây là trang web đầu tiên của tôi.</p>
</body>
</html>
Trong ví dụ trên:
- DOCTYPE khai báo chuẩn HTML5.
- html là phần tử gốc của tài liệu.
- head chứa thông tin dành cho trình duyệt.
- body chứa toàn bộ nội dung người dùng nhìn thấy.
Tạo tiêu đề và đoạn văn
Tiêu đề giúp phân chia nội dung thành từng phần rõ ràng. HTML hỗ trợ sáu cấp tiêu đề.
<h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>
Đoạn văn được tạo bằng thẻ p.
<p>HTML giúp xây dựng cấu trúc của một trang web.</p>
<p>Mỗi đoạn văn nên thể hiện một ý riêng để dễ đọc.</p>
Định dạng văn bản
HTML cung cấp nhiều thẻ để nhấn mạnh hoặc thể hiện ý nghĩa của nội dung.
<p>
<strong>Đây là văn bản quan trọng.</strong>
</p>
<p>
<em>Đây là nội dung cần được nhấn mạnh.</em>
</p>
Ưu tiên sử dụng các thẻ mang ý nghĩa ngữ nghĩa thay vì chỉ phục vụ mục đích hiển thị.
Tạo liên kết
Liên kết giúp người dùng chuyển sang trang khác hoặc đến một vị trí trong cùng tài liệu.
Liên kết đến website khác
<a href="https://example.com">Truy cập website</a>
Mở trong cửa sổ mới
<a href="https://example.com" target="_blank">
Mở website mới
</a>
Liên kết đến email
<a href="mailto:contact@example.com">
Gửi email
</a>
Hiển thị hình ảnh
Thẻ img dùng để chèn hình ảnh vào trang.
<img
src="images/html.png"
alt="Logo HTML"
width="300">
Thuộc tính alt rất quan trọng đối với SEO và khả năng truy cập.
Tạo danh sách
Danh sách không có thứ tự
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Danh sách có thứ tự
<ol>
<li>Học HTML</li>
<li>Học CSS</li>
<li>Học JavaScript</li>
</ol>
Danh sách lồng nhau
<ul>
<li>
Front-end
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Back-end</li>
</ul>
Tạo bảng dữ liệu
Bảng phù hợp để trình bày dữ liệu có hàng và cột.
<table>
<tr>
<th>Ngôn ngữ</th>
<th>Mục đích</th>
</tr>
<tr>
<td>HTML</td>
<td>Xây dựng cấu trúc</td>
</tr>
<tr>
<td>CSS</td>
<td>Thiết kế giao diện</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Xử lý tương tác</td>
</tr>
</table>
Đối với dữ liệu dạng bảng, nên sử dụng thẻ table thay vì cố gắng căn chỉnh bằng các phần tử khác.
Làm việc với phần tử chứa nội dung
Trong quá trình xây dựng giao diện, bạn thường cần nhóm nhiều phần tử lại để dễ quản lý và áp dụng CSS sau này. Thẻ div là phần tử được sử dụng phổ biến nhất cho mục đích này.
Ví dụ sử dụng div
<div>
<h2>Tin tức</h2>
<p>Đây là nội dung của chuyên mục tin tức.</p>
</div>
Ban đầu div không tạo ra hiệu ứng hiển thị đặc biệt. Giá trị của nó nằm ở việc tổ chức cấu trúc tài liệu.
Lồng nhiều khối nội dung
<div>
<div>
<h3>Bài viết 1</h3>
<p>Mô tả ngắn cho bài viết đầu tiên.</p>
</div>
<div>
<h3>Bài viết 2</h3>
<p>Mô tả ngắn cho bài viết thứ hai.</p>
</div>
</div>
Sử dụng các phần tử HTML5 mang ý nghĩa ngữ nghĩa
HTML5 bổ sung nhiều phần tử giúp mô tả đúng chức năng của từng khu vực trên trang. Điều này giúp mã nguồn dễ đọc hơn, hỗ trợ SEO và tăng khả năng truy cập.
Ví dụ bố cục HTML5
<header>
<h1>Web Mới</h1>
</header>
<nav>
<a href="#">Trang chủ</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
</nav>
<main>
<article>
<h2>Học HTML</h2>
<p>Nội dung bài viết.</p>
</article>
</main>
<footer>
<p>Copyright 2026</p>
</footer>
Các phần tử như header, nav, main, article và footer giúp trình duyệt cũng như công cụ tìm kiếm hiểu rõ cấu trúc nội dung.
Tạo menu điều hướng
Menu thường được xây dựng bằng danh sách kết hợp với liên kết.
<nav>
<ul>
<li><a href="/">Trang chủ</a></li>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
<li><a href="/javascript">JavaScript</a></li>
</ul>
</nav>
Tạo bài viết hoàn chỉnh
Một bài viết trên website thường được đặt bên trong phần tử article.
<article>
<h2>Hướng dẫn học HTML</h2>
<p>
HTML là bước đầu tiên để trở thành lập trình viên Web.
</p>
<p>
Sau khi thành thạo HTML, bạn có thể học tiếp CSS và JavaScript.
</p>
</article>
Sử dụng section để chia nội dung
Section giúp chia bài viết thành các nhóm chủ đề rõ ràng.
<section>
<h2>Kiến thức cơ bản</h2>
<p>Đây là phần dành cho người mới học.</p>
</section>
<section>
<h2>Kiến thức nâng cao</h2>
<p>Đây là phần dành cho người đã có nền tảng.</p>
</section>
Hiển thị trích dẫn
Đối với đoạn trích từ tài liệu hoặc câu nói nổi tiếng, nên sử dụng blockquote.
<blockquote>
HTML là nền tảng của mọi website hiện đại.
</blockquote>
Ví dụ về đường dẫn tương đối và tuyệt đối
Đường dẫn tương đối
<img src="images/logo.png" alt="Logo">
Đường dẫn này được tính từ vị trí của tệp HTML hiện tại.
Đường dẫn tuyệt đối
<img
src="https://example.com/images/logo.png"
alt="Logo">
Đường dẫn tuyệt đối phù hợp khi tài nguyên được lưu trên một tên miền khác.
Kết hợp nhiều thành phần trong một ví dụ
Dưới đây là ví dụ mô phỏng một trang giới thiệu đơn giản.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Giới thiệu</title>
</head>
<body>
<header>
<h1>Web Mới</h1>
</header>
<main>
<section>
<h2>Giới thiệu</h2>
<p>Đây là website chia sẻ kiến thức lập trình Web.</p>
</section>
<section>
<h2>Khóa học</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
</main>
<footer>
<p>© 2026 Web Mới</p>
</footer>
</body>
</html>
Ví dụ trên kết hợp nhiều kiến thức đã học như cấu trúc tài liệu, tiêu đề, danh sách, section, header, footer và main để tạo thành một trang HTML hoàn chỉnh.
Ví dụ tạo biểu mẫu nhập liệu
Biểu mẫu là thành phần không thể thiếu trên hầu hết website. Người dùng có thể gửi thông tin liên hệ, đăng ký tài khoản, tìm kiếm hoặc gửi phản hồi thông qua form.
Biểu mẫu đơn giản
<form action="/submit" method="post">
<label for="fullname">Họ và tên</label>
<input
type="text"
id="fullname"
name="fullname">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email">
<button type="submit">Gửi</button>
</form>
Trong ví dụ này, dữ liệu sẽ được gửi đến đường dẫn /submit bằng phương thức POST.
Biểu mẫu đăng nhập
<form action="/login" method="post">
<label for="username">Tên đăng nhập</label>
<input
type="text"
id="username"
name="username">
<label for="password">Mật khẩu</label>
<input
type="password"
id="password"
name="password">
<button type="submit">Đăng nhập</button>
</form>
Ô nhập nhiều dòng
<label for="message">Nội dung</label>
<textarea
id="message"
name="message"
rows="5"
cols="40"></textarea>
Danh sách lựa chọn
<label for="city">Thành phố</label>
<select id="city" name="city">
<option value="hn">Hà Nội</option>
<option value="hcm">TP. Hồ Chí Minh</option>
<option value="dn">Đà Nẵng</option>
</select>
Nút chọn một giá trị
<input
type="radio"
id="male"
name="gender"
value="male">
<label for="male">Nam</label>
<input
type="radio"
id="female"
name="gender"
value="female">
<label for="female">Nữ</label>
Ô chọn nhiều giá trị
<input
type="checkbox"
id="html"
name="skill"
value="html">
<label for="html">HTML</label>
<input
type="checkbox"
id="css"
name="skill"
value="css">
<label for="css">CSS</label>
Ví dụ sử dụng thuộc tính id và class
Hai thuộc tính này thường được sử dụng để kết nối HTML với CSS hoặc JavaScript.
<div id="content">
<h2 class="title">Bài viết</h2>
<p class="description">
Đây là phần mô tả.
</p>
</div>
Một giá trị id chỉ nên xuất hiện một lần trong một trang, trong khi class có thể sử dụng cho nhiều phần tử.
Ví dụ về thuộc tính data
Thuộc tính data-* cho phép lưu trữ dữ liệu tùy chỉnh ngay trong HTML.
<button
data-id="1001"
data-name="HTML">
Xem chi tiết
</button>
JavaScript có thể đọc các giá trị này để xử lý sự kiện hoặc truyền dữ liệu.
Ví dụ tạo đường dẫn điều hướng
<nav>
<a href="/">Trang chủ</a>
>
<a href="/html">HTML</a>
>
<span>Ví dụ HTML</span>
</nav>
Đây là dạng điều hướng thường gặp trên các website lớn giúp người dùng biết mình đang ở đâu.
Ví dụ nhúng video
<video
controls
width="600">
<source
src="video/html.mp4"
type="video/mp4">
</video>
Trình duyệt sẽ phát video nếu định dạng được hỗ trợ.
Ví dụ phát âm thanh
<audio controls>
<source
src="audio/lesson.mp3"
type="audio/mpeg">
</audio>
Ví dụ nhúng bản đồ hoặc website khác
<iframe
src="https://example.com"
width="800"
height="500">
</iframe>
Iframe thường được dùng để nhúng bản đồ, video hoặc tài liệu từ nguồn khác.
Ví dụ hiển thị hình ảnh có chú thích
<figure>
<img
src="images/html-editor.jpg"
alt="Trình soạn thảo HTML">
<figcaption>
Giao diện trình soạn thảo HTML.
</figcaption>
</figure>
Figure và figcaption giúp hình ảnh có ngữ nghĩa rõ ràng hơn, đồng thời tạo chú thích cho người đọc.
Ví dụ về thuộc tính loading
Đối với website có nhiều hình ảnh, nên trì hoãn việc tải những ảnh chưa xuất hiện trên màn hình.
<img
src="images/banner.jpg"
alt="Banner"
loading="lazy">
Thuộc tính loading="lazy" giúp cải thiện tốc độ tải trang, đặc biệt trên thiết bị di động.
Ví dụ sử dụng các thẻ meta quan trọng
Mặc dù người dùng không nhìn thấy nội dung trong phần head, nhưng các thẻ meta lại có vai trò rất lớn đối với SEO, hiển thị tiếng Việt và khả năng tương thích trên nhiều thiết bị.
Khai báo charset
<meta charset="UTF-8">
Giúp trang web hiển thị chính xác các ký tự tiếng Việt và nhiều ngôn ngữ khác.
Thiết lập giao diện trên thiết bị di động
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
Đây là thẻ gần như bắt buộc đối với website hiện đại.
Mô tả trang
<meta
name="description"
content="Ví dụ HTML từ cơ bản đến nâng cao.">
Mô tả thường được công cụ tìm kiếm hiển thị bên dưới tiêu đề kết quả.
Ví dụ sử dụng đường dẫn favicon
<link
rel="icon"
href="/favicon.ico">
Favicon là biểu tượng nhỏ xuất hiện trên tab trình duyệt.
Ví dụ chèn tệp CSS
<link
rel="stylesheet"
href="style.css">
Đây là cách phổ biến để tách giao diện khỏi cấu trúc HTML.
Ví dụ chèn tệp JavaScript
<script
src="app.js"></script>
Thông thường script được đặt cuối phần body để tránh làm chậm quá trình hiển thị nội dung.
Ví dụ tạo nhiều thẻ bài sản phẩm
Đây là kiểu bố cục xuất hiện rất nhiều trên website bán hàng.
<section>
<article>
<img
src="images/product-1.jpg"
alt="Sản phẩm 1">
<h3>Bàn phím cơ</h3>
<p>Giá: 1.500.000 VNĐ</p>
</article>
<article>
<img
src="images/product-2.jpg"
alt="Sản phẩm 2">
<h3>Chuột không dây</h3>
<p>Giá: 650.000 VNĐ</p>
</article>
</section>
Ví dụ tạo danh sách bài viết
<section>
<article>
<h3>Học HTML cơ bản</h3>
<p>
Bài viết dành cho người mới bắt đầu.
</p>
<a href="#">Đọc tiếp</a>
</article>
<article>
<h3>Thực hành HTML</h3>
<p>
Áp dụng HTML vào dự án thực tế.
</p>
<a href="#">Đọc tiếp</a>
</article>
</section>
Ví dụ tạo trang giới thiệu cá nhân
<header>
<h1>Nguyễn Văn A</h1>
</header>
<main>
<section>
<h2>Giới thiệu</h2>
<p>
Tôi là lập trình viên Web.
</p>
</section>
<section>
<h2>Kỹ năng</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
</main>
Ví dụ tạo trang liên hệ
<section>
<h2>Liên hệ</h2>
<form action="/contact" method="post">
<label for="name">Họ và tên</label>
<input
type="text"
id="name"
name="name">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email">
<label for="content">Nội dung</label>
<textarea
id="content"
name="content"></textarea>
<button type="submit">
Gửi liên hệ
</button>
</form>
</section>
Những lỗi HTML người mới thường gặp
Quên đóng thẻ
Một trong những lỗi phổ biến nhất là mở thẻ nhưng không đóng, khiến trình duyệt phải tự suy đoán cấu trúc tài liệu.
Lồng phần tử sai quy tắc
Một số phần tử không được phép chứa nhau. Việc lồng sai có thể tạo ra giao diện không như mong muốn.
Bỏ quên thuộc tính alt của hình ảnh
Alt giúp công cụ tìm kiếm hiểu nội dung hình ảnh và hỗ trợ người dùng sử dụng trình đọc màn hình.
Dùng quá nhiều div
Thay vì chỉ sử dụng div cho mọi trường hợp, hãy ưu tiên các phần tử mang ý nghĩa như header, nav, main, section, article, aside và footer khi phù hợp.
Kinh nghiệm thực hành HTML hiệu quả
- Viết đúng cấu trúc ngay từ đầu thay vì sửa lỗi về sau.
- Sử dụng các phần tử HTML5 mang ý nghĩa ngữ nghĩa.
- Đặt tên id và class rõ ràng, dễ hiểu.
- Kiểm tra mã nguồn trên nhiều trình duyệt.
- Luôn bổ sung thuộc tính alt cho hình ảnh.
- Viết mã có thụt lề thống nhất để dễ bảo trì.
- Thực hành bằng các dự án nhỏ thay vì chỉ đọc lý thuyết.
Tổng kết
Qua các ví dụ từ cơ bản đến nâng cao, bạn đã làm quen với hầu hết các thành phần quan trọng trong HTML như cấu trúc tài liệu, tiêu đề, đoạn văn, liên kết, hình ảnh, danh sách, bảng, biểu mẫu, bố cục HTML5, đa phương tiện và nhiều tình huống thực tế khác. Thay vì học thuộc từng thẻ riêng lẻ, hãy tự xây dựng các trang web nhỏ, sau đó kết hợp thêm CSS để tạo giao diện và JavaScript để bổ sung tính tương tác. Đây là cách nhanh nhất giúp bạn ghi nhớ HTML và tạo nền tảng vững chắc cho quá trình phát triển web chuyên nghiệp.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
