Các Thẻ HTML Cơ Bản

1. Thẻ tiêu đề (<h1> - <h6>)

• Mục đích: Sử dụng để đánh dấu các tiêu đề của các phần trong nội dung trang web.
• Cấu trúc:
• Giải thích:
  • <h1> là tiêu đề quan trọng nhất và lớn nhất. Thường dùng cho tiêu đề chính của trang.
  • <h6> là tiêu đề nhỏ nhất. Các thẻ tiêu đề có tác dụng tạo cấu trúc phân cấp cho nội dung, giúp công cụ tìm kiếm hiểu rõ cấu trúc trang web.

<h1>Đây là tiêu đề lớn nhất</h1>
<h2>Đây là tiêu đề lớn thứ hai</h2>
<h3>Đây là tiêu đề lớn thứ ba</h3>
<h4>Đây là tiêu đề lớn thứ tư</h4>
<h5>Đây là tiêu đề lớn thứ năm</h5>
<h6>Đây là tiêu đề lớn thứ sáu</h6>

Giải thích:

• <h1> là tiêu đề quan trọng nhất và lớn nhất. Thường dùng cho tiêu đề chính của trang.
• <h6> là tiêu đề nhỏ nhất. Các thẻ tiêu đề có tác dụng tạo cấu trúc phân cấp cho nội dung, giúp công cụ tìm kiếm hiểu rõ cấu trúc trang web.

2. Thẻ đoạn văn (<p>)

• Mục đích: Được sử dụng để chứa văn bản hoặc nội dung dạng đoạn.
• Cấu trúc

<p>Đây là một đoạn văn bản trong HTML. Thẻ này giúp tách biệt các đoạn văn và làm cho văn bản dễ đọc hơn.</p>

Giải thích:

• Nội dung bên trong thẻ <p> sẽ tự động xuống dòng và có khoảng cách so với các đoạn văn khác. Đây là thẻ quan trọng để tạo cấu trúc và định dạng văn bản trên trang web.

3. Thẻ liên kết (<a>)

• Mục đích: Tạo các liên kết tới các trang web khác, tài liệu hoặc các phần khác của cùng trang web.
• Cấu trúc

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

Giải thích:

• Thuộc tính href xác định đích đến của liên kết. Khi người dùng nhấp vào văn bản hoặc phần tử được bao bọc bởi thẻ <a>, họ sẽ được chuyển hướng tới URL đã chỉ định.

4. Thẻ hình ảnh (<img>)

• Mục đích: Sử dụng để chèn hình ảnh vào trang web.
• Cấu trúc:

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

Giải thích:

• Thuộc tính src chỉ định đường dẫn tới tệp hình ảnh.
• Thuộc tính alt cung cấp mô tả văn bản thay thế cho hình ảnh, rất hữu ích khi hình ảnh không thể hiển thị hoặc cho các công cụ đọc màn hình.

5. Danh sách

5.1. Danh sách không thứ tự (<ul>):

• Mục đích: Tạo danh sách các mục không theo thứ tự.
• Cấu trúc:

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

Giải thích:

• Thẻ <ul> (unordered list) tạo một danh sách với các dấu đầu dòng. Mỗi mục trong danh sách được đặt trong thẻ <li>.

5.3. Danh sách có thứ tự (<ol>):

• Mục đích: Tạo danh sách các mục theo thứ tự.
• Cấu trúc

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

Giải thích:

• Thẻ <ol> (ordered list) tạo một danh sách đánh số thứ tự. Mỗi mục trong danh sách cũng được đặt trong thẻ <li>.

Bài Tập Thực Hành

1. Tạo một trang web đơn giản với tiêu đề và một vài đoạn văn.
2. Tạo một liên kết tới một trang web yêu thích của bạn.
3. Chèn một hình ảnh vào trang và thêm một mô tả văn bản thay thế cho hình ảnh đó.
4. Tạo một danh sách không thứ tự các sở thích cá nhân.
5. Tạo một danh sách có thứ tự liệt kê các bước trong quá trình học HTML.

Lời Kết

Các thẻ cơ bản này là nền tảng cho việc tạo ra các trang web tĩnh đơn giản. Nắm vững các thẻ này sẽ giúp bạn dễ dàng học tiếp các khái niệm nâng cao hơn trong HTML và xây dựng các trang web phong phú hơn.

Nếu có thêm câu hỏi hoặc cần hướng dẫn thêm về phần nào, hãy cho tôi biết nhé!