Thiết kế web seo đơn giản hơn với HTML5

Đăng ngày 28/04/2012 lúc 17:10 bởi phong | Bình luận: (12)

HTML5 và CSS3 được nhận định là xu hướng tương lai của thiết kế web SEO bởi tối ưu của code giúp tăng tốc độ quét của spider google. Ví dụ như sự hỗ trợ các thẻ header, article, section, … giúp hạn chế các code lằng nhằng id, class để đặt tên, chưa kể có khi bị nhầm lẫn vì trùng tên. Hoặc phải vất vả add các đoạn script vào để chạy video, audio, … nhưng với html5 thì chỉ cần 1 tag video, audio là đủ.

Bài viết này sẽ trình bày sự thay thế khá đáng kể tag div đối với html5, giúp việc cắt html cho web dễ dàng hơn, cũng có nghĩa là web sẽ được seo tốt hơn. Các bạn đã quen dùng table có lẽ sẽ gặp một chút khó khăn đấy. Các thẻ div được thay thế bằng các header, article, aside, … thực tế chỉ là div nhưng đã được cấu hình sẵn vị trí cho dễ dàng định vị trên web chứ không có gì ghê gớm cả.

Trước hết, mời các bạn xem qua tấm hình này:

Để thực hiện cắt html cho cấu hình tấm hình trên, đối với div các bạn phải viết thế này:

<div id=”header”>Header</div>

<div id=”content_left”>Left

<div class=”content”>Content 1</div>

<div class=”content”>Content 2</div>

</div>

<div id=”content_right”>Right

<div class=”content”>Content 1</div>

<div class=”content”>Content 2</div>

</div>

<div id=”footer”>Footer</div>

Cùng với CSS:

#header {
background-color: #F00;
margin: 0px;
padding: 0px;
height: 100px;
width: 100%;
}
.clear {
clear: both;
height: 0px;
}
#menu {
background-color: #0F0;
width: 100%;
height: 30px;
}
#content_left {
margin: 0px;
float: left;
height: 400px;
width: 70%;
background-color: #FF0;
}
.content {
height: 50px;
background-color: #999;
margin: 10px;
}
#content_right {
background-color: #F0F;
margin: 0px;
height: 400px;
width: 30%;
float: left;
}
#content_right .content {
height: 50px;
background-color: #FF9;
margin: 10px;
}
#footer {
background-color: #0C0;
clear: both;
height: 100px;
width: 100%;
}

Cắt web trên bằng HTML5 như thế nào, trước hết ta thay <div id=”header”> bằng thẻ <header>, thay <div id=”menu”> thành thẻ <nav>; thay <div id=”content_left”> bằng <article>; thay <div class=”content”> bằng <section>; thay <div id=”content_right”> bằng <aside>; thay <div id=”footer”> bằng <footer>. Như vậy, các div với tên id và class đã được code htmlt5 hỗ trợ sẵn với các tag trên, thật tiện dụng phải không. Sau đó các bạn thay đổi CSS nhé, các id và class giờ đây đã trở thành tag luôn, nên không cần dấu “.” hay “#” gì cả, lúc đó CSS3 sẽ trở thành như thế này:

body {
width:550px;
}
header {
background-color: #F00;
height: 100px;
}

nav {
background-color: #0F0;
height: 30px;
}
article {
float:left;
height: 400px;
width: 70%;
background-color: #FF0;
}
article > section {
height: 50px;
background-color: #999;
margin: 10px;
}
aside > section {
height: 50px;
background-color: #FF9;
margin: 10px;
}
aside {
float:left;
background-color: #F0F;
margin: 0px;
height: 400px;
width: 30%;
}
footer {
background-color: #0C0;
clear: both;
height: 100px;
width: 100%;
}

Còn đây, cắt layout cho trang trên với html5 sẽ trở thành như thế này đây:

<header>header</header>

<article>left

<section>content 1</section>

<section>content 2</section>

</article>

<aside>right

<section>content 1</section>

<section>content 2</section>

</aside>

<footer>footer</footer>

Chỉ ngắn gọn có vậy thôi, các bạn thấy thế nào, việc cắt layout html đã dễ dàng hơn, kèm theo là việc thiết kế web, đặc biệt là thiết kế web seo sẽ nhanh hơn và hiệu quả hơn phải không?

Chúc các bạn thực hiện tốt nhé.

Khi copy bài viết, mong các bạn để nguồn: http://seoweb24h.com/

Các bài viết khác

Gửi phản hồi

Có 12 bình luận

Ngọc

>> 07.05.2012 lúc 15:04

Cám ơn bạn,

Bài viết rất dễ hiểu, nhưng theo mình thì hiện nay chưa nên dùng html5 như bạn vừa trình bày.

1. html5 hiện chưa phổ biến
2. các brower hỗ trợ html5 như thế nào
3. có cần thiết phải thay đổi hay không khi html4 dùng các web nhỏ cũng khá ok rồi mà

Bạn nghĩ những điều trên như thế nào ?

[Trả Lời]

phong

>> 09.05.2012 lúc 16:34

Cám ơn bạn đã quan tâm đến bài viết của seoweb24h

Về vấn đề bạn nêu ra theo mình nghĩ như sau, hiện nay hầu hết các ông lớn như youtube (google), apple, … đều có xu hướng ưu ái cho html5. Điều này có nghĩa là html5, css3 trở nên phổ biến là điều sớm hay muộn, và đương nhiên ai không dùng xem như tuột hậu đấy.

Còn vấn đề hiện nay có nên dùng html5 thiết kế web không thì còn là một tranh cãi đó bạn, đúng như bạn nói là brower cũng chưa hỗ trợ hết 100%, nhưng theo mình thì chúng ta nên tiếp cận dần sẽ tốt hơn !

[Trả Lời]

món ngon dễ làm

>> 18.05.2012 lúc 11:35

cảm ơn bạn dành thời gian viết về html. Nhưng theo mình nghĩ thì hiện tại html5 chưa được phổ biến, trình duyệt chưa hỗ trợ nhiều, về seo thì mình thấy mới chỉ nói trên lý thuyết thôi, còn thực tế thời điểm này, thì html chưa nói nên được điều gì cả, nhưng xu hướng tương lai thì html5 sẽ phát triển hi