Cách chuyển đổi HTML4 sang HTML5

  • Nguyễn Lê Điệp
  • 17-01-2017
  • 60
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Ở bài này chúng ta sẽ đi vào phần cách chuyển đổi từ HTML4 sang HTML5. Ở bài này sẽ trình bày về cách chuyển đổi trang HTML4 sang trang HTML5 mà không ảnh hưởng đến nội dung và cấu trúc của một trang web ban đầu.

    HTML4 HTML5
    <div id="header"> <header>
    <div id="menu"> <nav>
    <div id="content"> <section>
    <div id="article"> <article>
    <div id="footer"> <footer>

    Trang với HTML4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="vi">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>HTML4</title>
    <style>
    body {
        font-family: tahoma
        font-size: 13px;
    }
    
    div#header, div#footer {
        padding: 15px;
        color: yellow;
        background-color: blue;
    }
    
    div#content {
        margin: 10px;
        padding: 15px;
        background-color: pink;
    }
    
    div.article {
        margin: 10px;
        padding: 15px;
        background-color: violet;
    }
    
    div#menu ul {
        padding: 0;
    }
    
    div#menu ul li {
        display: inline;
        margin: 5px;
    }
    </style>
    </head>
    <body>
    <div id="header">
      <h1>Nội dung của header</h1>
    </div>
    <div id="menu">
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>PHP</li>
      </ul>
    </div>
    <div id="content">
      <h2>HTML</h2>
      <div class="article">
        <h2>HTML4</h2>
        <p>HTML4 ra mắt năm 1997 và ngay sau đó nó đã dừng phát triển từ năm 1998.</p>
      </div>
      <div class="article">
        <h2>HTML5</h2>
        <p>Năm 2009 nhóm W3C và WHATWG đã cho ra mắt phiên bản mới HTML với tên HTML5</p>
      </div>
    </div>
    <div id="footer">
      <p>© 2016 Kennis.vn</p>
    </div>
    </body>
    </html>
    Xem ví dụ

    Thay đổi DOCTYPE

    Với HTML4 chúng ta có kiểu khai báo DOCTYPE như sau:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Với HTML5 thì có kiểu khai báo DOCTYPE đơn giản hơn như bên dưới:
    <!DOCTYPE html>
    Xem ví dụ

    Thay đổi Encoding

    Với HTML4 chúng ta có kiểu mã hóa như sau:
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    Với HTML5 thì có kiểu mã hóa đơn giản hơn như bên dưới:
    <meta charset="utf-8">
    Xem ví dụ

    Thêm HTML5Shiv

    Trong HTML5 thì các trình duyệt có phiên bản mới đểu hỗ trợ nhưng đôi khi có người dùng lại xài những biên bản trình duyệt cũ thì nó không hỗ trợ cho HTML5. Với HTML5Shiv này giúp chúng ta trong thiết kế không bị lỗi gio diện khi người dùng xài trình duyệt phiên bản cũ. Với HTML5Shiv bạn có thể tìm hiểu rõ hơn thông qua bài Trình duyệt đối với HTML5 .

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    Xem ví dụ

    Thay đổi ngữ nghĩa các phần tử

    Với CSS hiện của HTML4 có chứa id, class để định nghĩa hiển thị cho các phần tử:
    body {
        font-family: tahoma
        font-size: 13px;
    }
    
    div#header, div#footer {
        padding: 15px;
        color: yellow;
        background-color: blue;
    }
    
    div#content {
        margin: 10px;
        padding: 15px;
        background-color: pink;
    }
    
    div.article {
        margin: 10px;
        padding: 15px;
        background-color: violet;
    }
    
    div#menu ul {
        padding: 0;
    }
    
    div#menu ul li {
        display: inline;
        margin: 5px;
    }
    Với HTML5 ta có CSS để định nghĩa cho các phần tử hiển thị như sau:
    body {
        font-family: tahoma
        font-size: 13px;
    }
    
    header, footer {
        padding: 15px;
        color: yellow;
        background-color: blue;
    }
    
    section {
        margin: 10px;
        padding: 15px;
        background-color: pink;
    }
    
    article {
        margin: 10px;
        padding: 15px;
        background-color: violet;
    }
    
    nav ul {
        padding: 0;
    }
    
    nav ul li {
        display: inline;
        margin: 5px;
    }
    Với HTML5 ta co cấu trúc HTML như sau:
    <body>
    <header>
      <h1>Nội dung của header</h1>
    </header>
    <nav>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>PHP</li>
      </ul>
    </nav>
    <section>
      <h2>HTML</h2>
      <article>
        <h2>HTML4</h2>
        <p>HTML4 ra mắt năm 1997 và ngay sau đó nó đã dừng phát triển từ năm 1998.</p>
      </article>
      <article>
        <h2>HTML5</h2>
        <p>Năm 2009 nhóm W3C và WHATWG đã cho ra mắt phiên bản mới HTML với tên HTML5</p>
      </article>
    </section>
    <footer>
      <p>© 2016 Kennis.vn</p>
    </footer>
    </body>
    Xem ví dụ

    Sự khác biệt giữa article, section và div

    Trong HTML5 thì section được định nghĩa như một phần của trang web, còn article được định nghĩa như một khối văn bản khép kín còn thẻ div được định nghĩa như một phần nhỏ trong article.

    Article lồng nhau

    <article>
    <h2>HTML</h2>
      <article>
      <h2>HTML4</h2>
      <p>HTML4 ra mắt năm 1997 và ngay sau đó nó đã dừng phát triển từ năm 1998.</p>
      </article>
      <article>
      <h2>HTML5</h2>
      <p>Năm 2009 nhóm W3C và WHATWG đã cho ra mắt phiên bản mới HTML với tên HTML5</p>
      </article>
    </article>
    Xem ví dụ

    Div trong Article

    <article>
    <h2>HTML</h2>
      <div class="demo">
      <h2>HTML4</h2>
      <p>HTML4 ra mắt năm 1997 và ngay sau đó nó đã dừng phát triển từ năm 1998.</p>
      </div>
      <div class="demo">
      <h2>HTML5</h2>
      <p>Năm 2009 nhóm W3C và WHATWG đã cho ra mắt phiên bản mới HTML với tên HTML5</p>
      </div>
    </article>
    Xem ví dụ

    Div trong Section trong Article

    <article>
      <section>
        <h2>HTML</h2>
        <div class="demo">
        <h2>HTML4</h2>
        <p>HTML4 ra mắt năm 1997 và ngay sau đó nó đã dừng phát triển từ năm 1998.</p>
        </div>
        <div class="demo">
        <h2>HTML5</h2>
        <p>Năm 2009 nhóm W3C và WHATWG đã cho ra mắt phiên bản mới HTML với tên HTML5</p>
        </div>
      </section>
    </article>
    Xem ví dụ
    Chúc các bạn học tốt!cheeky
    Từ khóa:

    Cách chuyển đổi HTML4 sang HTML5

    Cách chuyển đổi HTML4 sang HTML5

    Cách chuyển đổi HTML4 sang HTML5

    Cách chuyển đổi HTML4 sang HTML5
    Cách chuyển đổi HTML4 sang HTML5
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    353
    - Hôm qua:
    724
    - Tuần này:
    1.716
    - Tuần trước:
    4.744
    - Tháng này:
    20.800
    - Tháng trước:
    21.557
    - Năm này:
    69.528
    - Năm trước:
    17.373
    - Tổng cộng:
    86.901