Trong series này:

HTML Cấu trúc trang HTML Văn bản và định dạng Liên kết và điều hướng Hình ảnh và đa phương tiện Danh sách Bảng dữ liệu Form và input Phần tử Semantic HTML5 Audio, Video và Canvas Meta tags và phần head
Sửa trang này

Văn bản và định dạng

Thẻ tiêu đề (Heading)

HTML cung cấp 6 cấp tiêu đề từ <h1> đến <h6>. <h1> là tiêu đề quan trọng nhất (lớn nhất), <h6> là nhỏ nhất.

<h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>

Lưu ý: Mỗi trang chỉ nên có một thẻ <h1>. Các tiêu đề phải giảm dần theo cấp bậc, không bỏ cấp (không nhảy từ <h1> sang <h3>).

Đoạn văn và ngắt dòng

  • <p> — định nghĩa một đoạn văn bản. Trình duyệt tự thêm khoảng cách trên và dưới.
  • <br> — ngắt dòng (line break), không cần thẻ đóng. Dùng để xuống dòng trong cùng một đoạn.

Định dạng văn bản inline

Thẻ Ý nghĩa Kết quả
<strong> Nội dung quan trọng (in đậm, có ngữ nghĩa) đậm
<b> In đậm thuần túy (không có ngữ nghĩa đặc biệt) đậm
<em> Nội dung nhấn mạnh (in nghiêng, có ngữ nghĩa) nghiêng
<i> In nghiêng thuần túy nghiêng
<u> Gạch chân gạch chân
<s> Gạch ngang (nội dung không còn đúng) gạch ngang
<mark> Tô sáng nền vàng highlight
<code> Đoạn mã inline code
<kbd> Phím bàn phím Ctrl
<abbr> Từ viết tắt (có tooltip khi hover) —
<sup> Chỉ số trên x²
<sub> Chỉ số dưới H₂O

Sự khác biệt <strong> vs <b> và <em> vs <i>

  • <strong> và <em> mang ngữ nghĩa ngữ pháp — trình đọc màn hình phát âm khác, công cụ tìm kiếm hiểu là nội dung quan trọng.
  • <b> và <i> chỉ là định dạng trực quan thuần túy.

Trong code mới nên ưu tiên dùng <strong> và <em>.

Trích dẫn và phân cách

  • <blockquote> — trích dẫn dài, thường được thụt lề. Có thể thêm thuộc tính cite là URL nguồn.
  • <hr> — đường kẻ ngang phân cách nội dung, không cần thẻ đóng.
<blockquote cite="https://vi.wikipedia.org/">
  <p>Kiến thức là sức mạnh.</p>
</blockquote>

<hr>

Ví dụ — Tiêu đề và đoạn văn

    Kết quả 
    <h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>

<p>Đây là một đoạn văn bình thường. HTML tự thêm khoảng cách giữa các đoạn.</p>
<p>Đây là đoạn thứ hai.<br>Dòng này nằm trong cùng đoạn nhưng ở hàng mới nhờ thẻ &lt;br&gt;.</p>

<blockquote>
  <p>Học HTML là bước đầu tiên để làm web.</p>
</blockquote>

<hr>
<p>Đường kẻ ngang ở trên được tạo bởi thẻ &lt;hr&gt;.</p>

    Ví dụ — Định dạng inline

      Kết quả 
      <p>
  <strong>In đậm (strong)</strong> và <b>in đậm (b)</b> trông giống nhau.
</p>
<p>
  <em>In nghiêng (em)</em> và <i>in nghiêng (i)</i> trông giống nhau.
</p>
<p>
  <u>Gạch chân</u> — thường dùng cho tên riêng hoặc chú thích.
</p>
<p>
  <s>Giá cũ: 500.000 đ</s> &nbsp; Giá mới: 350.000 đ
</p>
<p>
  Từ quan trọng được <mark>tô sáng</mark> để dễ nhìn.
</p>
<p>
  Dùng lệnh <code>console.log("hello")</code> để in ra console.
</p>
<p>
  Nhấn <kbd>Ctrl</kbd> + <kbd>S</kbd> để lưu file.
</p>
<p>
  <abbr title="HyperText Markup Language">HTML</abbr> là ngôn ngữ đánh dấu siêu văn bản.
</p>
<p>
  Công thức nước: H<sub>2</sub>O &nbsp;|&nbsp; Bình phương: x<sup>2</sup>
</p>

      Bình luận