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, …
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:
Right
Content 1
Content 2
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