[Bài 3] Định dạng văn bản trong HTML5

Trong bài này, mình sẽ giới thiệu với các bạn về định dạng văn bản trong HTML5, các thẻ dùng để định dạng và một số thẻ bổ trợ khác

Việc định dạng văn bản rất quan trọng trong HTML5, bởi vì đa số các website có từ 1 đoạn văn bản trở lên, mà văn bản không thể định dạng theo cách thông thường giống như khi các bạn dùng trình soạn thảo (Word) được mà phải dùng một số thẻ chuyên dùng để định dạng, ví dụ như thẻ tiêu đề, đoạn, in đậm,…

Tầm quan trọng của việc định dạng văn bản trong HTML5

Trong một tài liệu HTML5, việc định dạng văn bản rất quan trọng. Ví dụ, nếu mình có một website chuyên đăng tin tức mà chỉ đưa tin lên đó thôi mà không định dạng, biên tập lại cho dễ nhìn hoặc thêm hình ảnh, liên kết vào thì chẳng ai đủ kiên nhẫn để xem website đó cả. Họ sẽ thoát ra ngay nếu thấy một đoạn tin chẳng ngắt dòng gì cả.

Do đó, chúng ta định dạng văn bản trong HTML5 không chỉ để trang trí cho văn bản mà còn tôn trọng cả chúng ta và người đọc nữa, vì đôi khi chúng ta sẽ cần truy cập lại một tài liệu HTML5 để chỉnh sửa hay rút kinh nghiệm từ đó.

Ngoài ra, việc định dạng văn bản rất có lợi cho việc tối ưu công cụ tìm kiếm cho website nữa (phần này mình sẽ đề cập đến ở một bài khác).

Vậy thì, định dạng văn bản trong HTML5 như thế nào?

Cần lưu ý rằng, văn bản trong một tài liệu HTML5 không thể tự định dạng bằng cách thông thường mà cần phải thông qua một số thẻ hỗ trợ, dưới đây là các thẻ hỗ trợ cho việc định dạng văn bản trong HTML5, ngoài ra, mình đã bổ sung thêm một số thẻ cần thiết khác ở dưới:

Thẻ <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

Đặt vấn đề, khi bạn có một bài viết cần chia làm 2 phần nhỏ tương đương với 2 ý chính, bạn sẽ cần phải làm cho 2 ý chính đó nổi bật để người đọc có thể hiểu rõ được nội dung chính của 2 phần văn bản. Và để giải quyết vấn đề đó thì HTML5 cung cấp cho ta danh sách các thẻ trên.

Các thẻ mình liệt kê ở trên được dùng để chuyển đổi một đoạn văn bản (nhỏ hay lớn) thành một tiêu đề bằng cách tăng kích thước chữ và tô đậm, sau đó xuống 1 dòng mới. Các bạn xem ví dụ ở dưới:

<h1>Đây là tiêu đề 1</h1>
<h2>Đây là tiêu đề 2</h2>
<h3>Đây là tiêu đề 3</h3>
<h4>Đây là tiêu đề 4</h4>
<h5>Đây là tiêu đề 5</h5>
<h6>Đây là tiêu đề 6</h6>

Và đây là kết quả:

Định dạng văn bản trong HTML5 – thẻ tiêu đề

Thông thường, khi viết mã HTML5 ta thường dùng thẻ <h1>,<h2>,<h3>,<h4> nhiều nhất. trong khi đó, thẻ <h5>, <h6> thì ít dùng hơn do kích thước nó giống như kích thước đoạn văn bản hoặc nhỏ hơn.

Ứng dụng: ví dụ như bài viết của bạn gồm hai phần thì bạn có thể dùng 1 trong các thẻ trên để đặt tiêu đề cho từng phần.

Cách ghi nhớ: cách ghi nhớ thẻ này rất dễ, bạn biết chữ “tiêu đề” trong tiếng Anh là “heading” phải không? Lấy kí tự đầu của chữ “heading” ghép với 1 số trong khoảng từ 1 -> 6 ta sẽ được thẻ tiêu đề (heading).

heading -> h + số (trong khoảng 1 -> 6)

VD: heading -> h + 3 -> thẻ h3 <h3>

Thẻ <p>

Thẻ <p> đơn giản được dùng để chứa văn bản, tuỳ thuộc bạn có bao nhiêu đoạn văn bản thì bạn sẽ bọc từng đoạn văn bản đó bằng thẻ <p>. Đây là thẻ quan trọng khi định dạng văn bản trong HTML5. Cần lưu ý rằng, nếu các đoạn văn không được bọc trong thẻ <p> thì mặc định trình duyệt sẽ hiển thị trên cùng 1 dòng.

Ví dụ như bên dưới mình có 3 đoạn văn bản được ngắt dòng.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis ex eget vestibulum iaculis. Quisque ut vulputate lorem, vel congue magna. Sed sit amet magna luctus, consectetur quam id, ornare ligula. Nam nec tincidunt leo. Nulla suscipit ex a laoreet elementum. Maecenas viverra felis est, id tempus mi dignissim aliquam. Vivamus ornare facilisis lectus, quis laoreet elit accumsan interdum. Nullam bibendum odio et nunc vulputate, non scelerisque erat condimentum. Curabitur euismod porta purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nisl risus, consectetur eu fermentum vestibulum, tempus nec leo. Vestibulum sem turpis, pellentesque et rhoncus sit amet, ultrices vitae ipsum. Sed velit purus, aliquet vitae libero sit amet, pretium volutpat est.

Vivamus lorem arcu, tincidunt ut imperdiet eu, ultrices et ante. Duis facilisis ac velit sit amet iaculis. Suspendisse potenti. Cras sit amet feugiat magna. Cras fringilla, nisl sed rhoncus placerat, urna tellus gravida libero, bibendum semper ipsum sapien eu mauris. Maecenas posuere dui eget volutpat vulputate. Sed nulla lectus, sodales ac lectus vel, suscipit tristique dui. Nullam mattis, velit ut fringilla lacinia, turpis ante interdum orci, eu vulputate risus nulla et metus. Pellentesque sagittis erat vitae mauris dictum faucibus. Aenean faucibus massa in ante consequat suscipit. Nullam interdum ultricies urna in aliquet.

Cras volutpat posuere diam, non cursus purus tempor sed. Integer odio turpis, molestie ac interdum nec, eleifend vitae quam. Pellentesque ultricies lorem in felis porttitor tincidunt. Nam venenatis condimentum leo et lobortis. Donec euismod nunc quis mattis rhoncus. Nam blandit, mauris ut fermentum sodales, sem diam laoreet velit, et tincidunt lectus arcu nec tortor. Mauris nec faucibus ipsum. Fusce sed viverra lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ut arcu euismod, mollis felis et, blandit sapien. Nulla et arcu ex. Donec pretium laoreet tellus eu accumsan. Duis vestibulum, mi imperdiet ultrices pellentesque, nisi mauris dapibus lectus, nec facilisis dolor augue nec libero.

Và khi hiển thị thì trình duyệt sẽ tự động chuyển lại thành cùng 1 dòng, rất khó chịu.

Định dạng văn bản trong HTML5 – không dùng thẻ p

Để trình duyệt có thể phân biệt ra 3 đoạn văn như ý của chúng ta, ta cần đặt từng đoạn vào từng thẻ p tương ứng như bên dưới:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis ex eget vestibulum iaculis. Quisque ut vulputate lorem, vel congue magna. Sed sit amet magna luctus, consectetur quam id, ornare ligula. Nam nec tincidunt leo. Nulla suscipit ex a laoreet elementum. Maecenas viverra felis est, id tempus mi dignissim aliquam. Vivamus ornare facilisis lectus, quis laoreet elit accumsan interdum. Nullam bibendum odio et nunc vulputate, non scelerisque erat condimentum. Curabitur euismod porta purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nisl risus, consectetur eu fermentum vestibulum, tempus nec leo. Vestibulum sem turpis, pellentesque et rhoncus sit amet, ultrices vitae ipsum. Sed velit purus, aliquet vitae libero sit amet, pretium volutpat est.</p>
<p>Vivamus lorem arcu, tincidunt ut imperdiet eu, ultrices et ante. Duis facilisis ac velit sit amet iaculis. Suspendisse potenti. Cras sit amet feugiat magna. Cras fringilla, nisl sed rhoncus placerat, urna tellus gravida libero, bibendum semper ipsum sapien eu mauris. Maecenas posuere dui eget volutpat vulputate. Sed nulla lectus, sodales ac lectus vel, suscipit tristique dui. Nullam mattis, velit ut fringilla lacinia, turpis ante interdum orci, eu vulputate risus nulla et metus. Pellentesque sagittis erat vitae mauris dictum faucibus. Aenean faucibus massa in ante consequat suscipit. Nullam interdum ultricies urna in aliquet.</p>

<p>Cras volutpat posuere diam, non cursus purus tempor sed. Integer odio turpis, molestie ac interdum nec, eleifend vitae quam. Pellentesque ultricies lorem in felis porttitor tincidunt. Nam venenatis condimentum leo et lobortis. Donec euismod nunc quis mattis rhoncus. Nam blandit, mauris ut fermentum sodales, sem diam laoreet velit, et tincidunt lectus arcu nec tortor. Mauris nec faucibus ipsum. Fusce sed viverra lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ut arcu euismod, mollis felis et, blandit sapien. Nulla et arcu ex. Donec pretium laoreet tellus eu accumsan. Duis vestibulum, mi imperdiet ultrices pellentesque, nisi mauris dapibus lectus, nec facilisis dolor augue nec libero.</p>

Và kết quả đã thay đổi:

Định dạng văn bản trong HTML5 – khi dùng thẻ p

Ứng dụng: giúp bạn phân 1 bài viết ra nhiều đoạn văn nhỏ

Cách ghi nhớ: đoạn văn dịch ra tiếng Anh là “paragraph” thì thẻ <p> là ký tự đầu tiên của chữ đó.

Thẻ <b>, <i>, <u>, <del>, <br>

Khi bạn định dạng văn bản trong HTML5, ngoài việc định dạng tiêu đề ra thì còn phải thêm định dạng khác như in đậm, in nghiêng, gạch chân, gạch ngang (xoá từ hiện tại và thế bằng từ mới) hay xuống dòng mới. Để phục vụ nhu cầu đó thì HTML5 cung cấp cho chúng ta một số thẻ như trên.

Các thẻ này bạn có thể đặt ngoài hoặc đặt trong thẻ khác (ví dụ như thẻ <p> phía trên). Tuy nhiên, mình khuyên bạn nên đặt thẻ này bên trong 1 thẻ khác (ví dụ thẻ <p>) vì các thẻ này ở dạng inline (cùng 1 dòng). Công dụng của các thẻ trên lần lượt là:

• <b> – In đậm
• <i> – In nghiêng
• <u> – Gạch chân
• <del> – gạch ngang
• <br> – Xuống dòng mới, có thể dùng để thay thế thẻ <p> nhưng không tốt cho SEO, thẻ <br> không cần thẻ đóng

<p>Chữ này được <b>in đậm</b></p>

<p>Chữ này được <i>in nghiêng</i></p>

<p>Chữ này được <u>gạch chân</u></p>

<p>Chữ này bị <del>gạch ngang (hay xoá)</del></p>

Đây là câu thứ 1 <br>
Đây là câu thứ 2

Và kết quả như bạn thấy bên dưới

Định dạng văn bản trong HTML5 – thẻ định dạng văn bản khác

Cách ghi nhớ:

• <b> – là ký tự đầu của chữ “bold” (tiếng Việt: in đậm)
• <i> – là ký tự đầu của chữ “italic” (tiếng Việt: in nghiêng)
• <u> – là ký tự đầu của chữ “underlined” (tiếng Việt: gạch chân)
• <del> – là ký tự đầu của chữ “delete” (tiếng Việt: xoá – ngầm hiểu là gạch ngang)
• <br> – là 2 ký tự đầu của chữ “break” (tiếng Việt: phá vỡ – ở đây hiểu là ngắt dòng)

Thẻ <pre>

Đây có thể được xem là thẻ đặc biệt, bởi vì nó sẽ lưu toàn bộ định dạng gốc của nội dung bạn đã nhập vào tài liệu HTML5. Có nghĩa là, khi bạn thêm khoảng 2 đoạn văn mà không muốn dùng thẻ <p> thì bạn có thể dùng thẻ <pre>, nó sẽ giúp bạn tự xuống dòng luôn. Tuy nhiên thì mình khuyên bạn không nên làm cách này, vì nó có hạn chế về nhiều mặt, đặc biệt là SEO (tối ưu hoá công cụ tìm kiếm).

Thẻ <pre> này được dùng chủ yếu dành cho lập trình viên muốn đặt mã nguồn vào tài liệu HTML5 theo đúng thứ tự mà không cần phải thêm từng thẻ <p> cho từng đoạn mã để phân dòng.

Ví dụ như bên dưới

<p>4 câu đầu bài thơ Vội Vàng của nhà thơ Xuân Diệu</p>
<pre>
Tôi muốn tắt nắng đi.

Cho màu đừng nhạt mất

Tôi muốn buộc gió lại.

Cho hương đừng bay đi.
</pre>

Kết quả như hình dưới:

Định dạng văn bản trong HTML5 – thẻ pre

Cách ghi nhớ: chữ “pre” là 3 ký tự đầu của từ “preformatted” (tiếng Việt là định dạng trước)

Một số thẻ bổ trợ khác

Ngoài các thẻ đã kể ở trên, HTML5 cũng có thêm cho chúng ta một số thẻ bổ trợ khác, nhưng thường ít dùng hơn các thẻ ở trên. Các thẻ này bao gồm:

• <strong> – công dụng giống như thẻ <b>
• <em> – công dụng giống thẻ <i>
• <ins> – công dụng giống thẻ <u>
• <mark> – dùng để đánh dấu văn bản (giống như bạn thường đánh dấu phần quan trọng bằng bút dạ quang vậy ấy)
• <small> – làm chữ nhỏ hơn
• <sub> – chuyển ký tự thành chỉ số dưới
• <sup> – chuyển ký tự thành chỉ số trên
• <blockquote> hay <q> – trích dẫn

Các thẻ giống công dụng tương tự như phần thẻ thường dùng mình xin bỏ qua nhé, để tránh mất thời gian và làm bài quá dài. Dưới đây là từng ví dụ về các thẻ mình đã liệt kê.

<p>Chữ này được <mark>đánh dấu</mark></p>

<p>Chữ này <small>nhỏ hơn</small> các chữ khác</p>

<p>Nước có công thức hoá học là H<sub>2</sub>O</p>

<p>Bình phương của a là a<sup>2</sup></p>

Và đây là kết quả

Định dạng văn bản trong HTML5 – thẻ bổ trợ

Cách ghi nhớ: trong số các thẻ trên, thẻ <sub> và <sup> là 2 thẻ dễ lẫn lộn, do đó mình có cách ghi nhớ như sau:

• <sub> – viết tắt của “subscript” (chỉ số dưới trong tiếng Việt)
• <sup> – viết tắt của “superscript” (chỉ số trên trong tiếng Việt)

Bạn chỉ cần nhớ sup -> super -> chỉ số trên là được, còn chỉ số dưới thì ngược lại là sub.

Ví dụ về trích dẫn trong HTML5:

<blockquote>Hàm số f (x) = cos x có nguyên hàm là F (x) = sin x vì (sin x)' = cos x (tức F '(x) = f (x)).</blockquote>

<!-- Bạn có thể dùng <q> để thay thế cho thẻ <blockquote> -->

Kết quả thu được như sau:

Hàm số f (x) = cos x có nguyên hàm là F (x) = sin x vì (sin x)’ = cos x (tức F ‘(x) = f (x)).

Tóm lại

Qua bài này, chúng ta đã học được:

• Thẻ tiêu đề
• Thẻ định dạng văn bản
• Thẻ định dạng sẵn
• Thẻ bổ trợ khác

Trước khi giới thiệu về thẻ liên kết (link), mình có một bài nói về thuộc tính, bạn tiếp tục tại đây: [Bài 4] Thuộc tính trong HTML5