Đăng bởi:
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 <hx> và thẻ kết thúc </hx>, 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>
<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, thẻ này bao gồm thẻ bắt đầu <p> và thẻ kết thúc </p>. HTML sẽ tự động thêm dòng trống trước và sau đoạn văn bản này để tạo khoảng cách giữa các đoạn văn bản với nhau.
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 đánh dấu việc kết thúc một dòng nhưng không bắt đầu một đoạn mới. Thẻ này chỉ có thẻ bắt đầu <br> và không cần thẻ kết thúc, văn bản nằm sau thẻ này sẽ được chuyển xuống dòng dưới, 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à đ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à đoạn văn bản thứ 1
Đây là hàng thứ 1 của đoạn văn bản thứ 2
Đây là hàng thứ 2 của đoạn văn bản thứ 2
Đây là hà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> hoặc <strong> và thẻ kết thúc </b> hoặc </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 <em> hoặc <i> và thẻ kết thúc </em>hoặc </i>
Thí dụ:<em>Dòng này được in nghiêng</em> <i>Dòng này được in nghiêng</i> 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.
Kết quả hiển thị:
Dòng này được in nghiêng
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> 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.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ụ:<b><i><u>Dòng này được in đậm, nghiêng và gạch dưới</u></i></b>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 </u> Danh sách nằm bên trong thẻ này được đặt trong các thẻ <li>Dòng thứ 1</li><li>Dòng thứ 2</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 dấu đầu dòng, thẻ này bao gồm thẻ bắt đầu <ol> và thẻ kết thúc </ol> Danh sách nằm bên trong thẻ này được đặt trong các thẻ <li>Dòng số 1</li><li>Dòng số 2</li>Thí dụ:
<ol> <li>Dòng số 1</li>
<li>Dòng số 2</li> </ol>Kết quả hiển thị:
- Dòng số 1
- Dòng số 2
EmoticonEmoticon