Khóa học IT HTML Cơ bản 011_Văn bản

HTML cung cấp nhiều thẻ văn bản để chúng ta sử dụng khi tạo trang web. Các thẻ này giúp chúng ta tổ chức và định dạng nội dung văn bản tốt hơn. Sau đây là một số thẻ văn bản HTML thường dùng.

Tiêu đề

Phần tử tiêu đề được sử dụng để định nghĩa tiêu đề hoặc tiêu đề phụ của tài liệu HTML, thường biểu thị cấp bậc của cấu trúc tài liệu. Có sáu cấp độ phần tử tiêu đề, từ h1 đến h6, cấp độ càng cao thì tầm quan trọng của tiêu đề càng lớn.

Ví dụ:

1
<h1>Đây là tiêu đề h1</h1>
2
<h2>Đây là tiêu đề h2</h2>
3
...
4
<h6>Đây là tiêu đề h6</h6>

Hiệu ứng:

[!Tóm tắt]

• Đảm bảo phần tử tiêu đề chỉ được sử dụng cho tiêu đề, không nên sử dụng chỉ vì muốn in đậm hoặc phông chữ lớn.
• Công cụ tìm kiếm sử dụng tiêu đề để lập chỉ mục cấu trúc và nội dung trang web của bạn.
• Sử dụng đúng phần tử tiêu đề giúp trang dễ đọc hơn, dễ truy cập hơn và có lợi cho SEO.
• Sử dụng h1 làm tiêu đề chính duy nhất (quan trọng nhất), sau đó là h2 (quan trọng thứ hai), rồi h3, v.v.

Đoạn văn

Phần tử đoạn văn được sử dụng để định nghĩa cấu trúc đoạn văn của văn bản, làm cho văn bản có tổ chức và dễ đọc hơn. Nó thêm ngắt dòng trước và sau nội dung, nhóm văn bản thành các phần riêng biệt với sự phân biệt rõ ràng giữa các đoạn văn. Phần tử đoạn văn chủ yếu bao gồm thẻ <p>, biểu thị một đoạn văn.

Ví dụ:

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

Hiệu ứng:

[!Tóm tắt]

• Tài liệu HTML có thể chứa nhiều đoạn văn
• Trình duyệt tự động thêm dòng trống trước và sau đoạn văn
• Đừng quên thẻ đóng (ngay cả khi quên, hầu hết trình duyệt vẫn hiển thị bình thường)
• Nếu bạn không thích dòng trống được thêm bởi phần tử đoạn văn và muốn giảm khoảng cách dòng, hãy sử dụng thẻ <br>
• Theo mặc định, số ký tự hiển thị trong một dòng trong phần tử đoạn văn được xác định bởi chiều rộng màn hình

Siêu liên kết

Phần tử <a> được sử dụng để định nghĩa siêu liên kết, cho phép người dùng nhấp vào liên kết và điều hướng đến các trang hoặc tài nguyên khác. Thẻ <a> thường chứa một số văn bản hoặc hình ảnh, trở thành phần có thể nhấp của liên kết. Chúng ta sử dụng thuộc tính href của thẻ <a> để chỉ định địa chỉ đích của liên kết. Siêu liên kết là tính năng cơ bản của HTML, có thể liên kết đến các phần khác của trang web, hoặc đến các trang web khác, thậm chí là các trang web khác.

Ví dụ:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

Hiệu ứng:

Thuộc tính siêu liên kết

• href: Chỉ định URL của đích liên kết, đây là thuộc tính quan trọng nhất của liên kết. Có thể là URL của trang web khác, URL tệp hoặc URL của tài nguyên khác.
• target (tùy chọn): Chỉ định cách liên kết mở trong trình duyệt. Các giá trị phổ biến bao gồm _blank (mở liên kết trong tab hoặc cửa sổ mới) và _self (mở liên kết trong tab hoặc cửa sổ hiện tại, mặc định).
• title (tùy chọn): Cung cấp thông tin văn bản về liên kết, thường hiển thị khi di chuột qua liên kết.
• rel (tùy chọn): Chỉ định mối quan hệ với đích liên kết, như nofollow, noopener, noreferrer, v.v.
• class: Chỉ định lớp CSS của liên kết.
• id: Chỉ định ID CSS của liên kết.

Liên kết neo

Trong một trang web dài, chúng ta có thể muốn tạo liên kết đến các phần cụ thể trong trang. Điều này có thể đạt được thông qua liên kết neo. Đầu tiên, chúng ta cần sử dụng thuộc tính name hoặc id của thẻ <a> để đánh dấu vị trí đích, sau đó sử dụng # cộng với giá trị name hoặc id của đích trong thuộc tính href của liên kết để tạo liên kết.

Ví dụ:

1
<a href="#a1">Nhảy đến a1</a>
2
<!-- Nội dung đủ để cuộn trang hoặc <br> được bỏ qua ở đây -->
3
<a name="a1">Một số nội dung</a>

Hiệu ứng:

Sau khi nhấp vào siêu liên kết “Nhảy đến a1”, trang sẽ cuộn đến phần “nội dung a1”.

Liên kết email

Ngoài việc liên kết đến các trang web khác, thẻ <a> cũng có thể liên kết đến địa chỉ email. Bằng cách thêm mailto: trước giá trị thuộc tính href, bạn có thể tạo liên kết mà khi nhấp sẽ khởi chạy ứng dụng email mặc định của người dùng và tạo email mới.

Ví dụ:

1
<a href="mailto:757118@qq.com">Gửi email đến 757118@qq.com</a>

Hiệu ứng:

Nhấp vào siêu liên kết này sẽ khởi chạy ứng dụng email mặc định và tạo email mới gửi đến 757118@qq.com.

[!Tóm tắt]

• Khi bạn di chuyển con trỏ chuột qua một liên kết trên trang web, mũi tên sẽ biến thành bàn tay nhỏ.
• Siêu liên kết không nhất thiết phải là văn bản, hình ảnh hoặc các phần tử HTML khác cũng có thể là liên kết.
• Theo mặc định, liên kết xuất hiện trong trình duyệt như sau: Liên kết chưa truy cập hiển thị màu xanh với gạch chân. Liên kết đã truy cập hiển thị màu tím với gạch chân. Liên kết đang hoạt động hiển thị màu đỏ với gạch chân.

Ngắt dòng

Phần tử ngắt dòng <br> được sử dụng để chèn ngắt dòng trong văn bản, buộc văn bản tiếp tục trên dòng mới.

Ví dụ:

1
Đây là một dòng văn bản.<br>Đây là một dòng văn bản khác.

Hiệu ứng:

[!Tóm tắt]

• Dấu gạch chéo / trong thẻ <br> là tùy chọn. Trong HTML 4, thẻ <br /> phải có dấu gạch chéo; Trong HTML 5, dấu gạch chéo là tùy chọn.

In đậm

Phần tử <b> là thẻ kiểu văn bản cơ bản để làm văn bản in đậm, nhưng không có ngữ nghĩa nhấn mạnh. Phần tử <strong> là thẻ ngữ nghĩa để chỉ ra sự nhấn mạnh văn bản, thường được trình duyệt hiển thị dưới dạng in đậm.

Ví dụ:

1
Đây là văn bản bình thường
2
<b>Đây là văn bản in đậm</b>
3
<strong>Đây là văn bản in đậm có ngữ nghĩa nhấn mạnh</strong>

Hiệu ứng:

In nghiêng

Phần tử <i> được sử dụng để biểu thị văn bản in nghiêng, nhưng không có ngữ nghĩa nhấn mạnh. Phần tử <em> được sử dụng để biểu thị văn bản in nghiêng, thường để nhấn mạnh tầm quan trọng của văn bản hoặc tạo hiệu ứng hình ảnh.

Ví dụ:

1
Đây là văn bản bình thường
2
<i>Đây là văn bản in nghiêng</i>
3
<em>Đây là văn bản in nghiêng có ngữ nghĩa nhấn mạnh</em>

Hiệu ứng:

Gạch chân

Phần tử gạch chân <u> được sử dụng để biểu thị văn bản có gạch chân.

Ví dụ:

1
Đây là văn bản có <u>gạch chân</u>

Hiệu ứng:

[!Tóm tắt]

• Trong HTML 5, phần tử gạch chân <u> đã bị loại bỏ. Điều này có nghĩa là nó vẫn là phần tử HTML hợp lệ, nhưng không được khuyến nghị sử dụng.

Gạch ngang

Phần tử gạch ngang <del> được sử dụng để hiển thị văn bản đã bị xóa hoặc loại bỏ, và trình duyệt thường thêm đường ngang qua văn bản này.

Ví dụ:

1
Đây là văn bản <del>gạch ngang</del>

Hiệu ứng:

[!Tóm tắt]

• Trong HTML5, phần tử gạch ngang <del> đã bị loại bỏ. Điều này có nghĩa là nó vẫn là phần tử HTML hợp lệ, nhưng không được khuyến nghị sử dụng.

Đánh dấu

Phần tử <mark> được sử dụng để đánh dấu một phần văn bản để làm nổi bật. Thông thường, văn bản được đánh dấu bằng phần tử <mark> sẽ được tô sáng với nền màu vàng để làm cho nó nổi bật hơn trong tài liệu.

Ví dụ:

1
Đây là văn bản <mark>được đánh dấu</mark>

Hiệu ứng:

Chỉ số dưới và Chỉ số trên

Phần tử <sub> biểu thị chỉ số dưới và phần tử <sup> biểu thị chỉ số trên. Các phần tử chỉ số dưới và chỉ số trên thường được sử dụng trong toán học, công thức hóa học, ngày tháng, nhiệt độ và các tình huống khác.

Ví dụ:

1
H<sub>2</sub>O là công thức phân tử của nước.
2
2<sup>10</sup> bằng 1024.

Hiệu ứng: