Thiết kế web Mạng xã hội
Quảng cáo:

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

Thảo luận trong 'Tối ưu hoá Onpage'

  1. kinhmauhanoi

    kinhmauhanoi New Member

    Quảng cáo:
    _______________________________________________________________________

    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ả.

    html

    Để 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=”menu”>Menu</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>

    <nav>Menu</nav>

    <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é.
Similar Threads: Thiết kế
Diễn đàn Tiêu đề Date
Giới thiệu website, doanh nghiệp Tại sao nên chọn Sdragon thiết kế gian hàng triển lãm Hôm qua, lúc 12:51
Quảng cáo linh tinh Thiết kế căn phòng khoa học và ngăn nắp Hôm qua, lúc 09:23
Giới thiệu website, doanh nghiệp Thiết kế vách ngăn cầu thang giật cấp gỗ đẹp, giá rẻ tại Q7 Thứ sáu lúc 17:24
Thùng rác Thiết kế thi công Lắp đặt rèm cửa chung cư tại Hải Phòng Thứ sáu lúc 15:59
Giao lưu - Kết bạn - Tán gẫu Thiết kế ban công đẹp Thứ sáu lúc 15:28

Chia sẻ trang này