Các thẻ HTML định dạng văn bản

Bài hôm nay chúng ta sẽ cùng tìm hiểu các thẻ HTML định dạng văn bản thường dùng trong một trang web. Bài học nằm trong Serie học HTML căn bản.

Khi bạn vào một website bất kỳ bạn thường thấy rất nhiều các kiểu định dạng khác nhau cho văn bản như in đậm, in nghiêng, gạch dưới, gạch ngang nhìn rất bắt mắt và chuyên nghiệp. Tiếp tục Serie này, hôm nay mình sẽ giới thiệu đến các bạn tất cả các thẻ định dạng văn bản trên.

Các thẻ HTML định dạng văn bản thông dụng:

Dưới đây là danh sách những thẻ HTML dùng để định dạng văn bản

Thẻ P – phân đoạn văn bản

Mỗi đoạn văn bản sẽ được xuống dòng và cách nhau với một tỷ lệ nhất định.



<p> Đây là một đoạn văn sẽ được phân đoạn theo tỷ lệ nhất định. </p>

<p> Học HTML căn bản dành cho người mới bắt đầu. </p>


Kết quả:

các thẻ html định dạng văn bản

Thẻ br – xuống hàng

Thẻ br dùng để xuống hàng, riêng thẻ br chỉ dùng thẻ mở hoặc thẻ đóng

 <p> Học HTML căn bản tại <br/> BlogLoi.com </p> 

cac-the-html-dinh-dang-van-ban-01

Thẻ hr – tạo đường gạch ngang

Thẻ hr dùng để tạo một đường gạch ngang, tương tự thẻ br thẻ hr cũng chỉ dùng thẻ mở hoặc thẻ đóng

 <p> Dưới đây là một đường gạch ngang <hr/>  </p> 

cac-the-html-dinh-dang-van-ban-04

Thẻ pre – định dạng sẵn

Thẻ pre thường được dùng để đăng một câu đối thoại hoặc in một đoạn mã để cho dễ phân biệt với các văn bản thông thường.

 <pre> Thẻ định dạng sẵn </pre> 

Thẻ b – Bôi đậm

 <p> Hướng dẫn học <b>HTML</b> căn bản </p> 

các thẻ html định dạng văn bản 007

Thẻ strong – nhấn mạnh

Thẻ strong tương tự như thẻ b. Nhưng có ý nhấn mạnh hơn giúp các công cụ tìm kiếm dễ dàng phân biệt.

 <p> Đến khi nào thì mới có <strong>người yêu</strong> </p> 

các thẻ html định dạng văn bản 008

Thẻ big – chữ lớn

Thẻ big dùng để định dạng chữ lớn hơn bình thường

 <p> Hướng dẫn học <big>lập trình</big> web </p> 

các thẻ html định dạng văn bản 0086

Thẻ small – chữ nhỏ

Ngược lại với thẻ big, thẻ small dùng để định dạng chữ nhỏ hơn bình thường

 <p> Hướng dẫn học <small>lập trình</small> web </p> 

các thẻ html định dạng văn bản 0965

Thẻ i – in nghiêng

Thẻ i dùng để định dạng chữ in nghiêng

 <p> Hướng dẫn học <i>lập trình</i> web </p> 

các thẻ html định dạng văn bản 09532

Thẻ u – gạch dưới chữ viết

Thẻ u dùng để gạch chân chữ viết

 <p> Hướng dẫn học <u>lập trình</u> web </p> 

các thẻ html định dạng văn bản 008754

Thẻ code – định dạng một đoạn mã

Thẻ code dùng để định dạng một đoạn mã nào đó trong bài viết

 <p> Thẻ Meta được khai báo nằm trong cặp thẻ <code><head> </head></code></p> 

các thẻ định dạng văn bản

Thẻ del – gạch ngang chữ

Thẻ del dùng để gạch ngang chữ.

 <p> Hướng dẫn học <del>lập trình</del> web </p> 

các thẻ html định dạng văn bản 095234

Thẻ sub – nhảy xuống dưới

Thẻ sub thường được sử dụng khi định dạng các phương trình có mũ dưới

 <p> Giải phương trình sau X<sub>2<sub> + 1 </p> 

các thẻ html định dạng văn bản 096211

Thẻ sup – nhảy lên trên

Thẻ sup dùng để định dạng các mũ phương trình

 <p> Giải phương trình sau 2X<sup>3</sup> + 3X + 1 </p> 

các thẻ html định dạng văn bản 0111999

Thẻ span – định dạng văn bản

Thẻ span tương tự như thẻ p, nhưng có ý nghĩa rộng hơn bao quanh 1 vùng văn bản.

 <span> Hướng dẫn học lập trình thiết kế website </span> 

Thẻ mark – tô sáng chữ viết

Thẻ mark dùng để tô sáng, đánh dấu hightline cho đoạn văn

 <p> Hướng dẫn học lập trình web <mark>HTML</mark> </p> 

các thẻ html định dạng văn bản 088421

Căn lề văn bản

Chúng ta sẽ sử dụng thuộc tính text-align với các giá trị left, right, centerjustify

 <p style="text-align: center"> Căn giữa văn bản </p> 

Font chữ

Một số font chữ phổ biến thường dùng như Arial, Time New Roman

 <p style="font-family: Arial"> Font chữ Arial </p> 

Kích thước chữ

Có một số đơn vị bạn có thể sử dụng như px, %, pt.. phổ biến nhất dùng px

 <p style="font-size: 14px"> Chữ có kích thước 14px</p> 

 

Lời kết : Kết thúc bài hôm nay bạn đã có thể nắm rõ các thẻ HTML định dạng văn bản được sử dụng phổ biến nhất hiện nay, việc sử dụng các thẻ định dạng giúp văn bản của trang web thêm phần hoa mỹ và chuyên nghiệp hơn.

Chúc bạn thành công!

 

Những bài bạn nên xem:
  1. Các thẻ HTML khai báo thông tin web căn bản
  2. HTML là gì? Bố cục HTML của một trang web