Trong quá trình xây dựng trang web, việc định dạng văn bản là một phần quan trọng để cải thiện trải nghiệm người dùng và giúp thông tin trên trang trở nên dễ hiểu hơn. Trong HTML, có rất nhiều thẻ hỗ trợ việc định dạng văn bản một cách linh hoạt. Hôm nay, chúng ta sẽ tìm hiểu về các thẻ cơ bản để định dạng văn bản trong HTML.

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

HTML cung cấp 6 cấp độ tiêu đề từ <h1> đến <h6>. Thẻ tiêu đề giúp xác định các phần quan trọng của nội dung và tạo cấu trúc cho trang web. Mỗi cấp độ tiêu đề có độ lớn khác nhau, trong đó <h1> là tiêu đề lớn nhất và quan trọng nhất, còn <h6> là nhỏ nhất.

Ví dụ:

<h1>Đây là tiêu đề cấp 1</h1>
<h2>Đây là tiêu đề cấp 2</h2>
<h3>Đây là tiêu đề cấp 3</h3>
<h4>Đây là tiêu đề cấp 4</h4>
<h5>Đây là tiêu đề cấp 5</h5>
<h6>Đây là tiêu đề cấp 6</h6>

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

Thẻ <p> được dùng để tạo đoạn văn. Nội dung trong thẻ này sẽ tự động có khoảng cách giữa các đoạn văn khác.

Ví dụ:

<p>Đây là một đoạn văn trong HTML. Bạn có thể viết nội dung ở đây và HTML sẽ tự động thêm khoảng trắng trước và sau đoạn.</p>

3. Thẻ in đậm (<b>) và thẻ quan trọng (<strong>)

Thẻ <b> được sử dụng để in đậm văn bản, nhưng nó không mang ý nghĩa nhấn mạnh. Nếu bạn muốn nhấn mạnh văn bản, nên sử dụng thẻ <strong>. Trình duyệt thường hiển thị cả hai thẻ này dưới dạng chữ đậm, nhưng <strong> mang ý nghĩa ngữ nghĩa mạnh hơn.

Ví dụ:

<p>Văn bản này sẽ <b>in đậm</b>.</p>
<p>Văn bản này sẽ <strong>in đậm và nhấn mạnh</strong>.</p>

4. Thẻ in nghiêng (<i>) và thẻ nhấn mạnh (<em>)

Thẻ <i> sẽ làm nghiêng văn bản nhưng không mang ý nghĩa ngữ nghĩa đặc biệt. Thẻ <em>, ngược lại, dùng để nhấn mạnh văn bản và mang ý nghĩa mạnh hơn. Trình duyệt thường hiển thị cả hai thẻ này bằng cách làm nghiêng văn bản.

Ví dụ:

<p>Văn bản này sẽ <i>in nghiêng</i>.</p>
<p>Văn bản này sẽ <em>in nghiêng và nhấn mạnh</em>.</p>

5. Thẻ gạch chân (<u>)

Thẻ <u> được sử dụng để gạch chân văn bản. Điều này thường được dùng trong các đoạn văn bản cần nhấn mạnh một cách trực quan, nhưng hiện tại người dùng thường tránh việc gạch chân quá nhiều do nó dễ gây nhầm lẫn với các liên kết.

Ví dụ:

<p>Văn bản này sẽ được <u>gạch chân</u>.</p>

6. Thẻ gạch ngang (<s> hoặc <del>)

Thẻ <s> (strikethrough) được dùng để gạch ngang văn bản, thường được sử dụng để thể hiện nội dung đã lỗi thời. Ngoài ra, thẻ <del> (deleted) cũng có tác dụng tương tự nhưng nhấn mạnh việc văn bản này đã bị xóa hoặc không còn áp dụng.

Ví dụ:

<p>Văn bản này sẽ được <s>gạch ngang</s> để thể hiện nội dung lỗi thời.</p>
<p>Văn bản này đã được <del>xóa</del>.</p>

7. Thẻ định dạng chỉ số trên (<sup>) và chỉ số dưới (<sub>)

Thẻ <sup> sẽ hiển thị văn bản dưới dạng chỉ số trên, thường được dùng trong công thức toán học hoặc các chỉ số mũ. Thẻ <sub> sẽ hiển thị chỉ số dưới, phổ biến trong các công thức hóa học hoặc chú thích khoa học.

Ví dụ:

<p>Công thức hóa học của nước là H<sub>2</sub>O.</p>
<p>Chỉ số mũ: X<sup>2</sup>.</p>

8. Thẻ trích dẫn (<blockquote>, <q>)

• Thẻ <blockquote> được dùng để trích dẫn một đoạn văn dài từ nguồn khác. Văn bản sẽ được thụt vào trong so với các đoạn khác.
• Thẻ <q> dùng để trích dẫn một câu ngắn và sẽ tự động thêm dấu ngoặc kép quanh nội dung.

Ví dụ:

<blockquote>
  Đây là một đoạn văn trích dẫn dài. Thường được dùng để trích dẫn một phần nội dung từ tài liệu hoặc bài viết khác.
</blockquote>

<p>Trích dẫn ngắn: <q>Đây là một câu trích dẫn ngắn.</q></p>

9. Thẻ mã nguồn (<code>)

Khi cần hiển thị mã nguồn hoặc đoạn văn bản dạng mã lệnh, chúng ta sử dụng thẻ <code>. Văn bản trong thẻ này sẽ được định dạng bằng font chữ monospace.

Ví dụ:

<p>Ví dụ về mã HTML: <code><p>Đây là đoạn văn trong HTML.</p></code></p>

10. Thẻ preformat (<pre>)

Thẻ <pre> giữ nguyên định dạng của văn bản bao gồm cả khoảng trắng và dòng mới. Điều này rất hữu ích khi bạn muốn hiển thị văn bản theo đúng định dạng mà bạn nhập vào.

Ví dụ:

<pre>
  Đây là văn bản trong thẻ <pre>.
  Các khoảng trắng và dòng mới sẽ được giữ nguyên.
</pre>

11. Thẻ đánh dấu (<mark>)

Thẻ <mark> giúp đánh dấu hoặc làm nổi bật một phần văn bản. Thường được sử dụng để thu hút sự chú ý vào đoạn văn bản quan trọng.

Ví dụ:

<p>Văn bản này đã được <mark>đánh dấu</mark> để làm nổi bật.</p>

Kết luận

Việc nắm rõ các thẻ định dạng văn bản trong HTML giúp bạn tạo ra những nội dung dễ đọc, dễ hiểu và hấp dẫn người dùng hơn. Hãy thử áp dụng các thẻ này khi xây dựng trang web để tối ưu hóa trải nghiệm người dùng và cải thiện tính thẩm mỹ cho trang web của bạn!

Hy vọng bài viết này giúp bạn hiểu thêm về cách định dạng văn bản trong HTML. Chúc bạn thành công trên hành trình học lập trình web của mình!