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

Nếu thiết kế quen sẽ thấy div dễ thiết kế hơn, nhưng đã quen dùng table rồi thì sẽ lười dùng div

dùng div tối ưu hơn.nhẹ hơn...mấy công ty phỏng vấn cũng hay hỏi bạn layout theo kiểu div hay table

Theo mình thì bạn nên tối ưu bằng thẻ <div> , thẻ này có tốc độ load nhanh hơn table

Không biết thế nào , nhưng mà thấy các template của Joomlart đều thiết kế dạng div, ko dùng table
Hầu hết table chỉ thấy mấy bác aspx vn hay dùng thui .
MÌnh chưa có test cụ thể nào , nhưng thấy các cty thiết kế lớn đều dùng div thì mình cũng dùng

Người dùng Div quen khi chuyển sang Html5 sẽ dễ dàng hơn người dùng quen table

Mình thấy dùng div vẫn thuận tiện cho code và cả seo.

Theo mình thì div và css vẫn là tốt nhất, table có vẻ quá phức tạp và rối rắm!

Ko đâu bạn, Table dễ sử dụng hơn Div nhưng đoạn code viết bằng table thường dài hơn div

table mà khi lỗi, thì mờ mắt tìm đoạn sai , hic, Ngày xưa code aspx em từng bị dính bầu với table rồi

Div vẫn là lựa chọn số 1.

Vấn đề này trên thế giới cũng bàn nhiều lắm rùi.
DIV lợi hơn hoàn toàn. Khi nào bảng thì dùng Table thoai.

theo mình thì cũng nên sử dụng div hơn. Bản thân trang sẽ load nhanh và không bị lag khi quá tải.

Bản thân site mình về xổ số cần rất nhiều bảng để phù hợp các chức năng nhưng mình cũng toàn dùng div. Tốc độ load cực nhanh và ít lag.

(Một vài ý kiến )