Nội dung của trang web cũng có thể được trình bày giống các tài liệu văn bản khác như Font chữ lớn nhỏ, đậm nhạt, nghiêng, gạch chân, màu sắc,... Việc định dạng này được thực hiện thông qua các thẻ định dạng văn bản trong HTML, chúng giúp các trình duyệt Web hiểu được cách trình bày và hiển thị văn bản trên trang Web.

Sau đây là các thẻ định dạng cơ bản trong tập tin HTML

Thẻ tiêu đề (Heading)

Thẻ Heading thường được dùng để đánh dấu phần tiêu đề của văn bản, bao gồm thẻ bắt đầu và thẻ kết thúc , trong đó x là từ 1 đến 6 mức kích thước lớn nhỏ của Font chữ thể hiện trên trang Web. Thông thường h1 là lớn nhất và h6 là nhỏ nhất, tuy nhiên các thẻ Heading này có thể được định dạng lại tùy ý. HTML sẽ tự động thêm dòng trống trước và sau tiêu đề này.

Thí dụ:

<h1>Dòng này được đặt trong thẻ h1</h1>
<h1>Dòng này được đặt trong thẻ h1</h1>
<h2>Dòng này được đặt trong thẻ h2</h2>
<h3>Dòng này được đặt trong thẻ h3</h3>
<h4>Dòng này được đặt trong thẻ h4</h4>
<h5>Dòng này được đặt trong thẻ h5</h5>
<h6>Dòng này được đặt trong thẻ h6</h6>

Kết quả hiển thị:

Dòng này được đặt trong thẻ h1

Dòng này được đặt trong thẻ h2

Dòng này được đặt trong thẻ h3

Dòng này được đặt trong thẻ h4

Dòng này được đặt trong thẻ h5
Dòng này được đặt trong thẻ h6

Thẻ đoạn văn bản (Paragraph)

Văn bản nằm trong thẻ này sẽ được đánh dấu là một đoạn, giống như nhấn phím Enter để xuống dòng khi soạn thảo văn bản trong MS Word. Thẻ này bao gồm thẻ bắt đầu <p> và thẻ kết thúc </p>

Thí dụ:

<p>Đây là đoạn văn bản thứ 1.</p>
<p>Đây là đoạn văn bản thứ 2.</p>

Kết quả hiển thị:

Đây là đoạn văn bản thứ 1.

Đây là đoạn văn bản thứ 2.

Thẻ ngắt dòng (Line Breaks)

Thẻ này dùng để xuống dòng nhưng không bắt đầu một đoạn mới, giống như nhấn phím ShifEnter để xuống dòng khi soạn thảo văn bản trong MS Word. Thẻ này chỉ có thẻ bắt đầu <br> hoặc <br/> và không cần thẻ kết thúc, có thể dùng nhiều thẻ này liên tiếp nhau để tạo nhiều dòng trống.

Thí dụ:

<p>Đây là dòng thứ 1 của đoạn văn bản thứ 1<br>Đây là dòng thứ 2 của đoạn văn bản thứ 1</p>
<p>Đây là dòng thứ 1 của đoạn văn bản thứ 2<br>Đây là dòng thứ 2 của đoạn văn bản thứ 2</p>

Kết quả hiển thị:

Đây là dòng thứ 1 của đoạn văn bản thứ 1
Đây là dòng thứ 2 của đoạn văn bản thứ 1

Đây là dòng thứ 1 của đoạn văn bản thứ 2
Đây là dòng thứ 2 của đoạn văn bản thứ 2

Thẻ định dạng đậm cho văn bản

Các văn bản đặt trong thẻ này sẽ được hiển thị đậm, thẻ này bao gồm thẻ bắt đầu <b> và thẻ kết thúc </b> hoặc <strong></strong>

Thí dụ:

<b>Dòng này được in đậm</b>
<strong>Dòng này được in đậm</strong>

Kết quả hiển thị:

Dòng này được in đậm

Dòng này được in đậm

Thẻ định dạng nghiêng cho văn bản

Các văn bản đặt trong thẻ này sẽ được hiển thị nghiêng, thẻ này bao gồm thẻ bắt đầu <i> và thẻ kết thúc </i> hoặc <em></em>

Thí dụ:

<i>Dòng này được in nghiêng.</i>
<p>Các chữ này bình thường. <i>Các chữ này được in nghiêng.</i> Các chữ này bình thường.</p>

Kết quả hiển thị:

Dòng này được in nghiêng.

Các chữ này bình thường. Các chữ này được in nghiêng. Các chữ này bình thường.

Thẻ định dạng gạch dưới cho văn bản

Các văn bản trong thẻ này sẽ được hiển thị gạch dưới, thẻ này bao gồm thẻ bắt đầu <u> và thẻ kết thúc </u>

Thí dụ:

<u>Dòng này được gạch dưới.</u>
<p>Các chữ này bình thường. <u>Các chữ này được gạch dưới.</u> Các chữ này bình thường.</p>

Kết quả hiển thị:

Dòng này được gạch dưới.

Các chữ này bình thường. Các chữ này được gạch dưới. Các chữ này bình thường.

Kết hợp các thẻ định dạng cho văn bản bằng cách lồng chúng vào nhau

Thí dụ:

<p><b><i><u>Dòng này được in đậm, nghiêng và gạch dưới.</u></i></b><p>

Kết quả hiển thị:

Dòng này được in đậm, nghiêng và gạch dưới

Thẻ tạo danh sách không đánh số thứ tự

Các văn bản trong thẻ này sẽ được hiển thị dưới dạng đánh dấu đầu dòng, thẻ này bao gồm thẻ bắt đầu <ul> và thẻ kết thúc </ul>. Danh sách nằm bên trong thẻ này được đặt trong thẻ bắt đầu <li> và thẻ kết thúc </li>

Thí dụ:

<ul>
<li>Dòng thứ 1.</li>
<li>Dòng thứ 2.</li>
</ul>

Kết quả hiển thị:

  • Dòng thứ 1.
  • Dòng thứ 2.

Thẻ tạo danh sách có đánh số thứ tự

Các văn bản trong thẻ này sẽ được hiển thị dưới dạng đánh ký hiệu đầu dòng, thẻ này bao gồm thẻ bắt đầu

Thí dụ:

<ol>
<li>Dòng số 1.</li>
<li>Dòng số 2.</li>
</ol>

Kết quả hiển thị:

  1. Dòng số 1.
  2. Dòng số 2.

Phản hồi bài viết

Gửi ý kiến đóng góp hoặc thắc mắc của
bạn về bài viết này!

Xin vui lòng nhập chính xác địa chỉ Email của bạn để nhận được thư trả lời.