Tiêu đề html
|
Tiêu đề tab thực chất cũng là một dạng tab mà thôi, điểm đặc biệt của nó là các thanh điều khiển nằm phía dưới cùng và nội dung sẽ nằm phía trên Show Đây là ví dụ cho Tiêu đề tab Bây giờ mình sẽ hướng dẫn các bạn cách làm chi tiết nhé Bài viết này đã được đăng tại [free tuts. mạng lưới] HTML Đầu tiên các bạn viết mã HTML nhé, các bạn có thể tham khảo đoạn mã dưới đây hoặc thay đổi nội dung theo ý mình nhé HTML
Ở đây, mình lấy ví dụ tab 4, tương ứng với 4 div có 4 id khác nhau (id không được đặt trùng lặp nhé các bạn). Bạn cũng có thể tạo nhiều hoặc ít tùy chọn hơn theo bài viết của các bạn nhé Mình sử dụng id vì id là duy nhất, không được đặt trùng nhau. Id này được sử dụng để kết nối giữa các tab với nội dung trên phần CSS Tiếp theo, các bạn thiết lập CSS cho các nút và các tacontent nhé. Tùy vào sở thích hay bài tập của bạn, bạn có thể đổi màu theo ý mình nhé CSS body {
font-family: "Lato", sans-serif;
}
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* CSS cho các tab */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
#HTML {
background-color: #efc9ab;
}
#CSS {
background-color: #f1b5e2;
}
#Javascript {
background-color: #4ebcef;
}
#PHP {
background-color: #d1f681;
}Javascript Add javascript to control tabs Javascript CHẠY function openLanguage(languageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(languageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Đặt button có id = "defaultOpen" để hiển thị tự động
document.getElementById("defaultOpen").click();Các bạn chú ý nhé, trong hàm Khi bắt đầu viết Blog, chắc chắn rất nhiều người không biết làm thế nào để bài viết của mình được xếp hạng cao trên các công cụ tìm kiếm. Tất nhiên có rất nhiều yếu tố quyết định đến thứ hạng SEO. Tuy nhiên, điều cơ bản ban đầu và bắt buộc phải nằm trong lòng, chính là thẻ tiêu đề – hay còn gọi là thẻ mục. Vì vậy nó là gì? lục mục Thẻ tiêu đề là gì?Các thẻ tiêu đề được sử dụng để đánh dấu các tiêu đề chính và phụ trong một bài viết, bằng cách sắp xếp theo mức độ quan trọng từ H1 đến H6, với H1 là tiêu đề bài viết. Từ đó giúp người đọc nhanh chóng nắm bắt được những nội dung sẽ phát triển và tìm kiếm thông tin nhanh hơn Các loại thẻ tiêu đề thẻ trong HTML
Như mọi người cũng thấy, các con số sẽ hiển thị thứ hạng nội dung giữa các thẻ tiêu đề, với H1 là nội dung lớn nhất và giảm dần từ H2 Dưới đây là ví dụ về cấu trúc phân tầng này trong quá trình phát triển khai bố cục bài viết Thẻ tiêu đề nào quan trọng nhất?H1 là thẻ tiêu đề đầu tiên và quan trọng nhất trong cấu trúc bố cục cục bộ của một bài đăng hay còn gọi là tiêu đề của bài viết Đừng tạo một tiêu đề theo sở thích mà nó không bao hàm được nội dung bài viết của bạn. Hãy nghĩ rằng H1 giống như một cuốn sách tên, nó luôn ở bên ngoài đối chiếu trước tất cả các nội dung. Bài đăng của bạn cũng cần một thẻ tiêu đề như vậy Xem thêm. Tiêu đề thẻ là gì? Các tiêu đề còn có thể hiển thị trong mã nguồn của trang web như sau Có bao nhiêu thẻ tiêu đề được HTML hỗ trợ?Thẻ tiêu đề HTML Hỗ trợ tối đa 6 thẻ tiêu đề (H1-H6) cho người viết sử dụng. Ngoại trừ H1, bạn hoàn toàn có thể biến tấu chúng theo phong cách của mình và sử dụng bao nhiêu tùy chọn thẻ trên cùng một trang Các thẻ tiêu đề phải theo sát chủ đề mà bạn đang viết, vì nó là công cụ giúp người đọc và các trang tìm kiếm tìm thấy những điểm chính trong nội dung bài đăng của bạn. Đặc biệt, những thẻ tiêu đề được chia nhỏ phải được sắp xếp chính xác và khác nhau về trực quan. Điều đó không chỉ giúp bài viết của bạn trông chuyên nghiệp mà người xem cũng sẽ tiếp nhận thông tin theo cách hiệu quả hơn Mối quan hệ giữa các thẻ tiêu đề và SEOCó nhiều người cho rằng, thẻ tiêu đề là không cần thiết trong sơ đồ lớn của cấu trúc một trang web. Tuy nhiên, trên thực tế, nó sẽ giúp người đọc chú ý đến những nội dung quan trọng nhất và quyết định có nên ở lại trang của bạn hay không Google chọn bộ lọc nội dung để phục vụ khách hàng của mình bằng cách thu thập dữ liệu từ các trang web. Điều này yêu cầu nó phải phân tích văn bản, hình ảnh và các yếu tố khác mà nó tìm thấy để xem xét nội dung bài viết có phù hợp hay không Khi bạn đặt văn bản vào các thẻ tiêu đề, bạn đang thông báo với Google rằng đây là nội dung quan trọng và Google sẽ sử dụng đoạn văn bản này để xác định trang. Từ đó cung cấp kết quả có liên quan đến truy vấn của người tìm kiếm Đó là lý do tại sao khi sử dụng các thẻ tiêu đề phải đảm bảo chúng phù hợp với nội dung từ khóa. Nếu thẻ H1 không có từ khóa hoặc bạn đặt văn bản không liên quan vào các thẻ H2, H3,…Google sẽ không đánh giá cao trang của bạn và bài viết đó cũng sẽ không được xếp hạng cao trên top tìm kiếm Bạn không nhất thiết phải tự mình nghĩ ra các từ khóa vì trên thực tế, có rất nhiều công cụ giúp bạn điều đó như Semrush hay Ahrefs cũng vậy. Chỉ cần chắc chắn từ khóa của bạn thân thiện với người dùng và các bot tìm kiếm của Google Việc sử dụng các thẻ tiêu đề cũng giúp bài viết được chia nhỏ các thông tin và người dùng sẽ dễ dàng hơn trong quá trình tìm kiếm điều họ cần Vì vậy nên xem lại bài viết của mình, xem thử bạn đã chia nhỏ nội dung theo cách dễ hiểu nhất hay chưa? Cách bổ sung thẻ tiêu đề trong HTMLThêm thẻ tiêu đề trong HTML là công việc khá đơn giản, nếu bạn muốn thêm thẻ H1, bạn có thể làm như sau Ví dụ nếu H1 của bạn là “Cách lên top Google nhanh nhất” Tương tự với các thẻ còn lại Một số nền tảng Blog như WordPress và Hubspot đã cung cấp sẵn thanh công cụ để tạo thẻ tiêu đề, điều này sẽ dễ dàng hơn rất nhiều nếu bạn đang vận hành web trên hai công cụ này Lần tới khi muốn tạo một bài đăng cho web của mình, hãy xem xét việc bổ sung các thẻ tiêu đề có ảnh hưởng đến SEO hay không và người đọc của bạn đang tìm kiếm những thông tin như thế nào. Việc làm này có thể giúp tăng khả năng truy cập và giúp trang web của bạn có những bước nhảy vọt về thứ hạng trên các công cụ tìm kiếm Kết luậnTrên đây là những thông tin mà bạn nên biết về thẻ tiêu đề và cách sử dụng chúng để tăng thứ hạng bài viết trên các công cụ tìm kiếm. Nếu bạn muốn tham khảo thêm thật nhiều bài viết bổ ích cho việc phát triển trang web của mình, hãy truy cập Top On Seek nhé |
