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

# Series HTML cho người mới bắt đầu

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

Nội dung bài viết


Xin chào tất cả các bạn, chào mừng các bạn đã quay trở lại với series "HTML cho người mới bắt đầu" của Flipper. Ở trong các bài học trước, chúng ta đã từng bước nắm chắc các kiến thức nền tảng về ngôn ngữ HTML này. Các bạn đã biết cú pháp của một thẻ là như thế nào này, biết thuộc tính của thẻ là gì rồi này... Bài học này chúng ta sẽ bắt đầu tìm hiểu các thẻ định dạng văn bản mà HTML cung cấp cho chúng ta. Ok, let's go.

1. Các phần tử heading trong HTML

Heading có nghĩa là tiêu đề, nó dùng để tạo ra các tiêu đề trên trang web. Nếu một số bạn đã từng sử dụng qua các trình soạn thảo văn bản như Microsoft Word thì có thể đã quen với thuật ngữ này rồi.

Heading trong HTML được phân thành 6 cấp độ, từ thẻ h1 đến h6. Thẻ h1 có "độ quan trọng" cao nhất, ngược lại h6 có "độ quan trọng" thấp nhất, tức "độ quan trọng" sẽ giảm dần. Hiểu đơn giản "độ quan trọng" là cấp độ tiêu đề, ví dụ trong một quyển sách, các tiêu đề cha sẽ khái quát và "quan trọng" hơn các tiêu đề con.

Dưới đây là đoạn code mô phỏng một trang mục lục của quyển sách dạy nấu ăn "101 cách chế biến rau muống":

<h1>Lời mở đầu</h1>
<h1>Các loại món chế biến</h1>
<h2>Món số 1: Rau muốn xào tỏi</h2>
<h3>Chuẩn bị</h3>
<h3>Chế biến</h3>
<h3>Trưng bày</h3>

Đây là kết quả chúng ta thu được:

Ví dụ heading trong HTML

Như các bạn thấy, "độ quan trọng" của thẻ heading càng lớn thì kích thước chữ và độ đậm sẽ càng lớn. Một chú ý nữa là khoảng cách giữa các heading cũng sẽ tỉ lệ thuận với "độ quan trọng" của nó, các khoảng cách này được trình duyệt thêm tự động trong quá trình biên dịch. Bạn cũng có thể tùy chỉnh nó khi học đến ngôn ngữ CSS.

Thẻ heading vô cùng quan trọng đối với việc tối ưu kết quả tìm kiếm trên search engine, nó giúp các công cụ tìm kiếm có thể nắm bắt nhanh được nội dung chính của trang web thông qua nội dung tiêu đề. Chính vì thế đừng sử dụng "bừa bãi" các thẻ heading này chỉ vì muốn phóng to, in đậm một nội dung nào đó.

2. Thẻ văn bản trong HTML

Có lẽ thẻ này đã quen thuộc nếu bạn xem kĩ các bài học trước của mình. Thẻ này đơn giản là giúp ta có thể tạo ra đoạn văn bản, tên thẻ là p. Hãy quan sát đoạn code bên dưới:

<p>Đoạn văn thứ nhất</p>
<p>Đoạn văn thứ hai</p>

Mình đã sử dụng HTML để tạo ra hai đoạn văn bản với nội dung như trên, và đây là kết quả:

Ví dụ thẻ văn bản trong HTML

HTML đã biểu diễn các đoạn văn bản giống thực tế, các đoạn văn sẽ tự động xuống dòng mới và cách nhau một khoảng trắng tương tự như heading (điều này cũng do trình duyệt tự động thiết lập).

Một mẹo để ghi nhớ thẻ p này là nó chính là viết tắt của từ Paragraph.

3. Cơ chế hiển thị văn bản trong HTML

Bạn không thể chắc chắn cách mà HTML hiển thị. Mỗi kích thước lớn, kích thước nhỏ hoặc khi điều chỉnh kích thước cửa sổ sẽ tạo ra các kết quả khác nhau. Với HTML, bạn không thể thay đổi kết quả đầu ra bằng cách thêm nhiều khoảng trắng trong code HTML. Trình duyệt sẽ tự động xóa mọi khoảng trắng cũng như dòng thừa khi trang được hiển thị:

<p>Đây là đoạn văn có
nhiều dòng thừa
và khoảng     trắng          thừa.</p>

Kết quả sau khi chạy trên trình duyệt sẽ như thế này:

Ví dụ hiển thị HTML

Điều này cũng tương tự đối với một số thẻ chứa văn bản khác.

4. Phần tử xuống dòng trong HTML

HTML dùng thẻ br để định nghĩa một dòng mới. Hãy sử dụng thẻ br để xuống dòng bất kỳ chỗ nào mà không cần phải tạo một văn bản mới. Thẻ br là một empty HTML nên không cần thẻ đóng.

<p>Đây là đoạn<br>văn bản<br> được xuống dòng</br>

Và đây là kết quả của chúng ta

Ví dụ xuống dòng trong HTML

Bạn có thể ghi nhớ thẻ br với tên viết tắt của Break.

5. Hiển thị văn bản nguyên mẫu trong HTML

HTML cung cấp cho chúng ta thẻ pre để có thể giữ nguyên văn bản được khai báo trong cặp thể này, tất nhiên là bao gồm các khoảng trắng và các ký tự xuống dòng mới. Chẳng hạn để hiển thị một bài thơ như sau

<pre>
Làm anh khó đấy
Phải đâu chyện đùa
Với em gái bé
Phải “người lớn” cơ.
</pre>

Ví dụ thẻ pre trong HTML

Thẻ pre sẽ hiển thị dưới một font chữ xác định trước (thường là font Courier).

Với thẻ pre này là tên viết tắt của Preformated.

6. Một số thẻ định dạng văn bản trong HTML

HTML cung cấp cho chúng ta một số thẻ để có thể định dạng cho văn bản các kiểu chữ như in đậm, in nghiêng, gạch dưới... vị trí chữ nên ở trên hàng hoặc thụt xuống dưới hàng...

6.1. Thẻ định dạng in đậm nội dung

Về phần này ta có thể sử dụng một trong hai thẻ b hoặc strong để có thể in đậm văn bản, nhưng mình khuyên các bạn nên sử dụng thẻ strong. Vì về mặc ngữ nghĩa, thẻ strong dùng để nhấn mạnh các từ quan trọng, tốt hơn trong việc tối ưu nội dung web hơn là thẻ b.

<p>Đây là văn bản chứa từ <b>in đậm</b></p>

hoặc tốt hơn là

<p>Đây là văn bản chứa từ <strong>in đậm</strong></p>

Ta sẽ thu được kết quả như sau

Ví dụ in đậm trong HTML

Thẻ b là tên viết tắt của Bold.

6.2. Thẻ định dạng in nghiêng nội dung

HTML cũng cung cấp cho chúng ta hai thẻ để in nghiêng một văn bản là iem. Về phần thẻ em thì giống như thẻ strong, cũng sẽ được ưu tiên sử dụng nếu mục đích nhầm nhấn mạnh ngữ nghĩa của từ.

<p>Đây là văn bảng chứa từ <i>in nghiêng</i></p>

hoặc là

<p>Đây là văn bảng chứa từ <em>in nghiêng</em></p>

Ví dụ in nghiêng trong HTML

Thẻ i là viết tắt của Italic.

Từ hai định dạng in đậm và in nghiêng, ta có thể kết luận

Nếu chỉ dùng để in đậm, in nghiêng tạo sự khác biệt trong cách trình bày thì nên dùng thẻ b hoặc i. Còn nếu để nhấn mạnh ngữ nghĩa của từ, tối ưu hóa cho nội dung web thì dùng thẻ strong và thẻ em.

6.3. Thẻ định dạng đánh dấu nội dung

Thẻ mark dùng để định nghĩa một văn bản được đánh dấu hoặc highlight.

<p>Đây là văn bản được <mark>đánh dấu</mark></p>

Nội dung sẽ được đánh dấu vàng lên như này nếu nằm trong cặp thẻ mark.

Ví dụ đánh dấu trong HTML

6.4. Thẻ định dạng xóa bỏ nội dung

Thẻ del dùng để định nghĩa một nội dung đã bị gỡ bỏ hoặc xóa đi, được biển diễn bằng một đường gạch ngang nội dung.

<p>Đây là văn bản chứa từ bị <del>bỏ đi</del></p>

Ví dụ gạch bỏ trong HTML

Thẻ del là viết tắt của Deleted.

6.5. Thẻ định dạng thêm nội dung

Thẻ ins dùng để định nghĩa một nội dung được thêm vào, được biểu diễn bằng một đường gạch dưới nội dung.

<p>Đây là văn bản chứa từ <ins>được thêm</ins> vào</p>

Ví dụ gạch dưới trong HTML

Thẻ ins là viết tắt của Inserted.

6.6. Thẻ định dạng nội dung thụt xuống hàng

Ta thường bắt gặp trường hợp này trong các phương trình hóa học như H2O, các biến trong toán như x1, x2... Trong HTML để có thể định dạng kiểu nội dung này, ta sử dụng cặp thẻ sub.

<p>H<sub>2</sub> + O<sub>2</sub> --> 2H<sub>2</sub>O</p>

Ví dụ sub trong HTML

Thẻ sub là tên viết tắt của Subscripted.

6.7. Thẻ định dạng nội dụng đẩy lên trên

Với định dạng này ta thường thấy ở các số mũ trong toán học như 22, 33...

<p>2<sup>2</sup> + 3<sup>3</sup> = 31</p>

Ví dụ sup trong HTML

Thẻ sup là viết tắt của Superscripted.

7. Thẻ định dạng trích dẫn trong HTML

HTML cung cấp cho chúng ta một số thẻ để trích dẫn các nội dung như câu nói, từ viết tắt, địa chỉ...

7.1. Trích dẫn nội dung ngắn

Thẻ q sẽ giúp chúng ta định nghĩa một trích dẫn ngắn, trình duyệt thường tự động thêm dấu nháy kép xung quanh nội dung được ghi trong thẻ q này.

<q>Không có áp lực không có kim cương</q>

Ví dụ trích dẫn ngắn trong HTML

Thẻ q là viết tắt của Quote.

7.2. Trích dẫn nội dung từ nguồn khác

Thẻ blockquote sẽ định nghĩa một nội dung được trích dẫn từ nguồn khác. Thẻ blockquote thường được thụt lề.

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

Các bạn để ý thuộc tính cite trong thẻ blockquote sẽ là đường dẫn gốc chứa nội dung trích dẫn.

Ví dụ blockquote trong HTML

7.3. Trích dẫn nội dung viết tắt

Để trích dẫn một từ viết tắt hoặc viết tắt, ta sử dụng thẻ abbr. Thẻ này cung cấp các thông tin hữu ích cho trình duyệt, hệ thống dịch nghĩa và công cụ tìm kiếm.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

Như bạn thấy, khi rê chuột vào nội dung viết tắt, trình duyệt sẽ tự động hiện một tooltip để mô tả chi tiết nó được ghi trong thuộc tính title.

Ví dụ trích dẫn viết tắt trong HTML

Thẻ abbr là viết tắt của Abbreviation.

7.4. Trích dẫn địa chỉ

Thẻ address cung cấp thông tin liên hệ (của tác giả hoặc chủ sở hữu) trong một tài liệu hoặc bài viết. Thẻ address thường hiển thị dưới kiểu in nghiêng. Hầu hết các trình duyệt sẽ thêm xuống dòng trước và sau phần tử này.

<address>
Viết bởi Lê Chí Huy.<br>
Tìm kiếm chúng tôi tại:<br>
flipper.vn<br>
Ho Chi Minh<br>
Vietnam
</address>

Đây là kết quả chúng ta thu được

Ví dụ trích dẫn địa chỉ trong HTML

7.5. Trích dẫn tên của một sản phẩm

Với thẻ cite, ta có thể trích dẫn tên một thương hiệu hoặc sản phẩm, thường nó sẽ được trình duyệt in nghiêng.

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

Ví dụ cite trong HTML

7.6. Trích dẫn ghi đè hai chiều

Ta dùng thẻ bdo để thực hiện việc này, nó sẽ ghi đè với chiều chữ hiện tại.

<bdo dir="rtl">Đây là đoạn văn bản viết từ trái sang phải</bdo>

Ví dụ BDO trong HTML

Thẻ bdo là tên viết tắt của Bi-Directional Override.

Nhìn sợ thật phải không, đây chỉ áp dụng cho một số ngôn ngữ trên quốc tế thôi.

8. Chú thích trong HTML

Chú thích trong HTML (comment) sẽ không được hiển thi trên trình duyệt, nhưng chúng có thể giúp ta đọc document code một cách dễ dàng hơn. Đây là cú pháp của một chú thích

<!-- Đây là chú thích trong HTML -->

Với chú thích này, bạn có thể đặt thông báo hoặc lời nhắc trong source code. Việc đặt các comment hợp lý sẽ giúp ta quản lý code dễ dàng. Các bạn cần luyện tập cách đặt các comment hợp lý trong source code để tạo sự chuyên nghiệp và dễ dàng trong quá trình làm việc, nhưng cũng nên nhớ đừng quá lạm dụng vào nó, không thì comment sẽ nhiều hơn code mất.

Lời kết

Mình xin kết thúc bài này tại đây, hi vọng với những kiến thức trên đã giúp các bạn nắm bắt được một số các thẻ phổ biến trong HTML dùng cho định dạng và trích dẫn văn bản và cách đặt comment trong source code HTML. Mình mong các bạn hãy luyện tập thật nhiều để có thể hiểu và ghi nhớ các thẻ này, tạo sự linh hoạt trong quá trình code. Cảm ơn các bạn đã luôn đồng hành cùng Flipper, chúc các bạn học tốt và hẹn gặp lại trong các bài học tiếp theo. Good day!


Ủng hộ chúng tôi

Bình luận