Bạn là một người mới bắt đầu học html và đang tìm hiểu đến cách sử dụng tiêu đề trong website? Trong bài viết này tôi chia sẻ đến bạn kinh nghiệm sử dụng heading trong css.
Video hướng dẫn thẻ tiêu đề trong css
Video 18 phút này chia sẻ bạn tất tần tật về cách sử dụng tiêu đề trong quá trình xây dựng giao diện website cho người mới bắt đầu.
Thẻ tiêu đề(Heading) là gì?
Thẻ tiêu đề giúp hiển thị những đề mục trong website giúp người đọc dễ dàng tiếp nhận thông điệp cần truyền tải trên website.
Thẻ tiêu đề bao gồm các thẻ h1, h2, h3, h4, h5, h6, trong đó độ quan trọng cũng như font size giảm dần từ h1 đến h6.
Tối ưu Heading cho SEO
Thẻ heading đóng vai trò quan trọng trong việc tối ưu đưa website trên top google, ngoài việc giúp người đọc nắm được nội dung chính của bài viết heading còn phương tiện để google biết những nội dung quan trọng của website.
Khi tối ưu các thẻ heading trong bài viết tốt google sẽ xếp hạng website bạn trên những từ khoá liên quan.
Dưới đây là một số điểm bạn cần lưu ý:
- Tiêu đề bài viết, sản phẩm cho vào h1, đây cũng là thẻ quan trọng nhất trong SEO.
- Tiêu đề danh mục, các đề phục phụ sử dụng h2, h3 để bổ sung ý nghĩa cho h1.
- Cần đưa các từ khoá người dùng tìm kiếm vào các heading, đây là cách để website được ưu tiên xếp hạng các từ khoá liên quan.
Mã code thẻ heading css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading html</title>
</head>
<body>
<style>
h1{
text-transform: uppercase;
font-size: 3em;
color: yellow;
background: #000;
}
</style>
<h1>Tiêu đề bài viết</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Beatae dolor laboriosam quasi dignissimos facere quia suscipit animi, quod repudiandae est et similique provident cupiditate voluptas velit aperiam explicabo dolorem sed.</p>
<h2>Chủ đề 1</h2>
<h3>Chủ đề 1.1</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae quasi eos accusantium possimus laborum laudantium minima rem. Ex, amet optio neque fugit tempore consequuntur repellat ut, laboriosam eaque distinctio cupiditate!</p>
<p>Magnam repellat facere quasi sequi veritatis facilis odio ducimus praesentium reprehenderit quia, numquam porro quis eum accusantium omnis totam eligendi consequuntur odit. Quaerat accusamus tempora commodi in provident repellat animi?</p>
<h3>Chủ đề 1.2</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae quasi eos accusantium possimus laborum laudantium minima rem. Ex, amet optio neque fugit tempore consequuntur repellat ut, laboriosam eaque distinctio cupiditate!</p>
<p>Magnam repellat facere quasi sequi veritatis facilis odio ducimus praesentium reprehenderit quia, numquam porro quis eum accusantium omnis totam eligendi consequuntur odit. Quaerat accusamus tempora commodi in provident repellat animi?</p>
<h2>Chủ đề 2</h2>
<h3>Chủ đề 2.1</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae quasi eos accusantium possimus laborum laudantium minima rem. Ex, amet optio neque fugit tempore consequuntur repellat ut, laboriosam eaque distinctio cupiditate!</p>
<p>Magnam repellat facere quasi sequi veritatis facilis odio ducimus praesentium reprehenderit quia, numquam porro quis eum accusantium omnis totam eligendi consequuntur odit. Quaerat accusamus tempora commodi in provident repellat animi?</p>
</body>
</html>
Tổng Kết
Bài viết này tôi đã chia sẻ cho bạn về cách làm việc với thẻ tiêu đề(heading) trong Html. Bạn cần hiểu được ý nghĩa của nó và các cách tối ưu tiêu đề trong SEO để tạo ra website thân thiện với người dùng và tối ưu bộ máy tìm kiếm.
30S quảng cáo: Nếu bạn đang học lập trình web muốn đi làm trong 3-5 tháng tới bạn nên xem lộ trình học lập trình web đi làm tại unitop.vn và tham gia vào Html Css 21 Ngày để hoàn thiện kỹ năng xây dựng giao diện website.
P/s: Xem nhiều hơn video lập trình web tại youtube channel Unitop.vn Học web đi làm