Chủ đề nổi bật

Bài 01: Tạo Template HTML5 Đầu Tiên

Nếu bạn mới bắt đầu học HTML5 thì điều bạn quan tâm đầu tiên chính là cấu trúc một website xây dựng bằng html5 sẽ như thế nào? Chờ gì nữa ta bắt ...

Nếu bạn mới bắt đầu học HTML5 thì điều bạn quan tâm đầu tiên chính là cấu trúc một website xây dựng bằng html5 sẽ như thế nào? Chờ gì nữa ta bắt đầu phanh phui nó nhé.

Nếu bạn tham khảo một số website được viết bằng HTML5 thì các bạn sẽ thấy các thẻ như header, nav, section, footer, ... Tất cả những thẻ này nguyên bản HTML không tồn tại, chỉ có HTML5 mới có những thẻ này. Để dễ hình dung ta đi vào xem một ví dụ nhé:

Cấu Trúc Template HTML5

Các bạn xem ví dụ dưới đây:

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Chương Trình HTML Đầu Tiên</title>
    </head>
    <body>
        <header>
            <h1>HTML5 Cho Người Mới Bắt Đầu Tại Freetuts.net</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Serie</a></li>
                <li><a href="#">Tutorial</a></li>
                <li><a href="#">Ebook</a></li>
            </ul>
        </nav>
        <section>
            Nội dung trang web
        </section>
        <aside>
            <h3>Tuts HTML</h3>
            Học Lập Trình HTML5
        </aside>
        <footer>
            Copyright 2014 By Freetuts.net
        </footer>
    </body>
</html>
Đây là một cấu trúc chuẩn cho một template được xây dựng bằng HTML5, tôi nói chuẩn cho riêng bản thân tôi chứ không phải cho toàn bộ cộng đồng viết HTML5.

Bạn xem xét dòng đầu tiên <!doctype html>, đây là một khai báo bắt buộc nếu một template được xây dựng bằng HTML5. Tiêp theo là phần <html lang="vi">, các bạn cũng nên đặt lang vào thẻ html cho rõ ràng.

Phần head dưới đây thì khỏi bàn cãi rồi nhỉ? Không phải là chỉ HTML5 mới có :D

<head>
        <meta charset="utf-8" />
        <title>Chương Trình HTML Đầu Tiên</title>
    </head>
Vào phần body là quan trọng nhất, ở phần body tôi có sử dụng các thẻ sau:

Thẻ header dùng để chứa nguyên phần header website của bạn. Nếu lúc trước bạn dùng thẻ div thì với HTMl5 bạn sẽ dùng thẻ này để thay thế.

<header>
            <h1>HTML5 Cho Người Mới Bắt Đầu Tại Freetuts.net</h1>
        </header>
Thẻ Nav, thẻ này thường dùng để chứa những phần navigation như menu.
<nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Serie</a></li>
                <li><a href="#">Tutorial</a></li>
                <li><a href="#">Ebook</a></li>
            </ul>
        </nav>
Thẻ section là thẻ dùng để chứa nội dung chính của website. Nếu bạn không dùng HTMl5 thì bạn hay dùng thẻ div với id là content để bao quan nó đấy
<section>
            Nội dung trang web
        </section>
Thẻ aside, thẻ này thường dùng để chứa khung sidebar như left-sidebar, right-sidebar.
<aside>
            <h3>Tuts HTML</h3>
            Học Lập Trình HTML5
        </aside>
Và thẻ cuối cùng là thẻ footer, thay vì khai báo một cái div và định dạng thì ta dùng thẻ footer để bao quanh lại.
<footer>
            Copyright 2014 By Freetuts.net
        </footer>

Bạn thấy đó nếu ta dùng những thẻ theo chuẩn HTML5 này thì nhìn vào website ta khỏi cần comment phần nào là header, phần nào là footer phải không nào? Rất trực quan và dễ cập nhật.

Chạy lên và đây là kết quả template html5 của chúng ta:

Lời Kết

Đơn giản phải không nào? Qua bài này mình muốn giới thiệu cho các bạn một cấu trúc template chuẩn theo html5, trong bài này dùng mới được vài thẻ thông dụng nhưng cũng rất là trực quan. Ở những bài tiếp theo ta sẽ tìm hiểu thêm nhiều thẻ tags mới trong html nữa. Các bạn đón chờ nhé

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

HTML5 căn bản | HTML5 là gì?

Trong bài này chúng ta sẽ cùng tìm hiểu một số thẻ HTML được bổ sung vào trong phiên bản HTML5, các thẻ này sinh ra nhằm mục đích giúp ta chia khối cho trang web rõ ràng hơn. Nhưng trước tiên chúng ta cần tìm hiểu khái niệm HTML5 là gì đã nhé. HTML5 là gì? Trong 4 năm gần đây bạn ...

HTML căn bản

Trước khi bắt đầu học làm web thì ban phải học HTML và CSS vì hai ngôn ngữ này giúp bạn xây dựng giao diện của website, đẹp hay xấu là phụ thuộc vào cách sử dụng và trình bày bổ cục hợp lý. Nhằm giúp bạn cũng cố lại các thẻ html thì trong phần này mình sẽ giới thiệu các thành phần thường được dùng ...

HTML5 Canvas

Trong bài này chúng ta sẽ tìm hiểu một đối tượng rất hay trong HTML5 đó là thẻ canvas, thẻ này thường được dùng để vẽ đồ họa, làm web game. Canvas là một thẻ mới trong HTML5 và nhiệm vụ của nó là giống như màn hình Tivi vậy, nó sẽ hiển thị kết quả đồ họa của một chường trình Javascript. Như ...

Bài 04: HTML5 Canvas - Nối nhiều đường

Chúng ta đã được học cách vẽ một số đường thẳng trong Canvas rồi nhỉ, vậy thì trong bài này mình sẽ hướng dẫn bạn cách nối các đường đó với nhau ...

Bài 03: HTML5 Canvas - Vẽ đường cong

Ngoài vẽ đường thẳng ra thì Canvas còn có thể vẽ các đường cong như hình cung, đường cong bậc hai, đường cong Benzier. Đối với cách vẽ đường thẳng ...

Bài 02: Thêm Article Trong HTML5

Bài trước chúng ta đã được tìm hiểu cấu trúc một template chuẩn HTML5 nhưng chỉ mới học cách sử dụng đơn giản, nên trong bài này ta sẽ đi sâu vào ...

Bài 02: HTML5 Canvas - Vẽ đường thẳng

Trong bài này chúng ta sẽ tìm hiểu cách vẽ một đường thẳng trong Canvas. 1. Vẽ đường thẳng trong Canvas Một đường thẳng sẽ có những tính ...

Bài 01: Tạo Template HTML5 Đầu Tiên

Nếu bạn mới bắt đầu học HTML5 thì điều bạn quan tâm đầu tiên chính là cấu trúc một website xây dựng bằng html5 sẽ như thế nào? Chờ gì nữa ta bắt ...

Bài 01: HTML5 Canvas là gì?

Trong bài này chúng ta sẽ tìm hiểu một thẻ HTML5 dùng để xây dựng Graphic đồ họa đó là thẻ Canvas. Ví dụ bạn muốn vẽ một sơ đồ hình học thì ...