Tại sao chúng ta nên sử dụng các thẻ như thẻ p, span, hx khi chúng ta có thể sử dụng CSS thay thế?

Tại sao chúng ta nên sử dụng các thẻ như thẻ p, span, hx khi chúng ta có thể sử dụng CSS thay thế? Có quan trọng từ quan điểm SEO?

Phiên bản ngắn là các thẻ và CSS khác nhau có mục đích khác nhau.

<h1>Whatever</h1>, ví dụ, mang một ý nghĩa nhất định cùng với việc sử dụng nó: "Đây là một tiêu đề, một cấp độ quan trọng của cấp độ đầu tiên", v.v. Một số trình phân tích cú pháp cũng sử dụng thẻ hx (và các thẻ khác) để tạo phác thảo cấu trúc của tài liệu có thể được sử dụng cho mọi mục đích từ xử lý dữ liệu đến khả năng truy cập (ví dụ: trình đọc màn hình chuyển sang câu hỏi tiếp theo trên trang chủ của quản trị web bằng cách chuyển sang h3 tiếp theo) .

Bạn không thể loại bỏ các thẻ ngữ nghĩa dựa trên những gì bạn có thể làm với CSS và ngược lại.
Bạn có thể áp dụng CSS cho một thẻ khác để làm cho nó trông giống như h1, ví dụ: <span style="font-weight:bold;font-size:2em">Whatever</span>nhưng điều đó vẫn không làm cho thẻ span đó trở thành một tiêu đề thực tế về chức năng và ngữ nghĩa. Trong trường hợp này, phác thảo mà tôi liên kết ở trên sẽ không thể thực hiện được vì những tiêu đề đó không phải là tiêu đề, mà chỉ là một số văn bản mà bạn tự ý làm cho to và đậm.

Đánh dấu và trình bày là khác nhau

Điều này hơi giống như hỏi "tại sao chúng ta nên có tường khi chúng ta có sơn?" :)

Thẻ HTML biểu thị nội dung của bạn là gì - đây là tiêu đề, đây là danh sách, v.v.

CSS biểu thị nội dung của bạn sẽ trông như thế nào - tiêu đề nên có màu xanh lam, danh sách nên được thụt vào này nhiều, menu nên ở bên trái, v.v.

Javsascript cho biết trang của bạn nên hoạt động như thế nào - hình động, v.v.

Vì vậy, không có nội dung HTML, CSS và Javascript thực sự không có gì để làm việc.

Các danh mục này không phải là 100% đen trắng - ví dụ: CSS có thể chỉ định "chuyển tiếp" ngay bây giờ, đó là hình động - nhưng chúng là ý tưởng cơ bản.

Vui lòng xem các cuộc thảo luận trước đây về chủ đề này trên StackOverflow tại đây và đây .

Đánh dấu tốt tiết kiệm rất nhiều nỗ lực và làm việc tốt hơn

Nếu bạn muốn một cái gì đó hoạt động giống như một liên kết, bạn có thể sử dụng <span class="mylink">và sử dụng một loạt CSS và JS để làm cho nó trông và cảm thấy đúng. Hoặc bạn chỉ có thể sử dụng một <a>yếu tố và nhận tất cả những thứ đó miễn phí, không cần thêm mã để tải xuống, bởi vì các trình duyệt đã biết phải làm gì và thực hiện logic bằng mã gốc nhanh. Thêm vào đó, nhiều khả năng hoạt động chính xác cho trình đọc màn hình, trình duyệt di động, công cụ tìm kiếm, bộ tổng hợp và các trường hợp sử dụng khác mà bạn không nghĩ tới.

Đây cũng là lý do tại sao bạn nên sử dụng một <button>hành động có thể nhấp, một <label>để gắn nhãn <input>và <main>cho phần chính của trang của bạn.

Đánh dấu tốt ảnh hưởng đến SEO như thế nào

Về cơ bản, SEO là về công cụ tìm kiếm thuyết phục rằng nội dung của bạn phù hợp nhất với cụm từ tìm kiếm. Rõ ràng, không ai ở Google đang đích thân đọc mọi trang web và xếp hạng nó.

Do đó, để các công cụ tìm kiếm biết nội dung của bạn là gì, một chương trình phải phân tích cú pháp.

Và này, nhìn kìa! Chúng tôi có toàn bộ ngôn ngữ được gọi là HTML có nghĩa là gắn nhãn nội dung của bạn theo cách mà máy móc có thể hiểu! :)

Vì vậy, có, đánh dấu rõ ràng sẽ giúp các công cụ tìm kiếm lập chỉ mục các trang của bạn tốt hơn.

Để sử dụng một ví dụ cực đoan, nếu tiêu đề trang của bạn thực sự là một bức ảnh mà bạn chụp tiêu đề báo, nó có thể trông thú vị và mọi người có thể đọc nó tốt, nhưng với một công cụ tìm kiếm, nó sẽ chỉ là một hình ảnh không có ý nghĩa . Trong khi đó <h1>Turtle Groomer 5000</h1>rõ ràng nói với các công cụ tìm kiếm rằng bạn có một sản phẩm tạo điều kiện vệ sinh kiểm tra.

Cũng xin suy nghĩ về những người bị suy giảm chức năng nào đó (ví dụ) phải sử dụng đầu đọc chữ nổi. Trong những trường hợp như vậy, các thẻ html có tầm quan trọng lớn hơn nhiều so với các kiểu dáng css trực quan.

Su trả lời phần ngữ nghĩa. Liên quan đến SEO, bạn sẽ thấy rằng yếu tố h1 được các công cụ tìm kiếm đánh giá cao hơn các thẻ khác. Các thẻ h2 / b / strong được cho trọng lượng lớn hơn một chút so với văn bản thông thường.

Hầu hết các thẻ khác khá giống nhau, nhưng bạn nên luôn luôn sử dụng thẻ phù hợp nhất cho công việc. Google gần đây đã bắt đầu phân tích bảng khi được sử dụng cho dữ liệu dạng bảng và HTML được sử dụng phù hợp khác có thể đưa ra tín hiệu cho nội dung nào quan trọng hơn các nội dung khác.

Đối với HTML5, hãy xem đậm và in nghiêng trong HTML5 .

Tóm lược:

Sử dụng <b>khi bạn muốn văn bản có một phong cách khác mà không có tầm quan trọng theo ngữ cảnh, nhưng sử dụng <strong>khi bạn muốn văn bản có tầm quan trọng cao hơn từ góc độ nội dung hoặc SEO.

Sử dụng <i>để bù đắp tâm trạng của văn bản, nhưng sử dụng <em>để làm cho văn bản trở nên rõ ràng.

Ngoài ra: đừng quên tầm quan trọng của ngữ nghĩa đối với người dùng bị khuyết tật. Phần mềm đọc màn hình phụ thuộc vào các ngữ nghĩa này để trình bày cho người mù bối cảnh bắt buộc họ đang bỏ lỡ vì khuyết tật của họ.

Thứ nhất, <hx>là một thẻ khá quan trọng, vì nó xác định các tiêu đề, như những người khác đã đề cập. Các tiêu đề rất hữu ích không chỉ cho vẻ bề ngoài, mà bởi vì chúng phân tách các phần theo cách mà một cái nhìn giống nhau không thể. Chỉ cần xem Wikipedia chẳng hạn. Một số chương trình phụ thuộc vào các loại thẻ này để "phá vỡ" các tài liệu hoặc thậm chí tạo một bảng mục lục tự động. Một công cụ tìm kiếm sẽ cho rằng văn bản trong <h1>thẻ sẽ quan trọng hơn vì đó là một tiêu đề - một tiêu đề.

Tiếp theo, trong khi các bảng định kiểu là tuyệt vời, một số thiết bị sẽ bỏ qua các bảng định kiểu và chỉ tập trung vào HTML, đó là nơi mà một thẻ giống như <em>có ích. Nếu các bảng định kiểu bị vô hiệu hóa hoặc có vấn đề khi tải nó (ví dụ: sự cố kết nối internet), văn bản vẫn xuất hiện ở định dạng. <em>cũng có thể nói rằng đáng lẽ phải có một sự nhấn mạnh vào từ này, trong khi chữ in nghiêng có thể là bất cứ thứ gì từ tiêu đề phim đến việc tạo chú thích hình ảnh khác với văn bản thông thường. Điều này có thể được sử dụng bởi những người sử dụng các công cụ khuyết tật, nếu không nói chung là không thể nhấn mạnh.

<span>mặt khác, phần lớn là phiên bản nội tuyến của <div>thẻ và nếu có bất cứ điều gì, nó có thể giúp bạn không phải nhập một lớp bổ sung (với điều đó được nói, bạn có thực sự muốn sử dụng <span class="italic">thay vì <i>cho mọi trường hợp in nghiêng Nó làm cho mã khó đọc hơn, ít tiêu chuẩn hóa hơn (theo giả định rộng rãi rằng phần lớn mọi người sẽ sử dụng cái sau hơn cái trước), và không có cách nào cải thiện tài liệu.

<p>cũng có ích cho những người khuyết tật, vì nó đảm bảo rằng văn bản có thể được chia thành các đoạn có thể quản lý theo cách <br />không thể.

Chắc chắn, chúng ta có thể nói rằng HTML không có nghĩa là để tạo kiểu, nhưng có một ranh giới tinh tế giữa thiết kế và kiểu dáng; và thẳng thắn, tôi muốn coi đó là sở thích của người dùng. Cho dù bạn sử dụng <i>hay <span class="italic">tùy thuộc vào bạn và sẽ không tạo ra sự khác biệt cho SEO. Rốt cuộc, tại sao lại giới hạn chúng ta chỉ một cách làm việc? (giống như cách chúng ta có thể chọn sử dụng dấu chấm phẩy hay không ở cuối dòng trong JavaScript - Tôi luôn sử dụng chúng, trong khi những người khác không bao giờ sử dụng chúng và điều đó không tạo ra sự khác biệt nào cho chức năng.)