Hướng dẫn heading html - tiêu đề html

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ẻ h2, h2, h3, h4, h5,

Tiêu đề H1
Tiêu đề H2
Tiêu đề H3
Tiêu đề H4
Tiêu đề H5
Tiêu đề H6

0, trong đó độ quan trọng cũng như font size giảm dần từ h2 đế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 h2, đâ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 h2.
• 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

    
    
    
    


    
    
Tiêu đề bài viết
    
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.
    
Chủ đề 1
    
Chủ đề 1.1
    
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!
    
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?
    
Chủ đề 1.2
    
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!
    
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?
    
Chủ đề 2
    
Chủ đề 2.1
    
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!
    
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?

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 [Phan Văn Cương] Học web online

Trong bài này mình sẽ hướng dẫn cách tạo heading và tạo list trong HTML, bằng cách sử dụng thẻ h2 -> h6 và thẻ ul - li.h2 -> h6 và thẻ ul - li.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Khi trình bày một bài văn trong Word thì chúng ta sẽ đặt heading 1 cho tiêu đề chính của bài văn đó. Tiếp theo là đặt heading 2 cho các mục lớn, bên trong mỗi mục lớn ta sẽ đặt các heading 3. Và trong HTML cũng vậy, chúng ta sẽ sử dụng các thẻ heading (viết tắt là h) để trình bày trên nền web.h) để trình bày trên nền web.

Tiếp theo mình cũng giới thiệu thẻ ul và thẻ li, đây là hai cặp thẻ thường đi kèm với nhau để tạo ra những mục danh sách. Nào, ta hãy bắt đầu thôi.ul và thẻ li, đây là hai cặp thẻ thường đi kèm với nhau để tạo ra những mục danh sách. Nào, ta hãy bắt đầu thôi.

1. Tạo heading trong HTML

Thẻ h (heading) dùng để tạo tiêu đề chính và các tiêu đề phụ cho một trang web, nó không những có tác dụng nhấn mạnh cho các tiêu đề mà còn có tác dụng trong lĩnh vực SEO website.

Bài viết này được đăng tại [free tuts .net]

Chúng ta có tổng cộng 6 thẻ h, từ h2 ->

Tiêu đề H1
Tiêu đề H2
Tiêu đề H3
Tiêu đề H4
Tiêu đề H5
Tiêu đề H6

0 và kích thước font chữ mặc định của từng thẻ sẽ giảm dần.

Tiêu đề H1
Tiêu đề H2
Tiêu đề H3
Tiêu đề H4
Tiêu đề H5
Tiêu đề H6

3 sẽ có kích thước lớn nhất, tiếp theo là h2.. và cuối cùng là h6.

Tiêu đề H1
Tiêu đề H2
Tiêu đề H3
Tiêu đề H4
Tiêu đề H5
Tiêu đề H6

Để bạn hiểu rõ hơn thì bạn xem cách mình trình bày trong bài viết này như sau:

• Tiêu đề chính của bài mình đặt thẻ h2 "Các thẻ HTML định dạng heading và list"
• Hai tiêu đề phụ "thẻ định dạng heading" và "thẻ định dạng list" dùng thẻ h2 vì nó là phần nhỏ của h2
• Tương tự như vậy nếu trong mỗi thẻ h2 nếu chia nhỏ ra nữa thì ta sẽ dùng thẻ h3.

2. Tạo list trong HTML

Nếu heading dùng để tạo tiêu đề chính và tiêu đề phụ cho các mục thì thẻ list lại có công dụng là liệt kê danh sách dữ liệu. Cách trình bày này khá thông dụng khi làm việc với Word.

Ví dụ: Giả sử mình có 3 item, lúc này mình sẽ liệt kê chúng như sau.: Giả sử mình có 3 item, lúc này mình sẽ liệt kê chúng như sau.

• item1
• item2
• item3

Để tạo được cấu trúc trên thì chúng ta phải kết hợp các thẻ

    
item1
    
item2
    
item3

0 và

    
item1
    
item2
    
item3

1. Trong đó thẻ

    
item1
    
item2
    
item3

0 dùng khai báo danh sách items và thẻ

    
item1
    
item2
    
item3

1 dùng khai báo cho từng item.

Với ví dụ trên thì cấu trúc HTML của nó sẽ như sau:

    
item1
    
item2
    
item3

Trường hợp bạn muốn có sub-item, nghĩa là mỗi item sẽ có danh sách item con thì chúng ta chỉ việc tạo thêm một thẻ ul nằm bên trong item đó.

Ví dụ: Item2 sẽ có thêm các item con như sau.: Item2 sẽ có thêm các item con như sau.

• item1
• item2
  • item2.1
  • item2.2
• item3

Thì lúc này cấu trúc HTML sẽ như sau:

    
item1
    
item2
        

            
​item2.1
            
item2.2
        
    
    
item3

Nếu bạn muốn tạo list được đánh dấu bằng số như sau:

1. Item1
2. Item2
3. Item3

Thì hãy sử dụng thẻ ol kết hợp với thẻ li như sau:ol kết hợp với thẻ li như sau:

    
item1
    
item2
    
item3

3. Bài tập tự giải tạo heading và list trong HTML

Đề bài như sau: Hãy soạn một bài văn bằng HTML và CSS, trong đó sử dụng các thẻ heading để tạo tiêu đề và các mục con. Bên trong mỗi mục hãy sử dụng thẻ ul và li để tạo list.: Hãy soạn một bài văn bằng HTML và CSS, trong đó sử dụng các thẻ heading để tạo tiêu đề và các mục con. Bên trong mỗi mục hãy sử dụng thẻ ul và li để tạo list.

4. Lời kết

Thông thường chúng ta hay sử dụng thẻ

    
item1
    
item2
    
item3

0 và

    
item1
    
item2
    
item3

1 để xây dựng menu đa cấp, menu dọc và menu ngang đều được. Tuy nhiên để làm được điều đó thì ban phải kết hợp với CSS. Vì vậy, sau khi học xong hai phần HTML và CSS thì chúng ta sẽ làm các ví dụ thực tế đó.