Format HTML, hay còn gọi là định dạng văn bản trong HTML, là việc sử dụng các thẻ HTML cụ thể để sửa đổi giao diện và cấu trúc của văn bản trên trang web. Format HTML cho phép bạn định dạng văn bản theo nhiều cách khác nhau như in đậm, in nghiêng, gạch chân, highlight hoặc gạch ngang chữ.
Đọc bài viết sau đây để được giải đáp chi tiết hơn về:
- Tổng quan về format HTML như định nghĩa, cách sử dụng và các loại định dạng văn bản trong HTML
- Tổng hợp các thẻ định dạng văn bản HTML thường gặp
- Ví dụ về cách định dạng văn bản trong HTML
- Các công cụ hỗ trợ định dạng văn bản trong HTML
Format HTML là gì?
Format HTML là cách sử dụng các thẻ HTML để định dạng văn bản trên trang web. Các thẻ này giúp thay đổi kiểu chữ, căn chỉnh nội dung, làm nổi bật thông tin quan trọng và đảm bảo văn bản hiển thị đúng theo mong muốn. Việc sử dụng đúng các thẻ format HTML giúp nâng cao trải nghiệm người dùng và tối ưu hóa nội dung hiển thị trên trình duyệt.
<p><strong>Chữ in đậm</strong> và <em>chữ in nghiêng</em>.</p> <p>Văn bản có thể được <u>gạch chân</u> hoặc <mark>tô sáng</mark>.</p>
Trong đó:
- <strong> làm đậm chữ
- <em> làm nghiêng chữ
- <u> gạch chân chữ
- <mark> tô sáng chữ
Các dạng format HTML
Format HTML có thể được chia thành hai loại chính là thẻ logic (logical tag) và thẻ vật lý (physical tag).
Thẻ format HTML Logical tag (<strong>, <em>)
Logical tag truyền tải nội dung, ý nghĩa của văn bản mà không nhất thiết phải thay đổi giao diện trực quan. Các thẻ này giúp trình duyệt, công cụ tìm kiếm và công nghệ hỗ trợ hiểu được mục đích của văn bản.
<em>
Nhấn mạnh nội dung quan trọng, thường được in nghiêng. Mang ý nghĩa rằng văn bản có ý quan trọng cần được người xem chú ý hoặc cần được nhấn mạnh.
Ví dụ:
<em>Chú ý phần này</em>
→ Nhấn mạnh để người đọc tập trung.
<strong>
Đánh dấu văn bản quan trọng bằng cách in đậm, mang ý nghĩa rằng nội dung quan trọng cần được chú trọng.
Ví dụ:
<strong>Cảnh báo!</strong>
→ Thu hút sự chú ý đến thông tin quan trọng.
Logical tag thường dùng trong SEO để nhấn mạnh từ khóa hoặc cải thiện khả năng đọc cho người dùng khiếm thị qua screen reader.
Thẻ format HTML Physical tag (<b>, <i>)
Trong khi đó, physical tag ảnh hưởng trực tiếp đến cách văn bản hiển thị trên trang web bằng cách thay đổi phông chữ, kích thước hoặc kiểu chữ.
<b>
In đậm nội dung văn bản.
Ví dụ:
<b>Tiêu đề phụ</b>
→ Làm đậm mà không nhấn mạnh ý nghĩa.
<i>
In nghiêng nội dung văn bản.
Ví dụ:
<i>Tên sách</i>
→ Tạo kiểu nghiêng cho đẹp mắt.
Xem thêm: Giải đáp “tất tần tật” những điều cần biết về HTML
Physical tag phù hợp cho thiết kế giao diện, làm đẹp văn bản mà không cần quan tâm đến ngữ nghĩa.
Ngoài ra, khi sử dụng 2 thẻ này bạn cũng cần lưu ý:
- Tránh lạm dụng thẻ physical tag khi ngữ nghĩa quan trọng, vì chúng không được công cụ tìm kiếm đánh giá cao.
- Kết hợp cả hai loại thẻ để đạt hiệu quả tốt nhất về cả giao diện và ý nghĩa.
Top 10+ các thẻ format HTML phổ biến
Dưới đây ITviec sẽ liệt kê các thẻ định dạng thường gặp trong các phiên bản HTML mới nhất.
| Format HTML tags | Công dụng |
| <b> | In đậm văn bản nhưng không mang ý nghĩa quan trọng. |
| <strong> | In đậm văn bản và nhấn mạnh tầm quan trọng của nội dung. |
| <i> | In nghiêng văn bản nhưng không mang ý nghĩa đặc biệt. |
| <em> | In nghiêng văn bản và nhấn mạnh nội dung. |
| <u> | Gạch chân văn bản. |
| <mark> | Tô màu đánh dấu văn bản. |
| <sup> | Hiển thị chỉ số trên (superscript) |
| <sub> | Hiển thị chỉ số dưới (subscript) |
| <del> | Gạch ngang văn bản để chỉ nội dung bị xóa. |
| <ins> | Gạch dưới văn bản để chỉ nội dung được thêm vào. |
| <big> | Hiển thị văn bản với kích thước lớn hơn bình thường. |
| <small> | Hiển thị văn bản với kích thước nhỏ hơn bình thường. |
Thẻ <b> – In đậm văn bản
Thẻ <b> (bold – in đậm) là physical tag được sử dụng để in đậm văn bản nhưng không mang ý nghĩa nhấn mạnh nội dung.
<p> Đây là nội dung <b>in đậm</b>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <strong> – In đậm nội dung quan trọng
<strong> là semantic tag (thẻ ngữ nghĩa) được sử dụng để biểu thị rằng văn bản bên trong thẻ có nội dung quan trọng. Điều này được thể hiện bằng cách làm cho văn bản được in đậm.
<p> Đây là nội dung <strong>cần được nhấn mạnh</strong>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <i> – In nghiêng văn bản
<i> là physical tag được sử dụng để làm cho văn bản nghiêng. Thường được sử dụng để chỉ văn bản nước ngoài, bài viết nghiên cứu khoa học, suy nghĩ, trích dẫn,…
<p> Định dạng chữ <i>in nghiêng</i>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <em> – Nhấn mạnh nội dung quan trọng
Thẻ HTML <em> là thẻ ngữ nghĩa (semantic tag) được sử dụng để biểu thị rằng văn bản bên trong thẻ đang được nhấn mạnh. Đây là thẻ ngữ nghĩa trái ngược với <i>, không có bất kỳ ý nghĩa ngữ nghĩa nào.
<p> Nội dung này <em>cần được nhấn mạnh (emphasized)</em>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <u> – Gạch chân
Thẻ <u> là physical tag được sử dụng để gạch chân văn bản.
<p>Định dạng <u>gạch chân văn bản</u>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <mark> – Đánh dấu văn bản
Thẻ <mark> là physical tag được sử dụng để highlight, đánh dấu văn bản nổi bật.
<p> Nội dung này <mark>quan trọng</mark>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <sup> – Chỉ số trên
Thẻ <sup> được sử dụng để tạo văn bản chỉ số trên. Văn bản được đặt cao hơn nửa ký tự so với văn bản khác và có kích thước nhỏ hơn, ví dụ ký hiệu số mũ trong toán học.
<p> Công thức tính lũy thừa là a <sup>n</sup> =a.a.a.a.a..<p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <sub> – Chỉ số dưới
Thẻ <sub> được sử dụng để tạo văn bản chỉ số dưới. Văn bản được đặt thấp hơn nửa ký tự so với văn bản khác và có kích thước nhỏ hơn, ví dụ như công thức hóa học.
<p>Công thức hóa học của nước là H<sub>2</sub>O<p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <del> – Gạch ngang văn bản
Thẻ <del> là thẻ ngữ nghĩa (semantic tag) được sử dụng để biểu thị văn bản bị xóa hoặc thay đổi.
<p> Đây là nội dung <del>bị xóa</del>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <ins> – Nội dung được thêm vào
Thẻ <ins> là thẻ ngữ nghĩa (semantic tag) được sử dụng để biểu thị văn bản đã được chèn vào tài liệu. Thẻ <ins> thường theo sau một số văn bản đã xóa.
<p> Đây là nội dung <del>bị xóa</del> <ins>được thêm vào</ins>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <big> – Kích thước chữ lớn hơn
Thẻ <big> là physical tag được sử dụng để làm cho văn bản có kích thước phông chữ lớn hơn một cỡ chữ so với văn bản xung quanh.
Lưu ý: Thẻ <big> không còn được hỗ trợ trong HTML5, nên dùng CSS (font-size) thay thế.
<p>Văn bản này có kích thước <big>lớn hơn</big>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Thẻ <small> – Kích thước chữ nhỏ hơn
Thẻ <small> là physical tag được sử dụng để làm cho văn bản có kích thước phông chữ nhỏ hơn một cỡ chữ so với văn bản xung quanh.
<p>Văn bản này có kích thước <small>nhỏ hơn</small>.</p>
Hình ảnh hiển thị của đoạn mã trên.
Ví dụ cách định dạng văn bản trong HTML
Ví dụ 1: Định dạng văn bản thông thường
Trong ví dụ này, trình bày nhiều thẻ định dạng văn bản khác nhau như <strong> dành cho văn bản quan trọng và in đậm, <em> dành cho văn bản được nhấn mạnh và in nghiêng, <b> định dạng chữ in đậm, <i> định dạng chữ in nghiêng và <mark> dành cho văn bản bạn muốn highlight.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ví dụ về định dạng văn bản, Format HTML</title> </head> <body> <p> <strong>Strong:</strong> Nội dung này được in đậm. </p> <p> <em>Emphasized:</em> Nội dung này được nhấn mạnh và in nghiêng </p> <p> <b>Bold:</b> Định dạng chữ in đậm </p> <p> <i>Italic:</i> Định dạng chữ in nghiêng </p> <p> <mark>Marked:</mark> Định dạng văn bản highlighted </p> </body> </html>
Kết quả hiển thị của đoạn mã trên:
Ví dụ 2: Kết hợp Physical tag và Logical tag
Ví dụ này, thể hiện cách kết hợp các thẻ logical (mang ý nghĩa ngữ nghĩa) và physical (thay đổi giao diện) để tạo ra định dạng văn bản nâng cao hơn. Các thẻ được sử dụng:
- <strong> và <em>: Kết hợp in đậm và in nghiêng để nhấn mạnh tối đa.
- <sub> và <sup>: Định dạng chỉ số dưới và chỉ số trên.
- <del> và <ins>: Đánh dấu văn bản bị xóa và được chèn thêm.
- <small>: Giảm kích thước chữ cho chú thích.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Định dạng văn bản nâng cao</title> </head> <body> <p>Đây là nội dung <strong><em>rất quan trọng</em></strong> cần được in đậm. </p> <p>Công thức hóa học của nước là H <sub>2</sub>O. </p> <p> <del>Văn bản đã xóa</del> và <ins>văn bản mới được chèn</ins> sẽ hiển thị ở đây. </p> <p><small>Văn bản nhỏ hơn</small> có thể được sử dụng cho các tuyên bố từ chối trách nhiệm. </p> <p>E = mc<sup>2</sup></p> </body> </html>
Kết quả hiển thị của đoạn mã trên:
Câu hỏi thường gặp về Format HTML
Làm thế nào để thay đổi màu chữ trong HTML?
Để thay đổi màu chữ, bạn sử dụng thuộc tính style và thuộc tính color. Bạn có thể tham khảo thêm về các màu sắc cũng như bảng màu HTML thường được dùng để đổi màu chữ, khung văn bản hay highlight văn bản tốt hơn.
Ví dụ như sau:
<span style="color: purple;">Văn bản này có màu tím.</span>
Kết quả hiển thị của đoạn mã trên.
Sự khác biệt giữa <b> và <strong> là gì?
- <b> chỉ làm chữ đậm mà không mang ý nghĩa đặc biệt về nội dung.
- <strong> cũng làm chữ đậm nhưng nhấn mạnh nội dung, có tác động đến SEO.
Có thể sử dụng CSS thay thế định dạng văn bản trong HTML không?
CSS giúp tùy chỉnh giao diện nâng cao hơn, nhưng HTML vẫn cần thiết để xác định cấu trúc cơ bản của văn bản. Tốt nhất nên kết hợp cả hai để đạt hiệu quả tối ưu.
Làm thế nào để căn giữa văn bản trong HTML?
Hiện tại, việc sử dụng thẻ <center> để căn giữa văn bản không còn được ứng dụng rộng rãi trong phiên bản HTML mới nhất. Do đó, bạn có thể sử dụng CSS như sau:
<p style="text-align: center;">Văn bản căn giữa</p>
Xem thêm: Hướng dẫn căn giữa CSS chi tiết theo chiều ngang, dọc, hai chiều
Tổng kết về Format HTML
Format HTML giúp bạn định dạng văn bản dễ đọc hơn khi nội dung được hiển thị trên trang web. Từ in đậm, in nghiêng, gạch chân đến căn chỉnh nội dung, các thẻ HTML cung cấp nhiều tùy chọn để tối ưu hóa trải nghiệm người dùng. Hy vọng qua bài viết này, bạn đã nắm rõ cách sử dụng các thẻ định dạng HTML để trình bày và tối ưu nội dung một cách hiệu quả nhé!