Thuộc vào loạt bài viết giới thiệu về lập trình web HTML từ cơ bản đến nâng cao, trong bài viết ngày hôm nay, tôi sẽ đưa ra một cái nhìn tổng quan về các định dạng văn bản (formatting) trong HTML. Ngoài việc giới thiệu về các loại định dạng có sẵn trong HTML, tôi cũng sẽ hướng dẫn bạn – những người đang học lập trình web HTML, về cách thao tác với các định dạng này. Điều này bao gồm việc hiển thị văn bản đậm, nghiêng, gạch chân, gạch ngang đoạn văn, chọn kiểu chữ monospace, chữ số trên chữ, chèn thêm văn bản, sử dụng chữ lớn, chữ nhỏ, và cách nhóm các thẻ lại với nhau trong lập trình web HTML.
Để tìm hiểu chi tiết hơn, mời bạn tiếp tục đọc những chia sẻ dưới đây ngay nhé!
Paragraphs
Để tạo một đoạn văn, bạn chỉ cần bọc những từ cấu thành đoạn đó bằng cách sử dụng thẻ mở p
và thẻ đóng . Mặc định, trình duyệt sẽ hiển thị mỗi đoạn văn trên một dòng mới và tự động thêm một khoảng trắng giữa nó và bất kỳ đoạn văn nào tiếp theo.
Hiển thị Chữ Đậm
Để làm cho chữ in đậm trong HTML, bạn có thể sử dụng thẻ <strong> như ví dụ dưới đây:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Chữ Đậm</title> </head> <body> <p>The following word uses a <strong>bold</strong> typeface.</p> </body> </html>
Hiển Thị Chữ Nghiêng
Để hiển thị chữ nghiêng, sử dụng thẻ <em> như sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Chữ Nghiêng</title> </head> <body> <p>The following word uses an <em>italicized</em> typeface.</p> </body> </html>
Gạch Chân Đoạn Text
Để gạch chân đoạn text, sử dụng thẻ <u> như sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Gạch Chân Đoạn Text</title> </head> <body> <p>The following word uses an <u>underlined</u> typeface.</p> </body> </html>
Gạch Ngang Đoạn Text
Để gạch ngang đoạn text, sử dụng thẻ <del> như sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Gạch Ngang Đoạn Text</title> </head> <body> <p>The following word uses a <del>strikethrough</del> typeface.</p> </body> </html>
Monospace
Sử dụng thẻ <code> để làm cho một số chữ nhỏ hơn trong cùng một câu:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Monospace Font</title> </head> <body> <p>The following word uses a <code>monospaced</code> typeface.</p> </body> </html>
Superscript & Subscript
Sử dụng thẻ <sup> để hiển thị ký tự viết trên, ví dụ:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Superscript Text</title> </head> <body> <p>The area is 10<sup>2</sup> square meters.</p> </body> </html>
Thẻ <sub> được sử dụng để hiển thị ký tự là chỉ số dưới, ví dụ:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Subscript Text</title> </head> <body> <p>Water consists of H<sub>2</sub>O molecules.</p> </body> </html>
Line Breaks và Horizontal Rules
Để thêm dấu ngắt dòng bên trong một đoạn văn, sử dụng thẻ ngắt dòng <br />:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Line Break</title> </head> <body> <p>This is a line of text.<br />This is another line of text.</p> </body> </html>
Để tạo khoảng cách giữa các phần, sử dụng thẻ quy tắc ngang <hr />:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Horizontal Rule</title> </head> <body> <p>This is a paragraph.</p> <hr /> <p>This is another paragraph.</p> </body> </html>
Những thẻ này giúp tổ chức và làm cho nội dung trang web trở nên dễ đọc hơn.
Chèn Thêm Chữ
Sử dụng thẻ <ins> và <del> để chèn thêm và xóa chữ như sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Inserted Text</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html>
Sử Dụng Chữ To Hơn
Sử dụng thẻ <h2> để làm chữ to hơn trong một câu:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Larger Text</title> </head> <body> <h2>The following word uses a larger typeface.</h2> </body> </html>
Sử Dụng Chữ Nhỏ Hơn
Sử dụng thẻ <small> để làm chữ nhỏ hơn như sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ Smaller Text</title> </head> <body> <p>The following word uses a <small>small</small> typeface.</p> </body> </html>
Nhóm Các Thẻ Lại với Nhau (sử dụng thẻ div)
Sử dụng thẻ <div> để nhóm các thẻ lại với nhau, ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style="color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style="color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Nhóm Các Thẻ Lại với Nhau (sử dụng thẻ span)
Sử dụng thẻ <span> để nhóm các thuộc tính trên cùng một dòng:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Span Tag Example</title> </head> <body> <p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> along with CSS</p> </body> </html>
Chèn và Xóa Nội Dung
Để thể hiện nội dung đã được chèn vào một tài liệu, sử dụng thẻ <ins>. Ngược lại, để hiển thị văn bản đã bị xóa khỏi tài liệu, sử dụng thẻ <del>.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ về Chèn và Xóa Nội Dung</title> </head> <body> <p>This is the <ins>inserted</ins> content.</p> <p>This is the <del>deleted</del> content.</p> </body> </html>
Nội dung của thẻ <ins> thường được gạch dưới, làm cho phần văn bản mới thêm vào nổi bật. Ngược lại, nội dung của thẻ <del> thường có một đường xuyên qua nó, chỉ ra rằng văn bản đã bị loại bỏ.
Phần tử <s> được sử dụng để chỉ ra rằng một phần của nội dung không còn chính xác hoặc liên quan. Trực quan, nội dung của thẻ <s> thường được hiển thị với một đường thẳng đi qua tâm nó.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ví dụ về Nội Dung Không Còn Chính Xác</title> </head> <body> <p>This information is <s>no longer accurate</s>.</p> </body> </html>
Lưu ý rằng trong các phiên bản HTML cũ hơn, có thể sử dụng phần tử <u> để gạch chân nội dung. Tuy nhiên, trong HTML5, việc sử dụng <u> đang giảm dần và không nên được ưa chuộng.
Xem thêm Font chữ chuyên nghiệp
