Định dạng văn bản HTML
Trong hướng dẫn này, bạn sẽ học cách định dạng văn bản trên các trang web bằng các thẻ HTML.
Định dạng văn bản bằng HTML
HTML cung cấp một số thẻ mà bạn có thể sử dụng để làm cho một số văn bản trên trang web của bạn xuất hiện khác với văn bản bình thường, ví dụ: bạn có thể sử dụng thẻ <b> để làm cho văn bản được in đậm, thẻ <i> để làm cho văn bản nghiêng, thẻ <mark> để làm nổi bật văn bản, thẻ <code> để hiển thị một đoạn mã, thẻ <ins> và <del> để đánh dấu chèn biên tập và xóa bỏ, và nhiều hơn nữa.
Ví dụ sau minh họa các thẻ định dạng được sử dụng phổ biến nhất trong thực tế. Bây giờ, hãy thử điều này để hiểu về cơ bản các thẻ này hoạt động như thế nào:
Ví dụ
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>Theo mặc định, thẻ <strong> thường được hiển thị trong trình duyệt <b>, trong khi thẻ <em> được hiển thị dưới dạng <i>. Tuy nhiên, có sự khác biệt về ý nghĩa của các thẻ này.
Sự khác biệt giữa thẻ <strong> và <b>
Cả hai thẻ <strong> và đều <b> hiển thị văn bản kèm theo ở dạng chữ in đậm theo mặc định, nhưng thẻ <strong> chỉ ra rằng nội dung của nó có tầm quan trọng mạnh mẽ, trong khi thẻ <b> chỉ được sử dụng để thu hút sự chú ý của người đọc mà không truyền tải bất kỳ tầm quan trọng đặc biệt nào.
Ví dụ
<p><strong>WARNING!</strong> Please proceed with caution.</p>
<p>The concert will be held at <b>Hyde Park</b> in London.</p>Sự khác biệt giữa thẻ <em> và <i>
Tương tự, cả hai thẻ <em> và đều <i> hiển thị văn bản kèm theo ở kiểu in nghiêng theo mặc định, nhưng thẻ <em> cho biết rằng nội dung của nó được nhấn mạnh hơn so với văn bản xung quanh, trong khi thẻ <i> được sử dụng để đánh dấu văn bản được đặt ra khỏi văn bản bình thường vì lý do dễ đọc , chẳng hạn như một thuật ngữ chuyên môn, một cụm từ thành ngữ từ một ngôn ngữ khác, một ý nghĩ, v.v.
Ví dụ
<p>Cats are <em>cute</em> animals.</p>
<p>The <i>Royal Cruise</i> sailed last night.</p>Ghi chú: Sử dụng các thẻ <em> và <strong> khi nội dung trang của bạn yêu cầu các từ hoặc cụm từ nhất định phải có mức độ nhấn mạnh hoặc tầm quan trọng. Ngoài ra, trong HTML5 các thẻ <b> và <i> đã được định nghĩa lại, trước đó chúng không có ý nghĩa ngữ nghĩa.
Định dạng trích dẫn
Bạn có thể dễ dàng định dạng các khối trích dẫn từ các nguồn khác bằng thẻ HTML <blockquote>.
Các dấu ngoặc kép thường được hiển thị với lề trái và phải được thụt vào, cùng với một chút không gian thừa được thêm vào bên trên và bên dưới. Hãy thử một ví dụ để xem nó hoạt động như thế nào:
Ví dụ
<blockquote>
<p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p>
<cite>— Albert Einstein</cite>
</blockquote>Mẹo: Các thẻ cite được sử dụng để mô tả một tham chiếu đến một công việc sáng tạo. Nó phải bao gồm tiêu đề của tác phẩm đó hoặc tên của tác giả (người hoặc tổ chức) hoặc tham chiếu URL.
Đối với các trích dẫn nội dòng ngắn, bạn có thể sử dụng thẻ <q> . Hầu hết các trình duyệt hiển thị trích dẫn nội dòng bằng cách đặt văn bản trong dấu ngoặc kép. Đây là một ví dụ:
Ví dụ
<p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p>Hiển thị các từ viết tắt
Viết tắt là một dạng rút gọn của từ, cụm từ hoặc tên.
Bạn có thể sử dụng thẻ <abbr> để biểu thị một chữ viết tắt. Thuộc tính title được sử dụng bên trong thẻ này để cung cấp sự mở rộng đầy đủ các chữ viết tắt, mà sẽ được hiển thị bởi các trình duyệt như một tooltip khi con trỏ chuột được quét qua phần tử. Hãy thử một ví dụ:
Ví dụ
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> is the main international standards organization for the <abbr title="World Wide Web">WWW or W3</abbr>. It was was founded by Tim Berners-Lee.</p>Đánh dấu địa chỉ liên hệ
Các trang web thường bao gồm đường phố hoặc địa chỉ bưu điện. HTML cung cấp một thẻ đặc biệt <address> để đại diện cho thông tin liên hệ (thực tế và/hoặc kỹ thuật số) cho một người, mọi người hoặc tổ chức.
Thẻ này lý tưởng nên được sử dụng để hiển thị thông tin liên hệ liên quan đến chính tài liệu, chẳng hạn như tác giả của bài báo. Hầu hết các trình duyệt hiển thị một khối địa chỉ ở dạng nghiêng. Đây là một ví dụ:
Ví dụ
<address>
Mozilla Foundation<br>
331 E. Evelyn Avenue<br>
Mountain View, CA 94041, USA
</address>
Vui lòng kiểm tra phần tham chiếu HTML để có danh sách đầy đủ các thẻ định dạng HTML .