Đối với các bạn mới bước chân vào con đường thiết kế, xây dựng website thì định dạng văn bản luôn là một công việc gây khá nhiều khó khăn bởi trong HTML có khá nhiều thẻ để định dạng văn bản, cùng với đó là chưa thành thạo cách sử dụng của các thẻ như phân biệt giữa thẻ <b> và <strong>,..... Vì vậy trong bài viết này chúng ta sẽ đi tìm hiểu về công dụng và cách sử dụng của các thẻ định dạng văn bản trong HTML.
Trong HTML các thẻ heading được chia làm 6 cấp bậc, với kích thước nhỏ dần như sau:
Để trình duyệt web biên dịch được nội dung như trên chúng ta sử dụng lần lượt các thẻ H từ <h1> đến <h6> trong cặp thẻ <body> như sau:
<html>
<head>
<title>Thẻ Heading</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Trong đó thẻ <h1> là thẻ hiển thị tiêu đề có kích thước lớn nhất vì vậy nó thường được sử dụng để làm thẻ tiêu đề cho bài viết, danh mục. Tiếp đó thẻ <h2> thường được sử dụng làm tiêu đề con của thẻ <h1>, thẻ <h3> sẽ là tiêu đề con của thẻ <h2>, theo cấp bậc như vậy đến thẻ <h6> sẽ là tiêu đề con của thẻ <h5>.
Giống như 1 bài văn, để người đọc dễ dàng hiểu nội dung và không gây nhàm chán thì việc chia nhỏ văn bản thành các đoạn văn nhỏ là một công việc quan trọng. Trong HTML cũng cho phép bạn định dạng từng đoạn văn bản. Theo mặc định, trình duyệt sẽ hiển thị mỗi đoạn trên một dòng mới như sau:
Cú pháp: Thẻ <p> là thẻ có cả thẻ đóng và thẻ mở được khai báo trong cặp thẻ <body> như sau:
<body>
<p>Nội dung đoạn văn thứ nhất</p>
<p>Nội dung đoạn văn thứ 2</p>
.....
<p>Nội dung đoạn văn thứ n</p>
</body>
Giống như trong word, "b" và "i" là viết tắt của Bold và Italic, đại diện cho nội dung được in đậm hay in nghiêng. Ví dụ
<html>
<head>
<title>Thẻ Heading</title>
<meta charset="utf-8">
</head>
<body>
//Chúng ta kết hợp với thẻ <p> ở trên luôn, bạn có thể bỏ thẻ <p>, nội dung vẫn dược hiển thị đúng.
<p> <b>Đây là thẻ in đậm</b> </p>
<p> <i>Đây là thẻ in nghiêng</i> </p>
</body>
</html>
Kết quả:
<html>
<head>
<title>First Web</title>
<meta charset="utf-8">
</head>
<body>
<p> H<sub>2</sub>O </p>
<p> x<sup>2</sup>-4x+4=0 </p>
</body>
</html>
Kết quả:
<html>
<head>
<title>First Web</title>
<meta charset="utf-8">
</head>
<body>
<blockquote> Đây là một trích dẫn lấy từ Wikipedia </blockquote>
<q> Đây là một trích dẫn lấy từ Wikipedia </q>
</body>
</html>
Kết quả:
<html>
<head>
<title>First Web</title>
<meta charset="utf-8">
</head>
<body>
<p> <abbr title="SUNTECH">ST</abbr> </p>
<p> <acronym title="Lập Trình Web SUNTECH">LTWST</acronym> </p>
</body>
</html>
Các bạn thử chạy đoạn code trên mà đưa chuột đến từ viết tắt và xem kết quả nhé!
Ngoài ra HTML còn hỗ trợ rất nhiều thẻ để định dạng văn bản khác nữa như sau:
Trên đây là tổng hợp các thẻ định dạng văn bản trong HTML hay được sử dụng nhất. Để giúp các bạn dễ dàng tiếp cận hơn với bài học Suntech đã xây dựng video hướng dẫn, bạn có thể tham khảo tại đây. Bạn có thể đặt câu hỏi trao đổi về bài học, góp phần cho sự phát triển của cộng đồng lập trình tại Group Facebook. Chúc các bạn học tốt!