HTML/CSS | Các thẻ HTML thông dụng

Học HTML, CSS từ Zero Tới Hero

• Thẻ h1, h2
• Thẻ p
• Thẻ b, i, u
• Thẻ a
• Thẻ img
• Thẻ ul, li
• Thẻ ol, li

Thẻ h1, h2

Trong HTML có 6 thẻ được dùng để làm tiêu đề từ thẻ h1 - h6. Trong đó chữ h được viết tắt của từ heading (ý nghĩa: tiêu đề, phần mở đầu). Trong bài này, mình giới thiệu trước cho các bạn 2 thẻ là <h1> và <h2> vì đây là 2 thẻ được sử dụng phổ biến nhất trong số các thẻ tiêu đề.

Cách sử dụng:

<h1>Nội dung làm tiêu đề chính</h1>
<h2>Nội dung làm tiêu đề phụ</h2>

Ví dụ:

<h1>Nội dung tiêu đề chính</h1>
<h2>Nội dung tiêu đề phụ</h2>

Thẻ <h1> được sử dụng làm tiêu đề chính, ví dụ tiêu đề của một bài blog. Các thẻ <h2> được sử dụng làm tiêu đề phụ, ví dụ dùng làm các tiêu đề thể hiện ý chính trong bài blog.

Ví dụ thực tế:

Tiêu đề chính thường thấy trong: Tiêu đề của bài blog, tên sản phẩm trên trang TMĐT, tên một bài học, …

Tiêu đề phụ thường thấy trong các ý chính của một bài viết.

Thẻ p

Thẻ <p> để thể hiện các đoạn văn, p là viết tắt của paragraph (ý nghĩa: đoạn văn bản). Thẻ <p> được sử dụng để thể hiện các đoạn văn bản trong nội dung bài viết như: mô tả bài blog, các đoạn văn bản trong bài blog, các đoạn văn bản trong nội dung sản phẩm, nội dung các bình luận trên mạng xã hội, …

Cách sử dụng:

<p>Đoạn văn 1</p>
<p>Đoạn văn 2</p>

Ví dụ:

<p>Bài viết này nhằm tổng hợp lại các dự án mà học viên F8 đã hoàn thành và chia sẻ trên nhóm Học lập trình web F8.</p>

Ví dụ thực tế:

Thẻ b, i, u

Đây là 3 thẻ có chức năng khá quen thuộc nếu các bạn đã sử dụng các trình soạn thảo văn bản. Trong đó b viết tắt của bold (ý nghĩa: in đậm), i viết tắt của italic (ý nghĩa: in nghiêng) và u viết tắt của underline (ý nghĩa: gạch chân).

Tương tự như trên trình soạn thảo:

Trường hợp sử dụng các thẻ này trên nội dung trang web cũng tương tự như khi soạn văn bản trên trình soạn thảo. Thông thường, ta sẽ in đậm các từ hoặc đoạn văn muốn nhấn mạnh, in nghiêng cho các đoạn văn mang tính lưu ý và gạch chân cho những đoạn văn muốn nhấn mạnh hoặc đoạn văn chứa liên kết có thể nhấn vào.

Cách sử dụng:

<b>Đoạn văn được in đậm</b>
<i>Đoạn văn được in nghiêng</i>
<u>Đoạn văn được gạch chân</u>

Ví dụ:

<b>Hôm nay</b> là <i>một ngày</i> <u>đẹp trời!</u>

Thẻ a

Khi truy cập các trang web bạn gần như luôn bắt gặp các thẻ a, thẻ này giúp tạo ra một siêu liên kết tới các trang web, các file, email, … Trong đó, a viết tắt của anchor (ý nghĩa: điểm neo, neo một liên kết).

Ví dụ:

Cách sử dụng:

<a href="liên kết">Đoạn văn bản có thể nhấn</a>

Ví dụ:

Bạn có thể <a href="https://truongcongly.com/">nhấn vào đây</a> để tới trang web của F8

Thẻ img

Đây là thẻ dùng để hiển thị hình ảnh trên trang web. Trong đó img viết tắt của image (ý nghĩa: hình ảnh). Trong một trang web, hình ảnh được sử dụng rất phổ biến: logo trang web, ảnh đại diện, ảnh bìa, hình ảnh các mặt hàng trên trang web TMDT, …

Ví dụ:

Cách sử dụng:

<img src="liên kết tới hình ảnh" />

Ví dụ:

<img src="https://files.fullstack.edu.vn/f8-prod/public-images/62cfddba4e934.png" />

Thẻ ul, li

Thẻ ul và li được sử dụng để tạo giao diện dạng danh sách, 2 thẻ này được sử dụng rất phổ biến trong nội dung các bài viết.

Các bạn có bao giờ thấy danh sách như này?

Trong đó, ul viết tắt của unordered list (ý nghĩa: danh sách không có thứ tự) và li viết tắt của list item (ý nghĩa: mục trong danh sách).

Cách sử dụng:

<ul>
    <li>Nội dung 1</li>
    <li>Nội dung 2</li>
    <li>Nội dung 3</li>
</ul>

Ví dụ:

<ul>
    <li>Ngôn ngữ HTML</li>
    <li>Ngôn ngữ CSS</li>
    <li>Ngôn ngữ JavaScript</li>
</ul>

Thẻ ol, li

Gần giống như cặp thẻ ul, li. Đây cũng là 2 thẻ để tạo giao diện danh sách. Điểm khác biệt duy nhất nằm ở ol, ol viết tắt của ordered list (ý nghĩa: danh sách có số thứ tự). Sử dụng thẻ này trong trường hợp bạn muốn thể hiện rõ số thứ tự của các mục trong danh sách.

Cách sử dụng:

<ol>
    <li>Nội dung 1</li>
    <li>Nội dung 2</li>
    <li>Nội dung 3</li>
</ol>

Ví dụ:

<ol>
    <li>Ngôn ngữ HTML</li>
    <li>Ngôn ngữ CSS</li>
    <li>Ngôn ngữ JavaScript</li>
</ol>

Tóm tắt

• Thẻ h1 sử dụng làm tiêu đề chính, thẻ h2 sử dụng làm tiêu đề phụ
• Thẻ p sử dụng để chứa các đoạn văn bản
• Thẻ b, i, u để in đậm, in ngiêng và gạch chân
• Thẻ a tạo ra các liên kết có thể nhấn vào, sử dụng thuộc tính href để chứa liên kết
• Thẻ img để hiển thị hình ảnh, liên kết tới hình ảnh được khai báo trong thuộc tính src
• Thẻ ul, li để hiển thị danh sách không có số thứ tự
• Thẻ ol, li để hiển thị danh sách có số thứ tự