HTML và Các Thẻ Thường Dùng

Thẻ Cấu Trúc Cơ Bản

<html>

Mã HTML

<html lang="vi"> <head></head> <body></body> </html>

Demo

Thẻ gốc của trang HTML
Thẻ <html> là phần tử gốc của mọi tài liệu HTML, chứa toàn bộ nội dung trang web.
<head>

Mã HTML

<head> <title>Tiêu đề trang</title> <meta charset="UTF-8"> </head>

Demo

Chứa metadata (không hiển thị trực tiếp)
Thẻ <head> chứa thông tin metadata về trang như tiêu đề, mã hóa ký tự, liên kết CSS, v.v.
<body>

Mã HTML

<body> <h1>Nội dung trang</h1> <p>Đây là phần body</p> </body>

Demo

Nội dung trang

Đây là phần body

Thẻ <body> chứa toàn bộ nội dung hiển thị của trang web.
<div>

Mã HTML

<div style="background: #f0f0f0; padding: 10px;"> Đây là một khối div </div>

Demo

Đây là một khối div
Thẻ <div> là container dạng block, dùng để nhóm các phần tử HTML.
<span>

Mã HTML

Văn bản với <span style="color: red;">từ màu đỏ</span> ở giữa.

Demo

Văn bản với từ màu đỏ ở giữa.
Thẻ <span> là container dạng inline, dùng để định dạng một phần văn bản.
<header>, <footer>, <nav>, <section>

Mã HTML

<header>Phần đầu trang</header> <nav>Menu điều hướng</nav> <section>Nội dung chính</section> <footer>Phần chân trang</footer>

Demo

Phần đầu trang
Nội dung chính
Phần chân trang
Các thẻ ngữ nghĩa HTML5 giúp cấu trúc trang rõ ràng hơn.

Thẻ Nội Dung

<h1> đến <h6>

Mã HTML

<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>

Demo

Tiêu đề cấp 1

Tiêu đề cấp 2

Tiêu đề cấp 3

Tiêu đề cấp 4

Tiêu đề cấp 5
Tiêu đề cấp 6
Các thẻ tiêu đề từ h1 (lớn nhất) đến h6 (nhỏ nhất) dùng để cấu trúc nội dung.
<p>

Mã HTML

<p>Đây là một đoạn văn bản.</p> <p>Đây là đoạn văn thứ hai.</p>

Demo

Đây là một đoạn văn bản.

Đây là đoạn văn thứ hai.

Thẻ <p> định nghĩa một đoạn văn bản.
<a>

Mã HTML

<a href="https://example.com">Liên kết bên ngoài</a> <a href="#section1">Liên kết nội bộ</a> <a href="mailto:email@example.com">Gửi email</a>

Demo

Thẻ <a> tạo siêu liên kết đến trang khác, file, email hoặc vị trí trong trang.
<img>

Mã HTML

<img src="https://placehold.co/150x150" alt="Mô tả hình ảnh" width="150" height="150">

Demo

Mô tả hình ảnh
Thẻ <img> chèn hình ảnh vào trang web.
<ul>, <ol>, <li>

Mã HTML

<ul> <li>Mục không thứ tự 1</li> <li>Mục không thứ tự 2</li> </ul> <ol> <li>Mục có thứ tự 1</li> <li>Mục có thứ tự 2</li> </ol>

Demo

  • Mục không thứ tự 1
  • Mục không thứ tự 2
  1. Mục có thứ tự 1
  2. Mục có thứ tự 2
<ul> tạo danh sách không thứ tự, <ol> tạo danh sách có thứ tự, <li> định nghĩa mục trong danh sách.
<table>, <thead>, <tbody>, <tr>, <th>, <td>

Mã HTML

<table> <thead> <tr> <th>STT</th> <th>Họ tên</th> <th>Tuổi</th> <th>Địa chỉ</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Nguyễn Văn A</td> <td>25</td> <td>Hà Nội</td> </tr> <tr> <td>2</td> <td>Trần Thị B</td> <td>30</td> <td>TP. HCM</td> </tr> <tr> <td>3</td> <td>Lê Văn C</td> <td>28</td> <td>Đà Nẵng</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Tổng</td> <td>83</td> <td>3 người</td> </tr> </tfoot> </table>

Demo

STT Họ tên Tuổi Địa chỉ
1 Nguyễn Văn A 25 Hà Nội
2 Trần Thị B 30 TP. HCM
3 Lê Văn C 28 Đà Nẵng
Tổng 83 3 người
Thẻ <table> tạo bảng dữ liệu. <thead> chứa phần đầu bảng, <tbody> chứa nội dung chính, <tfoot> chứa phần chân bảng. <tr> tạo hàng, <th> tạo ô tiêu đề, <td> tạo ô dữ liệu. Thuộc tính colspan dùng để gộp cột.

Thẻ Form (Quan trọng cho Testing)

<form>

Mã HTML

<form action="/submit" method="post"> <label>Tên:</label> <input type="text" name="name"> <button type="submit">Gửi</button> </form>

Demo

Thẻ <form> tạo biểu mẫu để thu thập dữ liệu từ người dùng.
<input> - Các loại input

Mã HTML

<!-- Text --> <input type="text" placeholder="Nhập văn bản"> <!-- Password --> <input type="password" placeholder="Mật khẩu"> <!-- Email --> <input type="email" placeholder="email@example.com"> <!-- Number --> <input type="number" min="0" max="100"> <!-- Tel --> <input type="tel" placeholder="0901234567"> <!-- URL --> <input type="url" placeholder="https://example.com"> <!-- Search --> <input type="search" placeholder="Tìm kiếm..."> <!-- Date --> <input type="date"> <!-- Time --> <input type="time"> <!-- Datetime-local --> <input type="datetime-local"> <!-- Month --> <input type="month"> <!-- Week --> <input type="week"> <!-- Radio --> <input type="radio" name="gender" value="male"> Nam <input type="radio" name="gender" value="female"> Nữ <!-- Checkbox --> <input type="checkbox" value="option1"> Tùy chọn 1 <input type="checkbox" value="option2"> Tùy chọn 2 <!-- Range --> <input type="range" min="0" max="100"> <!-- Color --> <input type="color"> <!-- File --> <input type="file"> <!-- Hidden --> <input type="hidden" name="id" value="123"> <!-- Submit --> <input type="submit" value="Gửi"> <!-- Reset --> <input type="reset" value="Đặt lại">

Demo

Thẻ <input> có nhiều loại khác nhau để thu thập dữ liệu từ người dùng.
<button>

Mã HTML

<button type="button">Nút bấm</button> <button type="submit">Gửi</button> <button type="reset">Đặt lại</button> <button disabled>Vô hiệu hóa</button>

Demo

Thẻ <button> tạo nút bấm có thể tương tác.
<select> và <option>

Mã HTML

<select name="city"> <option value="">Chọn thành phố</option> <option value="hanoi">Hà Nội</option> <option value="hcm">TP. Hồ Chí Minh</option> <option value="danang">Đà Nẵng</option> </select> <select name="skills" multiple> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option> </select>

Demo

Thẻ <select> tạo danh sách thả xuống, <option> định nghĩa các lựa chọn.
<textarea>

Mã HTML

<textarea name="message" rows="4" cols="50" placeholder="Nhập tin nhắn của bạn..."> </textarea>

Demo

Thẻ <textarea> tạo vùng nhập văn bản nhiều dòng.