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
Quảng cáo linh tinh Thi công trọn gói triển lãm Pharmed Việt Nam - free thiết kế 3D Thứ sáu lúc 16:41
Quảng cáo linh tinh Cải thiện vận may nhờ lựa chọn đúng hướng thiết kế cửa Thứ năm lúc 15:18
Quảng cáo linh tinh Xu hướng thiết kế bao bì hiện nay Thứ tư lúc 10:31
Quảng cáo linh tinh Thiết kế lắp đặt hệ thống bếp ăn công nghiệp tại Vĩnh Phúc Thứ hai lúc 10:48
Quảng cáo linh tinh Thiết kế lan can bền vững ấn tượng với lục bình bê tông ly tâm 13/7/19

Chia sẻ trang này