Hướng dẫn tạo blog chuẩn W3C HTML5

Dạo này check trên mạng thấy các blogger chuyên thiết kế template blogspot họ tạo ra những mẫu template hầu như theo chuẩn html5 cả nên bài viết sẻ hướng dẫn các bạn cách để chuyển blog của mình từ XHTML...sang HTML5

Chắc hẳn bạn đang đặt ra câu hỏi HTML5 là gì?

HTML là viết tắt của cụm từ Hyper Text Markup Language là ngôn ngữ đánh dấu siêu văn bản, đây là hình thức định dạng cốt lỗi của hầu hết các trang web trên mạng Internet. Và hiện tại HTML5 là phiên bản sau và mới nhất đi lên từ HTML, nó có cải tiến thêm nhiều chức năng khác nhau phù hợp với sự phát triển của khoa học công nghệ thôi.

Lịch sử các phiên bản HTML

Lợi ích nên chọn HTML5?

Giúp công cụ tìm kiếm index trang web / blog tốt hơn và nhanh hơn.
Tương thích tốt hơn với trình duyệt
Document Object Model (DOM) là ổn định hơn và nhất quán
...

Chuyển Blogspot sang HTML5

Bước 1: Kiểm tra blog của bạn đang dùng phiên bản mấy bằng cách vào trang sau: validator.w3.org , nếu có thông báo như thế này là Blog của bạn đã chuẩn HTML5.

Bước 2: Sao lưu mẫu lại trước khi thực hiện
Bước 3: Xóa hết các thẻ trên <head> và để lại như sau:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>

Chuyển mã </html> thành </HTML>

Bước 4: Thay thế mã sau:

<b:include data='blog' name='all-head-content'/>

Thành

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>

Bước 5: Thay thế mã <b:skin><![CDATA[ thành:

<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/> <style type="text/css"> <!-- /*<b:skin><![CDATA[*/]] <style>

Bước 6: Tìm và xóa bỏ tất cả các mã sau:

<b:include name='quickedit'/>

Mỗi khi bạn thêm một widget vào thì phải vào trong template và xóa mã này đi nếu không nó sẻ báo lỗi.

Bước 7: Xóa bỏ tất cả các mã sau:

<a expr:name='data:post.id'/>

Hoặc

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a> </span> </b:if> </b:includable>

Bước 8: Loại mã như thế này nếu có:

<div class='post-share-buttons goog-inline-block'>........</div>

Bước 9: Mã hóa các ký tự đặc biệt như: < > / & . . .

Thường bạn sẻ gặp mã đây nhất: & hãy thay chúng thành &amp;

Giờ bạn hãy thử kiểm tra thử xem Blog của mình đã chuyển sang HTML5 và chuẩn chưa nào?

Bạn đang xem bài viết Hướng dẫn tạo blog chuẩn W3C HTML5 trên tips24h.net - Hướng dẫn tạo blog chuẩn W3C HTML5 tương đương với đường dẫn http://www.tips24h.net/2014/05/huong-dan-tao-blog-chuan-w3c-html5.html. Nếu bạn thấy bài viết hữu ích hãy chia sẻ URL trên cho bạn bè, người thân của bạn. Vui lòng không sao chép nội dung bài viết trên www.tips24h.net nếu chưa được sự đồng ý của Admin

60 Responses to "Hướng dẫn tạo blog chuẩn W3C HTML5"

Tuấn Phan

5/23/2014

Bạn cho mình xin thẻ meta tag SEO của bạn được không

Dao Tien

Bạn dùng cái này nhé :)
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.searchLabel'>
<title><data:blog.pageName/> | Tips24h.net</title>
<meta expr:content='tips24h.net | thủ thuật windows, thủ thuật internet, office, các thủ thuật máy tính' name='keywords'/>
<meta content='index, follow' name='robots'/>
<b:if cond='data:blog.searchQuery'>
<title>Key Word <data:blog.searchQuery/> :: | Tips24h.net</title>
<meta expr:content='tips24h.net | key-word cần seo' name='keywords'/><b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Sorry! Trang bạn tìm kiếm không tồn tại | Tips24h.net</title>
<b:else/>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.pageTitle' name='DC.Title'/>
<meta expr:content='tips24h.net | thủ thuật windows,....' name='description'/>
<meta expr:content='tips24h.net | thủ thuật windows,....' property='og:description'/>
</b:if>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL-LOGO' property='og:image'/>
</b:if>
<meta expr:content='tips24h.net | thủ thuật windows,....' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> » <data:blog.title/></title>
<meta expr:content='data:blog.pageName + " " + data:blog.title' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL-LOGO' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='Tips24h.net, Website chia sẻ thủ thuật windows, thủ thuật internet' name='description'/>
</b:if>
<meta expr:content='tips24h.net, thủ thuật windows,....' name='keywords'/>
<meta content='index,follow' name='Robots'/>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>

5/24/2014

Bạn hướng dẫn cho mình cách fix các lỗi HTML5 này được không
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tuanphan.info%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices
Cám ơn bạn trước

Blog của bạn còn khá ít lỗi, fix 1 tí là xong thôi, Bạn tìm đoạn code sau và xóa bỏ đi sẻ fix dc mấy lỗi ở dưới cùng dòng Line 1548 đến Line 1574
<b:include name='quickedit'/>

tìm đoạn này <a name='8641102132429987899'></a> thay name thành id

Tìm rel="service.post" thay thành rel='alternate'

Với lỗi Bad value 51px; for attribute height on element img: Expected a digit but saw p instead. bạn có thể đọc bài này nhé http://www.tips24h.net/2014/03/tao-tieu-de-anh-logo-hop-le-html5.html

Lỗi Duplicate ID hcard- thì theo mình nghĩ bạn nên xóa bỏ tất cả các thẻ id='hcard-' đi.
Cái này mình k dám chắc 100% nhưng nó tồn tại k có tác dụng gì cả. Bạn cứ sao lưu template lại rồi thử, hoặc sử dụng trình duyệt google chrome xóa bỏ thẻ đó rồi test, nếu phát sinh lỗi gì thì Ctrl + Z để khôi phục lệnh vừa thực hiện là dc. :-bd
Còn một số lỗi bạn k để ý trong quá trình đăng bài mình sẻ nói sau. :-bd

5/25/2014

nếu mình xóa id='hcard-' vào https://www.google.com/webmasters/tools/richsnippets kiểm tra thì nó báo lỗi này:
Lỗi: Missing required hCard "author".

mình không tìm thấy "service.post" này trong temp mình

mình không tìm thấy trong temp bạn ơi

bạn chỉ mình khác phục lỗi Line 1449, Column 146: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…m3PgmNnlcQ/U2GaDTz9xUI/AAAAAAAAARw/ccGgCwCDH0E/s72-c/hai-a-du.jpg' width='72'/> bên tiện ích được không

Lỗi này là do bạn đăng bài không chuẩn, khi đăng bài bài nên chọn soạn thảo ở chế độ HTML rồi xóa bỏ border="0" và imageanchor="1" khi bạn up ảnh lên sẻ k có lỗi này.
Vào mấy bài viết cũ và xóa đi sẻ thấy kết quả.

à, bạn tìm là <a name=" thôi nó sẻ ra 1 list tìm dưới đoạn <div class='post hentry'>

Tìm đoạn này <link expr:href='data:blog.url' rel='canonical'/> và xóa 3 thẻ href dưới nó rồi thay thành
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>

<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>

<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
Xong ;)

Lỗi này là lỗi trùng lặp ID để mình xem lại thử đã nhé

Bạn tìm đến authorization.css?targetBlogID chú ý đến ký tự & ở phía sau ID thay ký tự đó thành &amp;

nhức đầu với cái gọi là chuẩn HTML5 này quá

À sao mình cài meta seo của tinhoc24h vào khi mình bấm vào seach label nó chỉ hiện tên blog thôi chứ không hiện tên nhãn vậy bạn.
Link meta seo của mình: https://www.dropbox.com/s/99ae8vst4j9vd3y/meta%20seo.xml

Cái này đơn giản mà, do không đặt thẻ điều kiện khi vào trang label thôi
<b:if cond='data:blog.searchLabel'>
<title><data:blog.pageName/> | Thích đặt gì thì đặt</title>
<meta content='index, follow' name='robots'/>
Bạn nên học các thẻ điều kiện của blog để làm chủ các hiển thị trên blog và dễ tùy biến nhiều thứ hơn

5/26/2014

Bác Tiến tìm ra cách xem trùng lặp ID chưa Bác

5/28/2014

Alo, mấy nay bận quá bác ạ. bác tìm đoạn code sau <div class='vcard' id='hcard-'> và thay bằng đoạn sau thử thế nào nhé
<b:if cond='data:blog.pageType == "index"'>
<div class='vcard'>
<b:else/>
<div class='vcard' id='hcard-'>
</b:if>

5/31/2014

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

</b:if>

<div style='display:none;'>
<div class='vcard' id='hcard-'>
<span itemprop='description'><span itemprop='itemreviewed'><data:post.title/></span></span>
<time itemprop='dtreviewed'><data:post.timestampISO8601/></time>
Rating: <span itemprop='rating'>4.5</span>
Diposkan Oleh: <span class='fn n'>
<span class='given-name' itemprop='reviewer'><data:post.author/></span>
</span>
</div>
</div>

<div style='clear: both;'/> 
</div>

mình thêm code của bạn vào nó báo lỗi
Lỗi khi phân tích cú pháp XML, dòng 1440, cột 3: The element type "div" must be terminated by the matching end-tag "</div>

Nặc danh

9/22/2014

Anh có thể cho em cách fix templates này không ạ? Từ line 1384 em không hiểu lỗi đó là gì anh ạ? http://validator.w3.org/check?uri=http%3A%2F%2Fwww.xn--vnvitblog-qcb7394f.vn%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Mong anh giúp em nhé! E cảm ơn!

The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment. Những dòng dưới của em là lỗi đó mà e không thể nào khắc phục được anh ạ.

Akat Suki

Mình vừa kiểm tra thấy là
Lỗi 1: Nên xóa bớt 1 đoạn thẻ meta title đi chắc xong
Lỗi 2, 3: Bạn xem bài này
Lỗi 4: từ dòng Line 1384 đến Line 1384, Column 131: thì nên thay & thành & (Bước 9 trong bài viết)
Mấy lỗi bên dưới hình như là do tên miền bằng tiếng việt nên nó tự phát sinh lỗi hay sao ấy, mình cũng chưa tìm ra phương án nữa, Để biết chính xác lỗi thì bạn nên dùng template đó có phải là do tên miền k thì nên lập 1 cái blogspot khác .blogspot và test thử thôi, nếu k bị lỗi thì do tên miền bằng tiếng Việt mà phát sinh :-bd

Anh có thể cho em hỏi là sửa "Lỗi 4: từ dòng Line 1384 đến Line 1384, Column 131: thì nên thay & thành & (Bước 9 trong bài viết)" cách làm như thế nào a?

Bạn xem trên w3c nó hiển thị ở cái widget nào thì dựa vào nó mà xác định code lỗi do chưa mã hóa sau đó vào chỉnh sửa template và thay bằng đoạn mã hóa thôi

Em chỉnh sửa còn 4 lỗi anh ạ, tuy nhiên lỗi về widget khi em tìm đến không biết cách sửa ra sao anh a?

Xin lỗi anh nhé em làm đc rồi ạ!

Cơ mà sao blog bạn nó lỗi gì rồi "Not Found

The requested object does not exist on this server. The link you followed is either outdated, inaccurate, or the server has been instructed not to let you have it."

À em bỏ tên miền tiếng Việt anh ạ? Blog của em là vanvietblog.blogspot.com .... Widget như này thì lỗi ở đâu anh nhỉ?
<b:widget id='HTML1' locked='false' title='Liên kết cộng đồng' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
Vẫn bị lỗi anh ạ!

Xóa thằng này đi là ok bạn nhé <b:include name='quickedit'/>
;)

Trong blog nếu có thằng nào khác tương tụ zậy cứ việt del thẳng tay @@, mỗi lần thêm vào 1 cái widget là nó tự sinh ra ấy

Đồng Việt

10/23/2014

Chào anh nhé! Anh có thể tư vấn giúp em chỉnh sửa templates này không ạ?
validator.w3.org/check?uri=http%3A%2F%2Fwww.dongvietblog.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

Mấy lỗi đầu tiên do thẻ <a nó cũ rồi không hỗ trợ trong HTML 5 + xml nữa nên bạn hãy thay nó lại bằng id
Lỗi tiếp theo là lỗi trùng id bạn rà soát và kiểm tra lại id nào trùng rồi thay thế đi
"The itemprop attribute was specified, but the element is not a property of any item" là do bạn thiết lập "post-header" hãy kiểm tra lại code trong mục đó. Blog bạn giao diện khá thân thiện rồi, nên chỉnh lại "post-header" sử dụng css "opacity" để làm mờ đi tí, rồi dùng @media cho "post-header" responsive.

Lisa Nguyen

10/28/2014

Chào anh ạ! em check site em trên validator.w3.org nó toàn báo 4 lỗi này
validator.w3.org/check?uri=http%3A%2F%2Fthietkenoithat-lisa.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Anh có thể tư vấn giúp em đc không ạ>
meta content='8737166792532029189' itemprop='postId'
meta content='6020586205000774549' itemprop='blogId'
…prop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'
…AAAAAAAABhY/EI3C5fU9qmU/s1600/thiet-ke-nha-hien-dai.jpg' itemprop='image_url'/

Hello. Đối với HTML5 nó sẻ báo lỗi nếu bạn sử dụng css border: 0; khi bạn upload ảnh lên trong bài viết. Bạn hãy vào từng bài viết để xóa thuộc tính border: 0 đi là xong thôi.
Hoặc có thể xem qua bài này: http://www.tips24h.net/2014/06/cach-tao-bai-dang-chuan-html5-cho-blogspot.html

Anh Tú Nguyễn

11/29/2014

Chào bạn! Bài viết của bạn rất có ích đối với mình, mình đã fix được rất nhiều lỗi. Tuy nhiên blog của mình vẫn còn những lỗi này mà mình ko biết phải fix như thế nào. Mong bạn giúp mình!
http://validator.w3.org/check?uri=http%3A%2F%2Fbestmmo247.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

Chào bạn mình vừa xem qua các lỗi trên w3c thì có một số lời khuyên như sau:
…p://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
thì cái này do nó không áp dụng cho HTML5 cái này chắc là bạn áp dụng cho comment facebook chắc chấp nhận vậy thôi.
2.<meta content='vi' http-equiv='content-language '/> là không cần thiết đâu bạn có thể xóa bỏ nó
3. Thay .../posts/default" />
Thành <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
4. Nhớ thay & thành &
5. Line 1259, Column 202: Bad value 99px; for attribute height on element img: Expected a digit but saw p instead. thì bạn nên fix bằng cách sử dụng css riêng (ngoại tuyến) chứ không được dùng trong file html
6. Line 1266, Column 7: Element style is missing required attribute scoped. thì tìm đến mục lỗi <Style> và thay thành <style scoped="" type="text/css">
7. Đọc thêm bài này để fix lỗi http://www.tips24h.net/2014/06/cach-tao-bai-dang-chuan-html5-cho-blogspot.html
Line 1363, Column 231: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
8. Tìm <link href='https://sites.google.com/site/anhtunguyen230991/Cssnews.css?attredirects=0&amp;d=1' rel='stylesheet' type='text/css'/> sửa lại file này và đưa nó lên phần header
9. Nhớ là bất kỳ cái hình nào cũng cần đến thẻ alt
10. Bạn cứ fix dần đi,, rồi mình chỉ tiếp chứ nhiều quá nó loạn hết lên ấy :D

Nguyễn Nhật Thiên

12/19/2014

Blog của mình đa phần là do lỗi dấu ">" mình không biết fix thế nào, bạn giúp mình với. Cảm ơn bạn nhiều nha!!
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nhatthienkt.com%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

Blog bạn sử dụng css inline khá nhiều, nên sử dụng css đặt ở phần đầu trong thẻ style, lỗi đầu tiên thì bạn xem lại cách sử dụng html vì nó không cho pháp bạn sử dụng thẻ ul chèn ul li chồng chéo, cứ dò theo rồi sửa lại cho nó đúng cấu trúc thôi. Bạn có yahoo không có gì online mình chỉ chứ khó nói hết đọc trong phần comment này.Mà đôi lúc nói cũng như không vì nhìn mấy comment trên rồi bỏ đi luôn

Nhận xét này đã bị tác giả xóa.

fb được không bạn, vì mình không xài yahoo lâu rồi,https://www.facebook.com/nhatthienkts

Oke để mình add fr

Cám ơn Akat Suki một webmaster rất nhiệt tình, blog của mình www.nhatthienkt.com cũng chuẩn W3C rồi.

12/20/2014

Oke, chúc mừng bạn :-bd

Hồng Quân

12/27/2014

bạn. cái phần những kí tự <>/ & có phải sửa tất cả không bạn

12/29/2014

Bạn check trên này validator.w3.org. Nếu thấy lỗi mới fix bằng mã hóa các ký tự đó chứ

Giúp với! Web tôi có 11 lỗi ký tự > thì mã hóa sao? Cảm ơn

Cô Chủ Nhỏ

3/21/2015

http://validator.w3.org/check?uri=http%3A%2F%2Febookfreevn.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 giup minh sua cac loi nay voi ad

Minh Nguyễn

4/03/2015

Em chào anh ạ!

Mong anh giúp đỡ, trang web của em là vaytieudungtinchap.net có nhiều lỗi nhưng em không biết phải chỉnh thế nào?? Mong anh giúp đỡ em với ạ!

Thank anh nhiều!

Dung Nguyen

4/14/2015

anh ơi cứu em với :( ;( blog của em nhiều lỗi quá.
https://validator.nu/?doc=http%3A%2F%2Ftholamtranthachcaovachthachcao.blogspot.com
em không biết làm cách nào ạ.

Tran Anh

6/08/2015

Bạn ơi xem qua cho mình cái blog này với, http://muabannhadatthaibinh.blogspot.com/ , blog báo lỗi ở trong w3c, mình không biết sửa như thế nào
https://validator.w3.org/nu/?useragent=Validator.nu%2FLV+http%3A%2F%2Fvalidator.w3.org%2Fservices&doc=http%3A%2F%2Fmuabannhadatthaibinh.blogspot.com%2F%23

Bán Đất Quận 12 Giá Rẻ

7/11/2015

Chào anh!
em mới tập làm blog nên thấy báo nhiều lỗi quá: https://validator.w3.org/check?uri=http%3A%2F%2Fwww.bandatquan12giare.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&st=1&outline=1&No200=1&verbose=1#source

Anh hướng dẫn em fix những lỗi này với ạ. http://www.bandatquan12giare.net/
Chân thành cảm ơn!

N PV

8/22/2015

Hi bạn
Trang của mình http://nhuygialai.com test có khá nhiều lỗi.
Bạn có thể nhận làm dịch vụ tối ưu giúp temp cho mình không?
Nếu được bạn liên lạc lại Email: nhuygialai@gmail.com nhé
Cám ơn bạn nhiều