Site logo
Loading...

HTML & CSS: Web Design Fundamentals

Tổng hợp các thẻ HTML cơ bản và cách sử dụng

Giới thiệu về HTML

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo và thiết kế các trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về các thẻ HTML phổ biến và cách chúng được sử dụng trong phát triển web.

Các thẻ HTML phổ biến

1. Thẻ <html>

Thẻ <html> là thẻ gốc của mọi tài liệu HTML. Nó bao bọc toàn bộ nội dung của trang web.

<!DOCTYPE html>
<html>
  <head>
    <title>Trang web của tôi</title>
  </head>
  <body>
    <h1>Chào mừng!</h1>
  </body>
</html>

2. Thẻ <head> và <title>

Thẻ <head> chứa thông tin meta về tài liệu, như tiêu đề, charset, và các liên kết đến CSS hoặc JavaScript.

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

3. Thẻ <body>

Thẻ <body> chứa nội dung chính của trang web, bao gồm văn bản, hình ảnh, video, và các thành phần khác.

<body>
  <h1>Đây là tiêu đề chính</h1>
  <p>Đây là đoạn văn bản.</p>
</body>

4. Thẻ tiêu đề: <h1> đến <h6>

Các thẻ tiêu đề được sử dụng để xác định các tiêu đề trong tài liệu HTML. <h1> là tiêu đề quan trọng nhất, trong khi <h6> là ít quan trọng nhất.

<h1>Tiêu đề 1</h1>
<h2>Tiêu đề 2</h2>
<h3>Tiêu đề 3</h3>

5. Thẻ đoạn văn: <p>

Thẻ <p> được sử dụng để tạo các đoạn văn bản.

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

6. Thẻ liên kết: <a>

Thẻ <a> được sử dụng để tạo các liên kết đến các trang khác hoặc tài liệu khác.

<a href="https://example.com">Truy cập Example</a>

7. Thẻ hình ảnh: <img>

Thẻ <img> được sử dụng để chèn hình ảnh vào trang web.

<img src="image.jpg" alt="Mô tả hình ảnh">

8. Thẻ danh sách: <ul>, <ol>, và <li>

  • <ul>: Danh sách không thứ tự.
  • <ol>: Danh sách có thứ tự.
  • <li>: Mục trong danh sách.
<ul>
  <li>Mục 1</li>
  <li>Mục 2</li>
</ul>

<ol>
  <li>Mục 1</li>
  <li>Mục 2</li>
</ol>

9. Thẻ bảng: <table>, <tr>, <td>, và <th>

Thẻ bảng được sử dụng để hiển thị dữ liệu dưới dạng bảng.

<table>
  <tr>
    <th>Tiêu đề 1</th>
    <th>Tiêu đề 2</th>
  </tr>
  <tr>
    <td>Dữ liệu 1</td>
    <td>Dữ liệu 2</td>
  </tr>
</table>

10. Thẻ biểu mẫu: <form>, <input>, và <button>

Thẻ biểu mẫu được sử dụng để thu thập dữ liệu từ người dùng.

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

So sánh các thẻ HTML phổ biến

Thẻ HTML Mô tả Ví dụ
<html> Thẻ gốc của tài liệu HTML <html>...</html>
<head> Chứa thông tin meta <head>...</head>
<body> Chứa nội dung chính <body>...</body>
<h1> - <h6> Tiêu đề <h1>Tiêu đề</h1>
<p> Đoạn văn <p>Đoạn văn</p>
<a> Liên kết <a href="">Link</a>
<img> Hình ảnh <img src="" alt="">
<ul>, <ol> Danh sách <ul><li>Item</li></ul>
<table> Bảng <table>...</table>
<form> Biểu mẫu <form>...</form>

Kết luận

Việc hiểu và sử dụng các thẻ HTML phổ biến là bước đầu tiên quan trọng trong việc phát triển web. Hy vọng bài viết này đã giúp bạn nắm rõ hơn về các thẻ HTML cơ bản và cách sử dụng chúng hiệu quả.