NỘI DUNG BÀI VIẾT

Toggle

• Giới thiệu
• Tầm quan trọng của tiêu đề
• Cách sử dụng
  • Tạo tiêu đề h1 – h6
  • Tạo đường kẻ ngang
  • Tạo tiêu đề to hơn
• Kết luận

Giới thiệu

Tiêu đề là những thành phần rất quan trọng trong các tài liệu HTML.

Chúng ta sử dụng các thẻ tiêu đề <h1>, <h2>, <h3>, <h4>, <h5>, <h6> để định nghĩa các tiêu đề.

Tầm quan trọng của tiêu đề

Các công cụ tìm kiếm (chẳng hạn như Google, Bing…) sử dụng tiêu đề để đánh chỉ số và nội dung của trang web. Do đó, chúng ta nên sử dụng đúng tiêu đề để giúp cho người dùng dễ tìm thấy trang web của mình hơn.

Ngoài ra, người dùng cũng thường “lướt” qua nội dung trang web khá nhanh, do đó việc sử dụng tiêu đề sẽ giúp chúng ta nhanh chóng thể hiện được ghi được dấu ấn.

Tiêu đề <h1> nên được sử dụng cho tiêu đề chính, tiếp theo là tiêu đề <h2>, sau đó là tiêu đề <h3> ít quan trọng hơn, v.v.

Lưu ý: Chỉ sử dụng các thẻ HTML tiêu đề cho các tiêu đề. Không sử dụng tiêu đề để tạo cho đoạn văn bản LỚN hoặc in đậm hơn.

Cách sử dụng

Tạo tiêu đề h1 – h6

Thẻ <h1> định nghĩ tiêu đề quan trọng nhất (nổi bật nhất, lớn nhất), các thẻ khác sẽ lần lượt được sử dụng các tiêu đề ít quan trọng hơn. Thẻ <h6> định nghĩa tiêu đề nhỏ nhất.

Ví dụ:

<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>

Kết quả:

Lưu ý: Trình duyệt sẽ tự động thêm một số khoảng trắng (lề) trước và sau tiêu đề.

Tạo đường kẻ ngang

Nếu muốn phân tách các nội dung của trang web theo chiều ngang, chúng ta có thể sử dụng thẻ  <hr>. Thẻ này sẽ kẻ một đường nằm ngang tài liệu HTML.

<h1>This is heading 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, sed vero labore a iure dolor iste vitae distinctio. Modi praesentium laudantium libero quae vitae unde at aperiam a eum doloremque.</p> <hr> <h2>This is heading 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repudiandae assumenda deserunt debitis facere obcaecati non esse voluptatum, vero dolorem nisi atque, error eligendi aliquam labore autem voluptate consequatur totam.</p> <hr> <h3>This is heading 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repudiandae assumenda deserunt debitis facere obcaecati non esse voluptatum, vero dolorem nisi atque, error eligendi aliquam labore autem voluptate consequatur totam.</p> <hr> <h4>This is heading 4</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repudiandae assumenda deserunt debitis facere obcaecati non esse voluptatum, vero dolorem nisi atque, error eligendi aliquam labore autem voluptate consequatur totam.</p> <hr> <h5>This is heading 5</h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repudiandae assumenda deserunt debitis facere obcaecati non esse voluptatum, vero dolorem nisi atque, error eligendi aliquam labore autem voluptate consequatur totam.</p> <hr> <h6>This is heading 6</h6> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repudiandae assumenda deserunt debitis facere obcaecati non esse voluptatum, vero dolorem nisi atque, error eligendi aliquam labore autem voluptate consequatur totam.</p> <hr>

Kết quả:

Tạo tiêu đề to hơn

Mỗi tiêu đề HTML có một kích thước mặc định. Tuy nhiên, bạn có thể chỉ định kích thước cho bất kỳ tiêu đề nào bằng thuộc tính style bằng cách sử dụng thuộc tính font-size trong CSS:

<h1>Heading 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, sed vero labore a iure dolor iste vitae distinctio. Modi praesentium laudantium libero quae vitae unde at aperiam a eum doloremque.</p> <hr> <h1 style="font-size:60px;">Heading 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, sed vero labore a iure dolor iste vitae distinctio. Modi praesentium laudantium libero quae vitae unde at aperiam a eum doloremque.</p> <hr>

Kết quả:

Kết luận

Như vậy bạn biết 1 vài kiến thức cơ bản về HTML rồi nhé, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Chia sẻ

Bài viết liên quan