Tiêu đề bài viết không được đưa vào thẻ h1. Các khối khác có thông tin. Sử dụng đúng thẻ h2 – h6
Chào buổi chiều, du khách thân yêu.
Hôm nay sẽ có bài viết về chủ đề tiêu đề H1-H6 cho trang.
Chắc hẳn mọi người đều đã biết đây là những loại tiêu đề gì, nhưng tôi chắc chắn rằng không phải ai cũng biết những điểm tinh tế trong cách sử dụng chúng và không nhận ra rằng việc sử dụng chúng trên các trang tài nguyên chỉ phục vụ 2 mục đích.
Mục tiêu và trường hợp sử dụng
Hai mục đích chính của tiêu đề trong thẻ H1-H6 là thiết kế và cấu trúc nội dung trên các trang tài nguyên để làm cho khách truy cập trang web dễ đọc hơn và dễ dàng sử dụng hơn. Chúng ta không nên theo đuổi bất kỳ mục tiêu nào khác từ các thẻ này.
Ngoài việc chỉ sử dụng chúng làm yếu tố cấu trúc và thiết kế nội dung, khách truy cập còn thường sử dụng các thẻ này để đưa ra thiết kế cần thiết cho từng cụm từ hoặc thậm chí toàn bộ câu. Điều này dẫn đến tình huống trong đó thẻ H6 (ví dụ) có thiết kế chỉ có phông chữ đậm và thay vì làm nổi bật một dòng trong văn bản bằng thẻ , họ gói nó trong thẻ H6. Điều này về cơ bản là sai.
Tiêu đề trong các thẻ này chỉ nên được sử dụng để chia văn bản thành các phần hợp lý. Không làm nổi bật toàn bộ câu hoặc cụm từ riêng lẻ.
Ngoài ra, các tiêu đề H1-H6 có hệ thống phân cấp, khiến chúng khác nhau về thiết kế, ít nhất là ở cỡ chữ. Mỗi cấp độ thấp hơn sẽ ít được chú ý hơn so với cấp độ cao hơn nó.
Hình ảnh thể hiện thiết kế chính xác của các tiêu đề trong các thẻ này khi kích thước phông chữ giảm dần từ cấp trên xuống dưới. Nếu bạn gặp tình huống khác với trường hợp này, thì bạn nên chuyển sang phong cách thiết kế trang web của mình và chỉnh sửa chúng cho phù hợp.
Nhưng đây là một điều - hãy đảm bảo rằng các tiêu đề cấp thấp hơn (gần với H6) tương tự như các tiêu đề và không hợp nhất với văn bản thông thường. Chúng phải trông giống như tiêu đề chứ không chỉ là phông chữ đậm.
Dựa trên thiết kế này, chúng ta có thể hiểu rằng các tiêu đề phải duy trì thứ bậc của chúng khi được sử dụng như một thành phần của cấu trúc văn bản. Không thể để tiêu đề đầu tiên H1 đến trước rồi mới đến H5 hoặc H6. Sau cấp độ đầu tiên, việc chỉ sử dụng tiêu đề trong thẻ H2 là hợp lý và đúng đắn. Điều này rất quan trọng, cả từ quan điểm thiết kế của vật liệu và từ quan điểm duy trì cấu trúc chính xác.
Các công cụ tìm kiếm hiện đang chú ý đến các thẻ này. Nhưng không phải là các yếu tố SEO mà là các yếu tố cấu trúc. Vì vậy sẽ là lạ nếu có H1, rồi lại có H6.
Khi sử dụng các thẻ này, chúng tôi đảm bảo duy trì cấu trúc. Nếu chúng ta xuống một cấp độ thì không được nhảy qua cấp độ đó. Cấu trúc phải như sau: H1-H2-H3-H4-H5-H6.
Điều đáng nói là việc sử dụng tiêu đề cấp độ H1 trong những trường hợp này sẽ không phù hợp vì nó chỉ nên được sử dụng một lần trên trang và phải chứa tên của tài liệu. Vì vậy, không cần thiết phải sử dụng nó trong văn bản.
Bây giờ tôi sẽ cho bạn biết những điểm chính của việc sử dụng tiêu đề H1, nhưng trước đó tôi sẽ đưa ra một số mẹo chung có giá trị cho tiêu đề ở mọi cấp độ.
- Đừng kết thúc bằng dấu chấm;
- Chúng tôi duy trì hệ thống phân cấp khi sử dụng;
- Không có mục đích đặt từ khóa;
- Chúng xuất hiện ngay cả trong những bài viết rất ngắn, vì bất kỳ văn bản nào cũng có thể được chia thành các phần logic;
- Tiêu đề chứa đựng bản chất ngắn gọn của văn bản tiếp theo chứ không phải cái gì đó “giá như nó như vậy”.
Khái niệm cơ bản về H1
Các quy tắc trên cũng có liên quan, nhưng ngoài chúng còn có những quy tắc bắt buộc đối với cấp độ tiêu đề cụ thể này.
- H1 luôn xuất hiện một lần trên mỗi trang;
- Chúng tôi khuyến khích người dùng đọc tài liệu, vì vậy, việc sử dụng các từ hấp dẫn (ví dụ: bí mật, thủ thuật hay nhất, v.v.) là điều hợp lý);
- Chúng tôi làm cho nó khác với thẻ tiêu đề, vốn hiển thị tiêu đề của trang trong kết quả tìm kiếm và khuyến khích chuyển đổi sang trang của trang web từ tìm kiếm. Nó sẽ hơi khác một chút, nhưng nó chắc chắn phải mang lại sự hiểu biết rằng bối cảnh của tài liệu trên trang không thay đổi;
- Chúng tôi sử dụng từ khóa của bài viết, nhưng ở dạng loãng và không xuất hiện chính xác;
- Không nên sử dụng dấu chấm câu.
Sử dụng trong thực tế
Tôi đã viết ở trên rằng H1 chỉ được sử dụng một lần trên trang và nó sẽ được tích hợp tự động vào bố cục của mẫu trang web và cũng sẽ được chèn tự động vào tiêu đề. Kiểm tra thời điểm này. Phân tích tiêu đề bài viết của bạn và đảm bảo chúng được đặt trong H1. Nếu đây không phải là trường hợp, hãy chỉnh sửa mẫu của bạn.
Một tình huống phổ biến là thay vì H1 lại có H2. Đây không phải là một sai lầm nghiêm trọng, nhưng tốt hơn hết là bạn không nên để nó xảy ra.
Nếu chúng ta đang nói về việc sử dụng các cấp độ tiêu đề còn lại H2-H6, thì chúng đã được sử dụng ở chế độ thủ công.
Sử dụng một số CMS để tạo website, các tiêu đề này được thêm vào bài viết rất đơn giản. Ví dụ: trong WordPress, trong bảng định dạng của trình chỉnh sửa trang, luôn có một mục tiêu đề nơi bạn có thể chọn cấp độ mong muốn, trước đó đã chọn văn bản mong muốn cần được đưa vào tiêu đề.
Động cơ nào cũng vậy. Nếu bạn sử dụng bố cục HTML của trang web và cần thêm thẻ theo cách thủ công thì sẽ không gặp khó khăn gì. Bạn chỉ cần đặt những phần cần thiết của văn bản vào giữa thẻ mở và thẻ đóng ở mức độ yêu cầu. Xem ví dụ dưới đây.
tiêu đề cấp 2
tiêu đề cấp 3
tiêu đề cấp 4
tiêu đề cấp 5
tiêu đề cấp 6
Đối với các kiểu thiết kế cho từng cấp độ, bạn nên thêm các quy tắc cho từng cấp độ trong tệp kiểu dáng.
Lưu ý rằng không có dấu chấm hoặc dấu băm trước tên cấp tiêu đề trong kiểu. Bên trong dấu ngoặc, chúng ta chỉ ra các kiểu: loại phông chữ, kích thước, màu sắc, nền, v.v.
Thiết kế tiêu đề H1-H6
Nếu bạn làm cho tiêu đề của mình có thiết kế độc đáo, bắt mắt, khách truy cập sẽ chỉ cảm ơn bạn vì điều đó và thiết kế nội dung sẽ ở mức cao nhất. Ngày nay, những dòng tiêu đề đơn giản với cỡ chữ lớn và đậm nét nổi bật đang trở thành quá khứ.
Đơn giản nhưng đồng thời, thiết kế tiêu đề sử dụng nhiều dòng đánh dấu khác nhau, gạch chân bằng nền, v.v. đang trở thành mốt.
Tôi đã từng đưa ra một số ví dụ về thiết kế như vậy. Ngay cả khi bạn lấy blog của tôi, tiêu đề chính trong H1 không chỉ có phông chữ lớn trên nền trắng với phần còn lại của văn bản. Nó được ngăn cách bằng một khung màu xám trên nền chung của trang web, điều này làm cho nó dễ nhận thấy hơn và tập trung sự chú ý vào nó.
Mình sẽ cho bạn thêm 2 ví dụ về thiết kế tiêu đề trong H1.
Như bạn có thể thấy, đây không chỉ là một phông chữ đậm mà còn là một nền đẹp với bề mặt dưới lượn sóng và bề mặt trên được nhấn mạnh.
Bạn cũng có thể xem thiết kế thú vị cho mình tại trang này.
Đối với các tiêu đề H2-H6, bạn không chỉ có thể thiết kế chúng với một số loại nền mà còn có thể đánh số chúng (nếu bạn sử dụng nội dung ở đầu trang) dưới dạng hình ảnh đẹp. Một lần nữa, đây không phải là những con số đơn giản. Đây là một ví dụ tốt về một ý tưởng như vậy.
Khi bạn biết điều gì đó mà hầu hết mọi người không biết, bạn có thể tiếp tục và xem xét những lỗi chính khi sử dụng tiêu đề ở mọi cấp độ trên trang web của mình.
Lỗi sử dụng
Bạn có thể đã tự mình tìm ra tất cả các lỗi bằng cách nghiên cứu tất cả tài liệu ở trên, nhưng có một số sắc thái. Tôi sẽ liệt kê mọi thứ có thể áp dụng cụ thể cho bạn và những gì cần khắc phục ngay lập tức.
- Nhiều hơn một H1 trên mỗi trang. Nó không đúng. Chỉ một lần cho mỗi tài liệu;
- Sử dụng thẻ H1-H6 để thiết kế các thành phần trang web bổ sung. Ngay từ đầu, tôi đã viết rằng mục đích của những tài liệu này là thiết kế và cấu trúc nội dung. Vì vậy, chúng chỉ nên được sử dụng trong nội dung. Hầu hết các mẫu trang web đều bao gồm các thẻ này trong các cột bên cạnh để tạo kiểu cho tiêu đề của chúng, v.v. Điều này được thể hiện rõ ràng trong các mẫu WordPress, khi tên của từng tiện ích trong thanh bên được đặt trong H3 hoặc các thẻ khác. Nếu tình huống này tồn tại, thì hãy thay thế các thẻ tiêu đề trong các thành phần dịch vụ của trang web bằng các thẻ khác, chẳng hạn như bằng thẻ thẻ “nhịp”;
- Chúng tôi cụ thể nhập từ khóa. Trước đây, có ý kiến cho rằng bằng cách nhập trực tiếp từ khóa vào tiêu đề các cấp, bạn có thể tăng mật độ của chúng và vị trí của trang như vậy sẽ cao hơn. Nhưng giờ đây điều này đã bị các công cụ tìm kiếm “bị pháp luật trừng phạt” và các biện pháp trừng phạt được áp dụng đối với hành vi spam trong các tiêu đề. Hơn nữa, các thẻ này được xếp hạng theo các thuật toán khác. Kết luận: nhập từ khóa không có mục đích;
- Thường xuyên sử dụng dấu chấm và dấu chấm câu. Bạn hoàn toàn không nên sử dụng dấu chấm trong tiêu đề vì điều này không đúng theo quan điểm của cả người viết quảng cáo và các quy tắc chung về định dạng văn bản. Chúng tôi cũng cố gắng giảm thiểu số lượng dấu câu để tăng khả năng đọc của tiêu đề. Điều này cũng bao gồm một số lượng lớn các từ - không đặt tiêu đề quá dài;
- Cấu trúc không được duy trì về mặt phân cấp. Cố gắng tuân theo một chuỗi logic trong việc xây dựng hệ thống phân cấp của các thẻ H2-H6 trên mỗi trang;
- Sử dụng thẻ H1-H6 để tạo kiểu cho các thành phần văn bản khác thay vì tiêu đề. Đây là những gì tôi đã nói ở trên, khi kiểu thiết kế của từng thẻ được cấu hình không chính xác và thay vì in đậm thông thường, bạn có thể sử dụng tiêu đề ở cấp độ nào đó.
- Tiêu đề không phù hợp hoặc không truyền tải được ngữ cảnh của văn bản theo sau nó. Để tìm hiểu cách tạo tiêu đề hợp lý, hãy chọn một vài cuốn sách được thiết kế đẹp mắt mà bạn thấy dễ đọc. Đồng thời tập trung vào cấu trúc nội dung trên trang web Wikipedia;
- Hoàn toàn không sử dụng tiêu đề H1-H6 hoặc vắng mặt trên các văn bản nhỏ. Đơn giản là hoàn toàn vắng mặt và không có gì để nói, nhưng sự vắng mặt trên các trang nhỏ là một điểm đáng nghi ngờ, vì bất kỳ văn bản nào (kể cả tối thiểu 1000 ký tự) đều có cấu trúc logic. Chuyển từ chủ đề này sang chủ đề khác. Tại sao không chia nó thành các phần hợp lý với các tiêu đề phụ ở các cấp độ khác nhau?
Đó là tất cả, các quản trị web thân mến. Tài liệu về các tiêu đề trên trang web đã kết thúc. Nó xuất hiện khá kéo dài. Tôi đã lặp lại ở đâu đó, nhưng điều này chỉ nhằm mục đích giúp bạn tập trung sự chú ý vào những ý chính của bài viết. Tôi hy vọng rằng tài liệu này hữu ích cho bạn.
Nhân tiện, bạn có thể tìm thấy một lỗ hổng nhỏ trong tiêu đề của tôi trên trang web không? Nếu có thì hãy viết bình luận. Khoảnh khắc này không đáng chú ý lắm, nhưng nó ở đó.
Hẹn gặp lại các bạn ở những tài liệu tiếp theo. Còn nhiều điều nữa sẽ đến.
Trân trọng, Konstantin Khmelev!
» Sử dụng tiêu đề H1-H6
Sử dụng tiêu đề H1-H6
Trong bài viết này, chúng tôi sẽ cố gắng giải thích thẻ h1-h6 là gì và cách sử dụng chúng một cách chính xác có tính đến việc quảng cáo trang web. Bởi vì việc sử dụng đúng tiêu đề sẽ giúp bạn đạt được vị trí cao hơn trong công cụ tìm kiếm một cách nhanh chóng và dễ dàng. Các tiêu đề H1-H6 là các thẻ nhấn mạnh quan trọng nhất và cùng với thẻ tiêu đề meta, có tầm quan trọng rất lớn để tối ưu hóa SEO phù hợp cho trang web. Nếu không có liên kết quan trọng này, đơn giản là không thể đưa một trang lên hàng đầu trong một chủ đề cạnh tranh.
Hãy bắt đầu với một số quy tắc để sắp xếp các tiêu đề theo thứ tự tầm quan trọng của chúng:
- Sử dụng từ khóa trong tiêu đề
- Thư rác bị cấm trong tiêu đề ở mọi cấp độ
- Thẻ H1 chỉ nên sử dụng một lần
- Các khóa từ tiêu đề thực sự phải có trên trang
- Tiêu đề cấp đầu tiên phải càng cao càng tốt trong mã trang
- Bao gồm các cụm từ khóa quan trọng càng gần đầu tiêu đề càng tốt.
- Tiêu đề phải đầy đủ thông tin và không quá dài
- Cố gắng soạn các cụm từ khóa trong các tiêu đề phụ có tính đến hình thái và từ đồng nghĩa
- Câu đầu tiên sau tiêu đề phải sử dụng key từ nó
Sử dụng tiêu đề trên một trang
Thẻ H1-H6 được thiết kế để làm nổi bật tiêu đề của các trang trên trang web và có thể so sánh với tiêu đề sách. Tất cả các thẻ tiêu đề đều được ghép nối, vì về nguyên tắc, hầu hết tất cả các thẻ tiêu đề khác được sử dụng trong html và nếu bạn muốn làm nổi bật một số cụm từ với chúng, thì cụm từ đó phải được đặt giữa các thẻ này. Ví dụ như thế này:
cụm từ khóa của bạn giữa các thẻ
, thiết kế này nhằm mục đích làm nổi bật tiêu đề chính trên trang; tất cả những tiêu đề tiếp theo nên được sử dụng tương tự, có tính đến việc giảm dần.Thẻ quan trọng nhất đối với SEO là thẻ H1 và nó đóng vai trò là tiêu đề chính của trang. Đây có thể là tiêu đề của một bài viết, tin tức hoặc tên của một sản phẩm, nói cách khác, văn bản trong H1 đóng vai trò quan trọng nhất và giữa thẻ này phải có một cụm từ khóa có trọng số lớn nhất trên trang. . Điều đáng chú ý là tiêu đề H1 chỉ nên được sử dụng một lần và chứa các từ khóa chính và quan trọng nhất mà bạn dự định quảng cáo trang này. Các quy tắc viết tiêu đề gần giống với các khuyến nghị để viết tiêu đề meta Tiêu đề; chúng tôi khuyên bạn nên tự làm quen với chúng nếu bạn chưa làm như vậy.
Một khuyến nghị quan trọng khác là thẻ meta tiêu đề và tiêu đề cấp một không nên giống hệt nhau và quá dài; bạn không nên liệt kê danh sách các khóa bạn cần ở đó; 3-5 từ là đủ. Nếu không, các từ khóa trong tiêu đề sẽ bị mờ và không có trọng số tối đa, hoặc tệ hơn là bị công cụ tìm kiếm coi là spam. Nếu công cụ tìm kiếm nghi ngờ rằng bạn muốn lừa dối nó thì rất có thể trang này sẽ bị hạ xuống trong kết quả tìm kiếm. Hãy cực kỳ cẩn thận và dành thời gian khi viết tiêu đề, như đã đề cập ở trên, chúng là một trong những yếu tố xếp hạng quan trọng.
Không giống như tiêu đề cấp một, các tiêu đề khác (H2-H6) có thể được sử dụng nhiều lần trên trang, nhưng như bạn có thể đoán, trọng lượng của chúng theo thứ tự giảm dần. Các thẻ này được sử dụng cho các tiêu đề phụ và bạn cũng nên bao gồm các cụm từ khóa quan trọng trong đó, có thể nói, pha loãng hoặc ở dạng làm rõ. Sử dụng các từ đồng nghĩa trong đó, nhập khóa của bạn có tính đến hình thái, nhưng đừng làm cho chúng quá giống với tiêu đề H1. Các từ và cụm từ được sử dụng phải xuất hiện trên trang ngoài các tiêu đề và phải theo thứ tự hợp lý, với câu đầu tiên sau tiêu đề càng khớp với câu đó càng tốt.
Bạn không bao giờ nên tạo những dòng tiêu đề như: “Chào mừng đến với trang…” và những thứ tương tự. Điều này sẽ không mang lại điều gì tốt đẹp cho trang web và sẽ lấy đi phần trọng lượng lớn nhất của nó. Bất kỳ tiêu đề nào trên trang của bạn không chỉ dành cho khách truy cập trang web mà còn dành cho các công cụ tìm kiếm. Các tiêu đề trên trang không chỉ cần có nhiều thông tin mà còn không quá dài, khi soạn tiêu đề, bạn cần tìm một điểm trung gian. Yandex và Google cần hiểu những gì đang được nói trên trang, chèn từ khóa vào thẻ H1-H6, nhưng không được cuồng tín, nếu không bạn chỉ có thể khiến mọi việc trở nên tồi tệ hơn.
Điều đáng chú ý là các thẻ tiêu đề H1-H6 phải được sắp xếp theo thứ tự giảm dần trên trang. Nó nằm trên trang chứ không phải trong văn bản, vì thường có những trường hợp, chẳng hạn như trong các mẫu miễn phí, điều này không xảy ra và điều này cũng làm giảm trọng lượng của các từ khóa mong muốn. Có ý kiến cho rằng các tiêu đề bên dưới H3 không có bất kỳ ý nghĩa nào đối với các công cụ tìm kiếm và tất nhiên điều này có thể đúng, nhưng chúng tôi vẫn khuyên bạn nên sử dụng chúng để đánh dấu nội dung văn bản, thay vì các tiêu đề và khối của các thành phần trang web khác. Có một số lượng lớn các thẻ html khác cho việc này.
Những Lỗi Thường Gặp Khi Sử Dụng Thẻ Heading
Một số CMS, hay đúng hơn là các mẫu miễn phí dành cho chúng, thường mắc lỗi khi viết thẻ H1 sai vị trí, có tính đến việc tối ưu hóa nội bộ phù hợp. Hoặc họ sử dụng thẻ H3 để làm nổi bật tiêu đề của các khối và các thành phần trang web khác; điều này về cơ bản là không chính xác; vì mục đích này, có các thẻ thay thế trong HTML.
Một lỗi phổ biến khác xuất hiện ở một số mẫu là lỗi bố cục liên quan đến SEO và không tuân theo tiêu chuẩn W3C. Thông thường, bạn có thể thấy rằng trên một số trang web, thẻ H bao gồm các liên kết, hình ảnh, logo trong tiêu đề trang web, v.v. Điều này phản ánh kém trên toàn bộ trang web.
Chà, lỗi phổ biến cuối cùng là, khi sử dụng trình soạn thảo trực quan trong bảng quản trị, chủ sở hữu trang web thường để trống các tiêu đề trong văn bản mà không có ý nghĩa gì, không đóng các thẻ này, điều này có thể gây nhầm lẫn cho các bot công cụ tìm kiếm và các trang đó chắc chắn sẽ bị loại bỏ. giảm trong kết quả.
Chúng tôi đã liệt kê 3 lỗi phổ biến nhất khi sử dụng tiêu đề, tất nhiên còn có những lỗi khác, nhưng chúng không phổ biến lắm nên đã bị bỏ qua. Hãy nhớ kiểm tra các lỗi này trên các trang của bạn và đảm bảo loại bỏ chúng, từ đó làm cho trang web của bạn hấp dẫn hơn đối với các công cụ tìm kiếm.
Xin chào các độc giả thân mến của trang blog. Hôm nay chúng ta sẽ bắt đầu nói về các thẻ trong ngôn ngữ Html, cụ thể là về các tiêu đề H1, H2, H3, H4, H5, H6, về đoạn P và ngắt dòng Br, cũng như về thẻ dòng ngang Hr, sử dụng một ví dụ về cái nào chúng ta sẽ xem xét việc sử dụng các thuộc tính và xem bạn có thể tìm ra tất cả các thuộc tính có thể có cho từng phần tử ở đâu và xem cú pháp của các giá trị cho chúng.
Sự khác biệt chính giữa thẻ nội tuyến và thẻ khối là các thẻ trước có thể nối tiếp nhau theo chiều rộng cho đến khi hết dung lượng và sau đó chúng quấn sang dòng tiếp theo.
Chặn các phần tử, theo mặc định, hãy thử chiếm tất cả không gian có sẵn theo chiều rộng và do đó phần tử khối tiếp theo nhất thiết phải nằm trên một dòng khác.
Bây giờ chúng ta hãy bắt đầu nghiên cứu có hệ thống về tất cả các thẻ có thể có trong Html, đồng thời chúng ta sẽ đặc biệt chú ý đến loại chúng thuộc về loại nào để hiểu rõ ràng khả năng sử dụng chính xác (hợp lệ) của chúng. Cấu trúc thẻ đơn giản hóa trông như thế này:
Ngoài ra còn có các thuộc tính dành cho chúng (mỗi thuộc tính có bộ riêng), cho phép bạn thêm một số thuộc tính nhất định vào phần tử này, nhưng chúng ta sẽ nói về điều này bằng các ví dụ cụ thể.
Hãy bắt đầu xem xét khái niệm về các tiêu đề, được hình thành bằng cách sử dụng các thẻ ghép nối H1, H2, H3, H4, H5, H6 (tên xuất phát từ chữ cái đầu tiên của từ “Tiêu đề”, tức là “tiêu đề”). Chúng được thiết kế để tách các đoạn văn bản khác nhau và đánh dấu tầm quan trọng của chúng tùy theo cấp độ. Trong phiên bản hiện đại của ngôn ngữ HTML, tất cả các thẻ và tất cả các thuộc tính được phép cho chúng đều được chỉ định và mô tả trước.
Do đó, các tiêu đề chỉ có thể có sáu cấp độ và ngoài ra, các phần tử H1-H6 có hình khối, I E. cố gắng chiếm hết không gian có sẵn trên chiều rộng của trang. Nhưng chúng có một điểm đặc biệt - chỉ các phần tử nội tuyến mới có thể được chứa trong các thẻ tiêu đề, mặc dù thực tế là, chẳng hạn, cùng một Div cho phép bạn bao gồm các thẻ khối khác trong đó.
Cái đó. chẳng hạn, trình duyệt sẽ không cho phép bạn đặt các tiêu đề của cấp độ khác bên trong các tiêu đề của một cấp độ, bởi vì, tôi nhắc lại, chúng là các phần tử khối, nhưng chúng chỉ có thể chứa các chữ cái viết thường. Ồ, làm thế nào.
Các tiêu đề ở các cấp độ khác nhau H1-H6 sẽ được vẽ trong các trình duyệt có phông chữ có kích thước khác nhau (mặc dù, bằng cách sử dụng CSS, bạn có thể đặt chúng hoàn toàn ở bất kỳ kích thước, màu sắc và loại phông chữ nào để hiển thị trong trình duyệt, nhưng trong Html thuần túy, đây là các quy tắc) :
Nếu chúng ta xem xét bố cục của trang web theo quan điểm về sự thuận tiện cho việc quảng bá thêm (), thì điều đáng nói là chỉ nên có một tiêu đề cấp H1 trên mỗi trang. Bạn có thể sử dụng hai H1, nhưng nhiều hơn thế rất có thể sẽ gây ra phản ứng tiêu cực từ các công cụ tìm kiếm khi họ tìm kiếm tài liệu của bạn. Hành động của bạn có thể bị coi là thư rác hoặc nâng cao mức độ liên quan.
Bạn cũng không nên bỏ qua các cấp độ tiêu đề, tức là. Sau H1, bạn nên sử dụng H2 để đánh dấu những phần văn bản ít quan trọng hơn, v.v. Không chắc rằng điều này sẽ kéo theo bất kỳ lệnh trừng phạt nghiêm trọng nào từ các công cụ tìm kiếm, nhưng tốt hơn hết là bạn nên tuân theo logic trong việc tạo cấp độ tiêu đề trong mã Html.
Các công cụ tìm kiếm coi trọng các từ có trong các thẻ này hơn là các từ chỉ có trong văn bản. Kết luận sau đây là khi viết bài, bạn nên nhớ thêm tiêu đề vào những tiêu đề bạn sử dụng.
Chà, việc sử dụng các tiêu đề trong văn bản của bài viết khiến nó trở nên trực quan hơn và giúp người đọc nhanh chóng điều hướng tập hợp thông tin. Tôi nghĩ rằng lần đầu tiên sẽ có đủ thông tin và đã đến lúc phải tiếp tục.
Đoạn văn, ngắt dòng và dòng ngang HR trong mã Html
Thẻ P có nguồn gốc từ từ “đoạn văn”, nhưng thông thường nó vẫn được gọi là đoạn văn. Chúng được sử dụng để làm nổi bật một đoạn văn bản nhất định về mặt ngữ nghĩa, thường bao gồm một số câu. Giữa các đoạn văn được tạo bởi các phần tử P theo chiều dọc, xuất hiện khoảng trống, điều này cho phép tách các đoạn văn bản logic trực quan với nhau.
Vấn đề là một người sẽ khá khó khăn để đọc một văn bản nguyên khối nếu nó không được chia thành các đoạn nhỏ riêng biệt. Ví dụ: tôi thường không bắt đầu đọc những bài viết không được chia thành các đoạn trong mã Html, vì điều đó rất khó chịu.
Bằng cách ngắt văn bản, bạn rất giảm ngưỡng mệt mỏi khách truy cập vào tài nguyên của bạn và cải thiện các yếu tố người dùng (thời gian mà người dùng dành cho trang web của bạn), từ đó có tác động tích cực đến việc quảng cáo.
Vì những mục đích tương tự (thu hút sự chú ý của người dùng và giảm bớt sự mệt mỏi khi đọc một bài báo), nhiều nội dung khác nhau và đôi khi có lẽ được thêm vào văn bản.
Nhân tiện, thẻ đoạn P, như bạn có thể đã nhận thấy, là một cặp, nhưng theo đặc tả của Ngôn ngữ đánh dấu siêu văn bản 4.01, phần tử đóng của nó hoàn toàn là không yêu cầu. Trong trường hợp này, trình duyệt sẽ phải tìm ra nơi cần đặt nó.
Vì P là phần tử khối và chỉ các phần tử chữ thường mới có thể xuất hiện bên trong nó. Do đó, trình duyệt sau khi phát hiện thẻ đoạn mở đầu sẽ phân tích mã sâu hơn và ngay khi gặp phần tử khối tiếp theo (rất có thể đó sẽ là phần mở P tiếp theo), nó sẽ ngay lập tức chèn thẻ đoạn kết thúc vào phía trước nó. Trong tiêu chuẩn Html 5, những quyền tự do như vậy rất có thể sẽ không còn tồn tại và cần thiết ngay lập tức làm quen với việc đóng tất cả các thẻ và chỉ viết chúng bằng chữ thường.
Đoạn văn là một thành phần khối nên văn bản bên trong đoạn văn sẽ có xu hướng chiếm hết không gian chiều rộng có sẵn. Nghĩa là, nếu bạn đã viết một câu bốn câu bằng mã Html của tài liệu như bình thường (mỗi dòng riêng biệt) và đặt toàn bộ câu bốn câu này trong thẻ đoạn P, thì trong trình duyệt, bạn sẽ thấy rằng tất cả bốn dòng của bạn sẽ hợp nhất thành một và sẽ chiếm toàn bộ chiều rộng của không gian dành cho văn bản.
Chúng tôi đã thảo luận chi tiết lý do tại sao điều này xảy ra trong bài viết về. Nhờ đặc tính này của ngôn ngữ đánh dấu siêu văn bản (bất kỳ số lượng ký tự khoảng trắng nào trong mã nguồn sẽ được thay thế bằng một khoảng trắng khi hiển thị trong trình duyệt), bạn có thể định dạng mã của mình theo bất kỳ cách thuận tiện nào mà không sợ làm gián đoạn hiển thị của nó trên trang web.
Chà, nếu bạn thực sự cần viết một câu thơ bốn câu theo dạng được chấp nhận rộng rãi, bạn có thể sử dụng HTML bổ sung cho mục đích này
thẻ ngắt dòng được gọi là BR
(từ chữ “phá vỡ”):
BR là một phần tử nội tuyến và cũng là phần tử trống, tức là đơn (không có phần tử đóng). Toàn bộ chức năng của BR là gây ngắt dòng khi hiển thị văn bản trên trình duyệt (tương tự như phím Enter trong bất kỳ trình soạn thảo văn bản nào).
Việc viết thẻ BR (ngắt dòng) trong mã không được quy định dưới bất kỳ hình thức nào. Bạn có thể viết toàn bộ văn bản lại với nhau và đặt BR thay vì dấu cách vào đúng vị trí hoặc bạn có thể chia văn bản ngay thành các dòng trong mã để rõ ràng và đặt BR ở cuối dòng hoặc ở đầu. Điều này không thay đổi bản chất.
nhân sự(viết tắt của từ “quy tắc ngang”, tức là đường ngang) là một thẻ Html rất đơn giản vẽ một đường ngang (sọc) trên toàn bộ chiều rộng và độ dày của màn hình, tùy thuộc vào trình duyệt mà nó được xem (về cơ bản nó là một điểm đánh dấu trực quan, tương tự như các thẻ tiêu đề, cho phép bạn chia văn bản thành các phần hợp lý để dễ hiểu hơn).
Nó "trống" (đơn), tức là không có cặp (thẻ đóng). Bên cạnh đó, Nhân sự là một yếu tố khối, I E. theo mặc định, nó chiếm toàn bộ chiều rộng trang có sẵn cho nó.
Khái niệm thuộc tính và quy tắc viết thuộc tính trong thẻ Html
Chúng ta hãy xem khái niệm về một thuộc tính bằng cách sử dụng phần tử đơn giản này. Thực tế là chúng ta có thể thêm các thuộc tính vào các thẻ hợp lệ và được mô tả trong trình xác thực WC3 cho chúng, từ đó cung cấp cho nội dung thuộc tính mà chúng ta cần.
Ví dụ: nếu bạn có một số đoạn (đoạn) trong một hàng được đính kèm trong các thẻ P tương ứng, thì để thay đổi giao diện của một trong số chúng, bạn chỉ cần thêm các thuộc tính bắt buộc vào phần tử P mở đầu của đoạn này. Trong trường hợp các thẻ đơn (trống), không có tùy chọn nào về vị trí thêm thuộc tính bắt buộc.
Vì vậy, quy tắc đầu tiên là thuộc tính chỉ được đặt trong thẻ mở(phần kết không bao giờ chứa bất cứ thứ gì). Một phần tử có thể chứa một số thuộc tính, được phân tách với nhau và giữa tên thẻ bằng khoảng trắng (điều kiện bắt buộc). Hãy để tôi đưa ra ngay một ví dụ về việc sử dụng chúng cho đường ngang HR:
Vì vậy, trước tiên hãy xem qua cú pháp thuộc tính. Chúng được chèn vào thẻ mở, được viết cách nhau bằng dấu cách (bao gồm khoảng trắng sau tên phần tử) và là một cấu trúc bao gồm tên, dấu bằng và được viết trong dấu ngoặc kép (thông thường người ta thường đặt cặp đôi , nhưng tiêu chuẩn cũng cho phép các giá trị dấu ngoặc đơn được ghép nối). Thứ tự của các thuộc tính trong mã thẻ Html không quan trọng.
Ở đó tôi đã cung cấp một liên kết đến danh sách tất cả các thẻ HTML hợp lệ. Nếu trong danh sách này, bạn nhấp vào tên của thành phần mà bạn quan tâm (trong trường hợp của chúng tôi là HR), bạn sẽ được đưa đến một trang có thông số kỹ thuật chi tiết cho nó:
Tất cả các thuộc tính của bất kỳ thẻ nào đều có thể chia thành ba nhóm:
- Chung - chúng có thể xuất hiện trong phần lớn các phần tử trong ngôn ngữ HTML. Trong hình trên, chúng ở phía dưới và được bao quanh bởi khung màu đỏ. Trên thực tế, có rất ít thuộc tính chung (chỉ có sáu thuộc tính) và thậm chí khi đó, bạn khó có thể sử dụng tất cả chúng trong quá trình thực hành của mình. Nhiều khả năng chỉ có bốn - , tiêu đề và phong cách.
- Thuộc tính sự kiện - chúng cần thiết để kích hoạt một số hành động nhằm phản hồi hành động của người dùng hoặc sự kiện hệ thống. Chúng liên quan nhiều hơn đến JavaScreet và trong hình trên nằm ở dưới cùng (được khoanh tròn trong khung tối).
- Duy nhất - Mỗi thẻ thường có bộ thuộc tính riêng, một số thuộc tính có thể không tìm thấy trên các phần tử khác. Nếu chúng ta xem xét đường ngang HR, nó chỉ có bốn thuộc tính duy nhất (căn chỉnh, không bóng, kích thước và chiều rộng). Tất cả những thứ khác được chỉ định trong thẻ HR (ngoại trừ hai nhóm được mô tả ở trên) sẽ bị trình duyệt bỏ qua.
Ví dụ về các thuộc tính trong thẻ dòng ngang HR
Giá trị của các thuộc tính khác nhau có thể là số tùy ý (v.v.) hoặc giá trị từ một tập hợp được xác định trước, chẳng hạn như trong trường hợp căn chỉnh cho HR - left|center|right (bạn có thể sử dụng một trong ba căn chỉnh tùy chọn).
Nói chung, thông tin về chúng trong trình xác nhận WC3 có thể được lấy không chỉ trong danh sách các thẻ Html mà còn trong danh sách thuộc tính, mà bạn sẽ tìm thấy tại liên kết được cung cấp.
Danh sách này chứa tất cả các tùy chọn có thể có cho tất cả các thẻ có sẵn bằng ngôn ngữ HTML. Cột “Các phần tử liên quan” đối diện với tùy chọn mà bạn quan tâm sẽ liệt kê các phần tử có thể sử dụng thuộc tính này. Cột “Loại” cho biết loại dữ liệu có thể được sử dụng làm giá trị của nó.
Ví dụ: trong dòng được gạch chân trong hình cho thuộc tính căn chỉnh, đối với thẻ HR, chỉ được phép sử dụng ba giá trị cố định được liệt kê ở đó (trái | giữa | phải).
Một cột rất quan trọng khác là “Depr”. Nếu thuộc tính bạn quan tâm trong cột này có chữ D bên cạnh thì thuộc tính đó sử dụng không được khuyến khích, nhưng bạn nên sử dụng các kiểu CSS thích hợp để thay thế nó. Khi xem đặc tả thẻ, chúng tôi cũng thấy rằng bên cạnh tên của cả bốn thuộc tính dành cho nhân sự, có chữ “Không dùng nữa” (không được khuyến nghị sử dụng).
Hãy xem những thuộc tính nào được sử dụng với các phần tử mà chúng ta đã đề cập trong bài viết này (P, tiêu đề H1-H6 và HR). Đối với tất cả họ bạn có thể sử dụng "căn chỉnh", bởi vì tất cả các phần tử này là phần tử khối. Đối với các phần tử nội tuyến, thuộc tính "align" không có ý nghĩa.
Ví dụ: nếu bạn thêm "căn chỉnh" vào thẻ tiêu đề (chẳng hạn như H1), bạn có thể đặt căn chỉnh văn bản tiêu đề. Những thứ kia. Phần tử khối sẽ chiếm toàn bộ không gian có sẵn theo chiều rộng, nhưng nội dung của tiêu đề này (văn bản của nó) có thể được căn chỉnh sang trái (mặc định), phải hoặc giữa hoặc theo chiều rộng (căn chỉnh - khoảng cách giữa các từ thay đổi, như trên các cột báo).
Nhân tiện, điều tương tự cũng sẽ đúng với thẻ Html của đoạn P và đối với vùng chứa Div, nếu bạn xem kỹ ảnh chụp màn hình đã cho.
Đối với đường HR nằm ngang, thuộc tính "align" sẽ biểu thị sự căn chỉnh của chính đường ngang được hình thành bởi phần tử đó. Nhưng thẻ HR là một thành phần khối và có xu hướng chiếm hết không gian có sẵn về chiều rộng. Do đó, việc sử dụng "căn chỉnh" trong nó chỉ có ý nghĩa nếu cùng với nó, bạn đặt giá trị cho thuộc tính “width”(chiều rộng) nhỏ hơn chiều rộng của trang.
Giá trị cho "chiều rộng" có thể chỉ là số (điều này sẽ đặt chiều rộng tính bằng pixel) hoặc bạn có thể sử dụng tỷ lệ phần trăm của tổng chiều rộng có sẵn cho đường HR ngang. Giá trị của thuộc tính “size” cho cùng một thẻ được chỉ định bằng số biểu thị chiều cao của đường ngang tính bằng pixel. Hãy xem xét điều này với một ví dụ:
Thẻ HR trong chuẩn Html 4.01 có thêm một thẻ nữa một thuộc tính được gọi là đơn, bởi vì nó không thể nhận bất kỳ giá trị nào (nó chỉ có nghĩa là một số hành động) - đó là một "noshade" ngăn đường ngang tạo bóng:
Rõ ràng là tôi sẽ không thể xem xét tất cả các thuộc tính có thể có cho tất cả các thẻ có thể có trong Html và điều này là không bắt buộc, bởi vì mọi thứ có thể được thực hiện bằng cách tương tự - điều chính là phải hiểu cú pháp và ý tưởng. Ngoài ra, nhiều trong số chúng đã không được khuyến khích sử dụng, bởi vì... Hiện nay chức năng của chúng được thực hiện bởi các kiểu CSS, mà chúng ta cũng sẽ sớm nói chi tiết.
Chúc bạn may mắn! Hẹn gặp lại bạn sớm trên các trang của trang blog
Bạn có thể xem thêm video bằng cách vào");">
Bạn có thể quan tâm
Các bảng trong Html - Thẻ Table, Tr và Td, cũng như Colspan, Cellpadding, Cellspacing và Rowspan để tạo chúng 
Iframe và Frame - chúng là gì và cách sử dụng khung trong Html tốt nhất 
Nhúng và đối tượng - Thẻ Html để hiển thị nội dung đa phương tiện (video, flash, âm thanh) trên các trang web 
Chỉ thị nhận xét và Doctype trong mã Html, cũng như khái niệm về các phần tử khối và nội tuyến (thẻ) 
Cách chèn link và hình ảnh (ảnh) vào HTML - thẻ IMG và A
Thẻ tiêu đề
...nên có trên mọi trang của trang web. Tầm quan trọng của mỗi tiêu đề phụ thuộc vào số lượng:
- thẻ tiêu đề quan trọng nhất
- ít quan trọng hơn lần đầu
...
- quan trọng cuối cùng
- thẻ tiêu đề quan trọng nhất - ít quan trọng hơn lần đầu ... - quan trọng cuối cùng
Những thẻ này cần được xử lý cẩn thận vì chúng có tác động lớn hơn đến xếp hạng của trang web. Với việc sử dụng thẻ đúng cách
...Thường có thể đạt được vị trí trang web tốt cho các truy vấn chỉ dựa trên các yếu tố nội bộ. Và tình huống ngược lại: nếu sử dụng không đúng cách, bạn có thể bị các công cụ tìm kiếm trừng phạt. Trong bài viết này chúng ta sẽ nói về cách sử dụng các thẻ này một cách chính xác.
Cú pháp thẻ ..
Tiêu đề bài viết
Phụ đề1
...Phụ đề2
Phụ đề3_1
...Phụ đề3_N
Phụ đề3
vân vân.
Theo mặc định, mỗi tiêu đề có kích thước khác nhau. Ví dụ, mã
tiêu đề h1
tiêu đề h2
tiêu đề h3
tiêu đề h4
tiêu đề h5
tiêu đề h6
Trang này biến thành thế này:
Ý nghĩa thẻ ..
Xét về tầm quan trọng và tầm quan trọng trong việc quảng bá website, thẻ tiêu đề h1-h6 đứng ở vị trí thứ hai sau thẻ