DOCPIE
article
SEO

Các Thẻ HTML Cơ Bản: Hướng Dẫn Cho Người Mới Bắt Đầu

5 phút đọc
author
Sang Pham

Các thẻ HTML cơ bản

Khi bắt đầu học lập trình web, điều quan trọng nhất là nắm vững các thẻ HTML cơ bản. HTML (HyperText Markup Language) là ngôn ngữ đánh dấu giúp xây dựng cấu trúc cho trang web.

Dưới đây là những thẻ HTML cơ bản mà bạn nên biết khi mới bắt đầu.

📋 Mục lục

  1. Rank Math SEO – Tối ưu SEO toàn diện
  2. WP Rocket – Tăng tốc độ tải trang
  3. Lời kết

Các Thẻ HTML Cơ Bản: Hướng Dẫn Cho Người Mới Bắt Đầu

HTML (HyperText Markup Language) là nền tảng của mọi trang web. Nếu bạn mới bắt đầu học lập trình web, việc hiểu và sử dụng các thẻ HTML cơ bản là bước đầu tiên vô cùng quan trọng.

1. HTML là gì?

HTML là một ngôn ngữ đánh dấu dùng để xây dựng cấu trúc nội dung trên web. Nó không phải là ngôn ngữ lập trình mà chỉ mô tả cách trình bày nội dung.

2. 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>
    <h1>Xin chào, HTML!</h1>
    <p>Đây là đoạn văn bản đầu tiên.</p>
  </body>
</html>

Trong đoạn mã trên, chúng ta có các phần chính:

3. Các thẻ HTML cơ bản

3.1. Thẻ tiêu đề

Thẻ tiêu đề được sử dụng để tạo tiêu đề cho các phần của trang. Có 6 cấp độ tiêu đề từ <h1> đến <h6>, trong đó <h1> là lớn nhất và <h6> là nhỏ nhất.

<h1>Tiêu đề lớn nhất</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 đề nhỏ nhất</h6>

3.2. Thẻ đoạn văn

Thẻ <p> được sử dụng để tạo đoạn văn bản. Nó tự động thêm khoảng cách giữa các đoạn văn.


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

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

3.3. Thẻ liên kết

Thẻ <a> được sử dụng để tạo liên kết đến các trang khác hoặc các phần khác trong cùng một trang. Bạn cần sử dụng thuộc tính href để chỉ định địa chỉ URL.

<a href="https://example.com">Đây là một liên kết đến Example.com</a>

3.4. Thẻ hình ảnh

Thẻ <img> được sử dụng để chèn hình ảnh vào trang web. Bạn cần sử dụng thuộc tính src để chỉ định đường dẫn đến hình ảnh và thuộc tính alt để mô tả hình ảnh.

<img src="hinh-anh.jpg" alt="Mô tả hình ảnh" />

3.5. Thẻ danh sách

Thẻ <ul> được sử dụng để tạo danh sách không thứ tự, trong khi thẻ <ol> được sử dụng để tạo danh sách có thứ tự. Mỗi mục trong danh sách được bao quanh bởi thẻ <li>.

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

3.6. Thẻ bảng

Thẻ <table> được sử dụng để tạo bảng. Bảng bao gồm các hàng (<tr>) và các ô (<td>).

<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>
    <tr>
        <td>Dữ liệu 3</td>
        <td>Dữ liệu 4</td>
    </tr>
</table>

3.7. Thẻ div và span

Thẻ <div> được sử dụng để nhóm các phần tử lại với nhau, thường dùng để tạo bố cục cho trang. Thẻ <span> được sử dụng để nhóm các phần tử nội tuyến.

<div>
  <h2>Đây là một tiêu đề trong div</h2>
  <p>Đây là một đoạn văn trong div.</p>
</div>
<span>Đây là một đoạn văn trong span.</span>

3.8. Thẻ form

Thẻ <form> được sử dụng để tạo biểu mẫu cho người dùng nhập dữ liệu. Bạn có thể sử dụng các thẻ như <input>, <textarea>, <select> để tạo các trường nhập liệu.

<form action="/submit" method="POST">
  <label for="name">Tên:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <input type="submit" value="Gửi" />
</form>

Kết luận

Các thẻ HTML cơ bản là nền tảng để xây dựng trang web. Việc nắm vững các thẻ này sẽ giúp bạn tạo ra cấu trúc trang web chuẩn và dễ dàng mở rộng sau này. Hãy thực hành thường xuyên để làm quen với cách sử dụng các thẻ này. Chúc bạn thành công trong việc học lập trình web!

4. Tài nguyên tham khảo

5. Lời kết

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về các thẻ HTML cơ bản. Nếu bạn có bất kỳ câu hỏi nào, hãy để lại ý kiến của bạn bên dưới nhé! Nếu bạn thấy bài viết hữu ích, hãy chia sẻ với bạn bè và đồng nghiệp của mình để họ cũng có thể học hỏi từ những kiến thức này. Chúc bạn thành công trong hành trình học lập trình web!