Định dạng văn bản trong HTML – HTML Text Formatting

Im đậm, in nghiêng, chỉ số mũ, … là những những thứ mà bạn vẫn thường thấy ở các website/blog. Vậy chúng được tạo ra như thế nào với HTML? Chúng được gọi chung là kiểu văn bản và ở bài viết này, chúng ta sẽ tìm hiểu về nó.

Ví dụ mở đầu:

<p><b>Văn bản đậm</b></p>
<p><i>Văn bản in nghiêng</i></p>
<p>Đây là<sub> chỉ số chân</sub> và <sup>chỉ số mũ</sup></p>

Xem thử

Các phần tử định dạng trong HTML

Ở bài trước chúng ta đã tìm hiểu cách định dạng một phần tử với Style nhưng một số style đặc biệt cũng được HTML quy định bằng các phần tử riêng như <b><strong> hay <i>.

Các yếu tố định dạng được thiết kế để hiển thị các loại văn bản đặc biệt:

  • <b> – Chữ in đậm
  • <strong> – Văn bản quan trọng
  • <i> – Văn bản in nghiêng
  • <em> – Đoạn văn bản được nhân mạnh
  • <mark> – Văn bản được đánh dấu
  • <small> – Văn bản nhỏ
  • <del> – Văn bản đã xóa
  • <ins> – Văn bản được chèn
  • <sub> – Văn bản chân
  • <sup> – Văn bản mũ

Phần tử <b> và <strong> trong HTML

Về cách hiển thị, hai phần tử này đều cho đầu ra là văn bản được in đậm nhưng về mặt ý nghĩa thì có sự khác biệt.

Phần tử <b> cho văn bản được bôi đậm nhưng không một ý nghĩa quan trọng nào.

<p>This text is normal.</p>
<p><b>This text is bold.</b></p>

Xem thử

Phần tử <strong> cũng cho văn bản được bôi đậm nhưng mang một ý nghĩa quan trọng nào đó.

<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>

Xem thử

Phần tử <i> và <em> trong HTML

Cũng tương tự như phần tử bôi đậm ở trên <i> và <em> cũng cho ra văn bản được in nghiêng nhưng khác nhau ở mức độ quan trọng của văn bản được nằm bên trong.

Phần tử <i> cho văn bản in nghiêng nhưng không mang ý nghĩa quan trọng.

<p>This text is normal.</p>
<p><i>This text is italic.</i></p>

Xem thử

Phần tử <em> cũng cho văn bản in nghiêng nhưng mang ý nghĩa quan trọng, nhấn mạnh.

<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>

Xem thử

Phần tử <small> trong HTML

Phần tử <em> đượ sử dụng để hiển thị một văn bản nhỏ hơn so với mặc định.

<h2>HTML <small>Small</small> Formatting</h2>

Xem thử

Phần tử <mark> trong HTML

Được sử dụng để đánh dấu (bôi màu) văn bản.

<h2>HTML <mark>Marked</mark> Formatting</h2>

Xem thử

Phần từ <del> trong HTML

Sử dụng để hiển thị một đoạn văn bản như đã xóa (bị gạch ngang) trong văn bản.

<p>My favorite color is <del>blue</del> red.</p>

Xem thử

Phần từ  <ins> trong HTML

Được sử dụng để đánh dấu đoạn văn bản đã được chèn thêm vào.

<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>

Xem thử

Phần tử <sub> trong HTML

Được sử dụng để tạo chỉ số dưới (dùng trong các công thức toán hoặc hóa học).

<p>This is <sub>subscripted</sub> text.</p>

Xem thử

Phần tử <sup> trong HTML

Tưởng tự như  <sub>,  <sup> được sử dụng để tạo chỉ số trên.

<p>This is <sup>superscripted</sup> text.</p>

Xem thử

Trên đây mình đã giới thiệu một số phần tử được sử dụng để định dạng văn bản. Nếu có bất kỳ câu hỏi nào, bạn có thể bình luận bên dưới để chúng ta cùng thảo luận nhé.

Bài cùng chuyên mục
Bình luận bài viết
Loading...