Trang website validator.w3.org sẽ giúp bạn kiểm tra cấu trúc HTML5 cho website/blog của bạn và những đây là hướng dẫn để fix các lỗi HTML5.
1. TỐI ƯU CHO CÁC FILE .CSS NHÚNG LINK TỪ BÊN NGOÀI
Nếu khi kiểm tra HTML5 nếu có thấy lỗi từ các link nhúng ngoài này thì có 2 cách xử lý:Cách 1: Copy hết toàn bộ CSS trong link đó và dán lại trước thẻ Skin và tối ưu
Cách 2: Dạng file .CSS nhúng bên ngoài:
<link href='http://abc.xyz/mnx.CSS' rel='stylesheet' type='text/css'/>Bạn thay thành
<script type='text/javascript'>//<![CDATA[//CSS Readyfunction loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("http://abc.xyz/mnx.CSS");//]]></script>Lưu mẫu lại và kiểm tra HTML5 lại sẽ mất các lỗi từ file này
2. SỬA LỖI HTML5 TẠI LOGO
Khi blog của bạn sử dụng Logo và check với công cụ kiểm tra HTML5 bạn sẽ thấy phát hiện lỗi HTML5 tại logo và đây là cách khắc phục để đạt chuẩn HTML5 tại logoBạn tìm đoạn code sau:
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>Và thay thế bằng
<b:if cond="data:blog.pageType == "index"">Đoạn code thay thế mình đã sử dụng điều kiện nếu là ở trang chủ thì tên Blog sẽ khai báo là thẻ H1 và vào bài viết thì tên Blog sẽ chuyển thành thẻ H3. Nên các bạn cố gắng tìm các thẻ<b:if> .... </b:if> bao đoạn code tô đỏ để thay thế toàn diện.
<h1 itemprop="name">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null" itemprop="url">
<img expr:alt="data:title" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:style=""height:" + data:height + "width:" + data:width + "display: block"" /><span style="display: none;"><data:blog .title=""></data:blog></span></a></h1>
<b:else>
<h3 itemprop="name">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null" itemprop="url">
<img expr:alt="data:title" expr:id="data:widget.instanceId + "_headerimg"" expr:src="data:sourceUrl" expr:style=""height:" + data:height + "width:" + data:width + "display: block"" /><span style="display: none;"><data:blog .title=""></data:blog></span></a></h3>
</b:else></b:if>
3. FIX LỖI HTML5 PHIÊN BẢN VER2
Đối với các template sử dụng version 2 bạn sẽ luôn thấy đoạn code sau:<html b:version='2' class='v2' lang='vi' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>Khi kiểm tra HTML5 bạn sẽ thấy 7 - 8 lỗi từ đoạn code này vì vậy cách sửa là bạn xóa và giữ lại đoạn code sau:
<html b:version='2' class='v2' lang='vi'>Lưu ý: mỗi lần truy cập vào mẫu đoạn code đầu lại xuất hiện, do đó bạn phải luôn xóa nó đi mỗi lần lưu template lại.
4. SỬA LỖI LIÊN QUAN TỚI ẢNH
Lỗi này liên quan đến hình ảnh thiếu khai báo thuộc tính alt="mô tả ảnh" bạn chỉ cần thêm thuộc tính alt vào sau thẻ mở ảnh <img alt="mô tả ảnh" src="url_ảnh"......../>Lỗi này thường rất nhiều bạn hãy thêm thuộc tính alt vào hết trong ảnh nhé
5. CÁC LỖI CƠ BẢN KHÁC
Các lỗi thông thường khác công cụ đã báo cho các bạn chỉ cần tinh ý đọc được đề xuất bằng tiếng anh của nó bạn sẽ sửa lỗi nó dễ dàng.Nếu các bạn có vướng mắc hãy để lại bình luận phía dưới mình sẽ hỗ trợ.
Nguồn: Blog chia sẻ thủ thuật
Không có nhận xét nào:
Đăng nhận xét
➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.