NỘI DUNG BÀI VIẾT
Giới thiệu
HTML cung cấp một số thẻ đặc biệt để xử lý văn bản. Ngoài việc hiển thị văn bản trong HTML theo cách thông thường, bạn có thể sử dụng các thẻ định dạng văn bản trong HTML để làm cho văn bản trên website trông nổi bật hơn.
Ví dụ về định dạng văn bản:
Đây là văn bản được in đậm
Đây là văn bản được in nghiêng
Đây là chữ viết lên trên
Các thẻ định dạng của HTML
Trong bài học trước, bạn đã được học về một số style trong HTML, sử dụng thuộc tính style trong HTML.
HTML cũng định nghĩa các thẻ đặc biệt để định dạng văn bản nhằm nhấn mạnh ý nghĩa nào đó.
HTML sử dụng các phần tử như <b>và <i> để định dạng văn bản thành chữ in đậm và chữ in nghiêng
Các phần tử định dạng được thiết kế để hiển thị các kiểu text đặc biệt:
- Chữ đậm
- Chữ quan trọng
- Chữ nghiêng
- Chữ nhấn mạnh
- Chữ đánh dấu
- Chữ nhỏ
- Chữ gạch ngang
- Chữ gạch chân dưới
- Chữ viết thấp xuống
- Chữ viết cao lên
Định dạng chữ đậm và chữ quan trọng trong HTML
Thẻ <b> định dạng chữ đậm trong HTML.
Ví dụ
<p>This text is normal.</p> <p><b>This text is bold</b>.</p>
Thẻ <strong> dùng để nhấn mạnh sự quan trọng của một đoạn văn bản, trình duyệt web thể hiện kết quả giống như thẻ <b>, nhưng về mặt ý nghĩa thì khác nhau: thẻ <b> đơn giản là làm đậm phần văn bản, còn thẻ <strong> nhấn mạnh tầm quan trọng (mức ý nghĩa) của văn bản đó.
Ví dụ
<p>This text is normal.</p> <p><strong>This text is strong</strong>.</p>
Định dạng chữ nghiêng và chữ nhấn mạnh trong HTML
Thẻ <i> trong HTML định dạng in nghiêng văn bản.
Ví dụ
<p>This text is normal.</p> <p><i>This text is italic</i>.</p>
Thẻ<em> dùng để nhấn mạnh đoạn văn bản. Trình duyệt web hiển thị kết quả giống như thẻ <i>. Nhưng về mặt ngữ nghĩa là khác nhau: thẻ <i> chỉ đơn thuần hiển thị chữ nghiêng, còn thẻ <em> ngoài việc hiển thị chữ nghiêng, nó còn nhấn mạnh ngữ nghĩa của đoạn văn bản mà chúng ta đánh dấu, ví dụ như một chương trình có thể đọc nội dung của một trang, nó đọc đến phần nội dung được đánh dấu bởi thẻ <em> thì nó sẽ nhấn mạnh đoạn đó, còn với thẻ <i> thì không.
Ví dụ
<p>This text is normal.</p> <p><em>This text is emphasized</em>.</p>
Trình duyệt hiển thị thẻ <strong> giống như thẻ <b>, và thẻ <em> giống như thẻ <i>.Tuy nhiên có sự khác nhau trong ý nghĩa của thẻ <b> định dạng chữ đậm và thẻ <i> định dạng chữ in nghiêng trong văn bản, nhưng thẻ <strong> và thẻ <em> nhấn mạnh tầm quan trọng về ngữ nghĩa trong văn bản.
Định dạng chữ nhỏ HTML
Thẻ <small> định dạng chữ nhỏ trong văn bản
Ví dụ
<h2>HTML <small>Small</small> Formatting</h2>
Định dạng chữ đánh dấu trong HTML
Thẻ <mark> dùng để định dạng đánh dấu hoặc bôi màu văn bản.
Ví dụ
<h2>HTML <mark>Marked</mark> Formatting</h2>
Định dạng chữ gạch ngang trong HTML
Thẻ <del> dùng để định dạng chữ gạch ngang trong văn bản.
Ví dụ
<p>My favorite color is <del>blue</del> red.</p>
Định dạng chữ gạch chân dưới trong HTML
Thẻ <ins> trong HTML định dạng chèn thêm văn bản.
Ví dụ
<p>My favorite <ins>color</ins> is red.</p>
Định dạng chữ viết thấp xuống trong HTML
Thẻ <sub> trong HTML định dạng chữ viết thấp xuống so với chữ bình thường trong văn bản.
Ví dụ
<p>This is <sub>subscripted</sub> text.</p>
Định dạng chữ viết cao lên trong HTML
Thẻ <sup> định dạng chữ viết cao lên so với chữ bình thường trong văn bản.
Ví dụ
<p>This is <sup>superscripted</sup> text.</p>
Các thẻ định dạng văn bản trong HTML
| Thẻ | Mô tả |
|---|---|
| <b> | Định nghĩa chữ đậm |
| <em> | Định nghĩa chữ nhấn mạnh |
| <i> | Định nghĩa chữ nghiêng |
| <small> | Định nghĩa chữ nhỏ |
| <strong> | Định nghĩa chữ quan trọng |
| <sub> | Định nghĩa chữ viết thấp xuống |
| <sup> | Định nghĩa chữ viết cao lên |
| <ins> | Định nghĩa chữ gạch chân |
| <del> | Định nghĩa |
| <mark> | Định nghĩa chữ đánh dấu/tô màu |
Kết luận
Qua đây là một số chia sẻ về thẻ định dạng văn bản trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
