Viết HTML trong thiết kế web seo chuyên nghiệp nên dùng div hay table

Học thiết kế web HTML là một đề tài rất bao la bởi tính linh hoạt và phong phú của mã tag. Hiện nay, đề tài gây tranh cãi khá nhiều của các “ông” thiết kế web là việc sử dụng tag <div> và tag <table>.

Trong thiết kế web seo chuyên nghiệp ta nên sử dụng tag nào ? Bài viết này phần nào đó giúp các bạn có thể định hướng được các trường hợp nào nên sử dụng các <tag> trên.

Trước hết, mình cùng bàn luận với nhau về tính năng của 2 tag trên:

Cả 2 tag đều có tác dụng là bao một hay nhiều khối, nhưng cách sắp sếp các khối ấy khác nhau:

• <table>: sắp xếp khá dễ dàng và ít lỗi vì bản thân <table> là tạo bảng, nhưng cũng khá bất tiện với những cấu trúc khác thường ví dụ như hình sau:

Cần sử dụng khá nhiều tag HTML :

<table width=“200px” border=“0″>
<tr>
<td>Seo</td>
<td>&nbsp;</td>
<td>24H</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Web</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Top</td>
<td>&nbsp;</td>
<td>Tốt</td>
</tr>
</table>

• <div> : Sắp xếp hơi phức tạp hơn, dễ bị lỗi nếu không cố định bằng kích thước nhưng trái lại thì khá linh động trong cách trình bày. Ví dụ như trường hợp :

<div id=“ngoai”><div id=“trong”></div></div>

<div id=”trong”> có kích thước ngang hoặc rộng to hơn <div id=”ngoai”> vẫn được, đây là điều <table> không làm được dù cố định kích thước nhưng nếu <tr> (hoặc <td>) ở trong lớn hơn <table> ngoài thì tự động thẻ ngoài sẽ giãn ra.

Đọc qua có lẽ các bạn thấy điều này đâu có ảnh hưởng gì đến SEO, thật sự có đấy, hiện nay các website ra đời đều nhắm đến việc SEO sau khi thiết kế, nên thường thiết kế đơn giản dễ hiểu và dễ tối ưu. Vì vậy, viết HTML có xu hướng làm sao cho WEB càng ít code càng tốt, tùy vào cấu trúc website mà các bạn chọn 1 trong 2 thẻ trên nhé.

Số lượng code:
Bạn sẽ phải thừa nhận về điều này, tag <div> cấu trúc nhỏ hay lớn chỉ khác nhau thuộc tính “width – height”, còn <table> thì càng lớn sẽ càng tốn rất nhiều code, phải định dạng từng <tr>, <td> nếu từng ô khác nhau.

Vậy, ở trường hợp cấu trúc lớn như tổng trang web, tổng cột bên phải web, … thì ta nên dùng <div> vì cấu trúc sẽ nhẹ nhàng hơn. Nhưng những cấu trúc nhỏ, gọn như khung thông tin gồm tên, giá sản phẩm, khuyến mãi thì ta nên dùng <table>.

Kết hợp cả 2 như vậy, tốc độ load nhanh sẽ được người dùng ưu ái hơn, spider google cũng thích hơn, đó là điều SEO chuyên nghiệp cần lưu ý.

Tốc độ load:
Đây là vấn đề được tranh cãi rất nhiều, có người cho rằng <div> được load nhanh hơn, vì sau khi load lần thứ nhất thì trình duyệt lưu CSS vào cache. Có người cho rằng sử dụng 2 thẻ này có tốc độ load như nhau, nhưng vì <table> khi load hết bảng mới hiện ra, còn <div> thì load từng phần nên bị lầm tưởng <div> load nhanh hơn… và rất nhiều lý do khác. Nhưng lý do thật sự <div> load nhanh hơn <table> đấy các bạn, vì mô hình DOM duyệt <table> khá chậm và các trình duyệt phổ biến hiện nay có xu hướng chuộng <div> hơn.

Page Speed nhanh là một lợi thế SEO của trang web, vì vậy trong thiết kế web chuyên nghiệp người ta chọn <div> nhiều hơn.

Phù hợp với CSS:
Vấn đề này thì không cần giải thích vì <div> mang một lợi thế mạnh hơn hẳn so với <table>. <div> và css như hai cái chân của một người vậy, thiếu 1 cái thì di chuyển không biết sao đây, hoặc nếu thay thế 1 chân bằng cây gậy, dù đi được nhưng không thể chạy được.

Trên đây là những so sánh cơ bản về <div> và <table> có ảnh hướng đến SEO chuyên nghiệp, nhưng việc lựa chọn còn tùy thuộc vào nhiều yếu tố khác nữa, đặc biệt là yếu tố thói quen của người dùng. Các bạn hãy cùng chia sẻ ý kiến riêng của mình để cùng giúp nhau thăng tiến về HTML trong SEO WEB chuyên nghiệp.

Khi bạn copy bài viết, xin để nguồn Seoweb24h.com