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

[seoweb24h]

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

[trannamcn]

DIV chuyên nghiệp hơn table bác ợ Load nhanh nữa.

[seoweb24h]

nhưng nhiều người vẫn thích dùng table hơn dùng Div. Nên mình mới viết bài này. hehe

[ngoc_ann_00]

bi giờ thì cái câu hỏi div hay table đã kết thúc rồi,ko ai tranh cãi nữa đâu.
chỉ có cái nào bố trí kiểu bảng thực thụ(bảng giá,bảng lương...) mới dùng table còn ko thì div hết

[kientre]

table dùng đơn giản hơn nên nhiều người vẫn dùng, kiểu như ie 6 vẫn đông đảo người dùng thôi

[ngoc_ann_00]

table dùng đơn giản hơn nên nhiều người vẫn dùng, kiểu như ie 6 vẫn đông đảo người dùng thôi

ở đây nói là "chuyên nghiệp" mà bác.
nhắc đến IE6 là sôi máu cả lên,cái thứ củ chuối ấy,do người dùng ko biết họ mới dùng thôi chứ.

[kientre]

ở đây nói là "chuyên nghiệp" mà bác.
nhắc đến IE6 là sôi máu cả lên,cái thứ củ chuối ấy,do người dùng ko biết họ mới dùng thôi chứ.

Thế mình mới lấy IE 6 ra làm ví dụ

[maicon]

table dùng đơn giản hơn nên nhiều người vẫn dùng, kiểu như ie 6 vẫn đông đảo người dùng thôi

table dùng dựng layout phức tạp bỏ mẹ còn việc dựng nên cái layout củ chuối thì ko cần phải bàn.

nhưng xài div hay table chả liên quan j đến seo cả

[seoweb24h]

dùng Div Seo tốt hơn, nếu bạn nào dùng quen div rồi sao này chuyển sang Html5 sẽ dễ sử dụng hơn.

[akien]

hô hô, giờ mà ông coder nặn 1 trang tin mà gặp 1 ông designer = table thì đảm bảo ông designer bị chưởi cho thối mặt