Các trang web ngày nay hầu như được thiết kế để chạy với HTML5, nắm vững HTML sẽ giúp bạn dễ dàng hơn trong việc phát triển, chỉnh sửa layout, chèn code một cách đơn giản, chính vì vậy, bài viết này mình sẽ giới thiệu tổng quát cấu trúc cơ bản của HTML5 mà bạn nên nắm rõ.

1/ HTML 5 là gì?

HTML5 là một ngôn ngữ siêu văn bản HyperText Markup Language, nó là thành phần rất quan trọng của Word Wide Web (www). Nhiệm vụ của nó là hiển thị dữ liệu lên trình duyệt để người dùng có thể nhìn thấy. Cũng giống như HTML4 (viết tắt là HTML) bởi vì đây là phiên bản mới nâng cấp từ phiên bản HTML4.
Như các bạn biết, trong HTML đã mặc định có khả nhiều thẻ, với HTML5 bổ sung thêm một số thẻ với mục đích giúp ta phân chia các vị trí trong một website. ví dụ thẻ header dùng để định khối cho vị trí header, thẻ footer định khối cho footer, thẻ aside dùng cho sidebar, thẻ section dùng cho nội dung chính của trang web.

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. Tiếp theo mình sẽ giới thiệu các thành phần cơ bản trong HTML5 nhé.

2/ Template HTML5 cơ bản

<!doctype html>
<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Đây là tiêu đề của trang web</title>
    </head>
    <body>
        <header>
            <h1>ĐÂY LÀ THẺ HEADER CỦA WEBSITE </h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Giới thiệu</a></li>
                <li><a href="#">Sản phẩm</a></li>
                <li><a href="#">Liên hệ</a></li>
            </ul>
        </nav>
        <section>
            Đây là phầnnội dung trang web
        </section>
        <aside>
            <h3>Sidebar HTML</h3>
            Sidebar quảng cáo đặt ở đây
        </aside>
        <footer>
            Ở đây là thẻ footer bên dưới website nhé
        </footer>
    </body>
</html>

3/ Phân tích, bóc tách các thẻ quan trọng thẻ trong HTML5

Sau đây chúng ta sẽ phân tích từng thẻ trong cấu trúc website nhé.

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”>, đây là thẻ ngôn ngữ, các bạn cũng nên đặt lang vào thẻ html cho rõ ràng.

Phần head là phần bắt buộc phải có

    <head>
        <meta charset="utf-8" />
        <title>Đây là tiêu đề của trang web</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:
Trong HTML5 thẻ header dùng để chứa nguyên phần header website để thay thế thẻ div trước đây
        <header>
            <h1>ĐÂY LÀ THẺ HEADER CỦA WEBSITE </h1>
        </header>
Thẻ Nav để chứa menu navigation
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Giới thiệu</a></li>
                <li><a href="#">Sản phẩm</a></li>
                <li><a href="#">Liên hệ</a></li>
            </ul>
        </nav>
Thẻ Section chứa phần nội dung website
        <section>
            Đây là phầnnội dung trang web
        </section>
Thẻ Aside chứa sidebar của website
        <aside>
            <h3>Sidebar HTML</h3>
            Sidebar quảng cáo đặt ở đây
        </aside>
Thẻ footer là thẻ chân trang website
        <footer>
            Ở đây là thẻ footer bên dưới website nhé
        </footer>
Khi bạn nắm rõ chức năng các thẻ này sẽ giúp bạn chỉnh sửa layout một cách dễ dàng hơn, có thể bạn cần chèn các thẻ vào từng vị trí một cách chính xác, giúp bạn thực thi được chức năng từng thẻ. Nếu muốn tìm hiểu thêm về CSS trong website thì bạn có thể đọc qua bài viết hướng dẫn chỉnh sửa CSS trong website wordpress