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.

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

Các thẻ ngữ nghĩa HTML5 giúp cấu trúc trang rõ ràng hơn.

Thẻ Nội Dung

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

Thẻ <img> chèn hình ảnh vào trang web.

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

Mục có thứ tự 1
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.

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

Text:

Password:

Email:

Number:

Tel:

URL:

Search:

Date:

Time:

Datetime-local:

Month:

Week:

Radio (Giới tính):

Nam Nữ Khác

Checkbox (Sở thích):

Đọc sách Thể thao Âm nhạc

Range (0-100):

Color:

File:

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

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.

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

Chọn một thành phố:

Chọn nhiều kỹ năng (giữ Ctrl/Cmd):

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

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.