×

Cách sử dụng thẻ <main> để tạo nội dung chính trong HTML

Avatar of admin
admin 0 Views

Trong ngôn ngữ HTML, việc định nghĩa rõ ràng cấu trúc của một trang web không chỉ tạo nên một trang web dễ hiểu mà còn giúp các công cụ tìm kiếm dễ dàng định vị và đánh giá nội dung của trang. Một trong những yếu tố quan trọng để làm điều này là sử dụng các thẻ HTML có tính năng ngữ nghĩa, điển hình là thẻ <main>. Thẻ này được thiết kế để chứa nội dung chính của trang web, từ đó cải thiện khả năng tiếp cận và tối ưu hóa công cụ tìm kiếm (SEO).

Lợi ích của việc sử dụng thẻ <main>

1. Tăng cường khả năng tiếp cận (Accessibility)

Thẻ <main> giúp các trình đọc màn hình và các công cụ hỗ trợ khác dễ dàng nhận diện nội dung chính của trang. Điều này đặc biệt hữu ích cho người dùng có nhu cầu tiếp cận đặc biệt, ví dụ như người khiếm thị.

2. Cải thiện SEO

Nội dung trong thẻ <main> thường chứa thông tin quan trọng nhất của trang, do đó, các công cụ tìm kiếm như Google sẽ ưu tiên việc thu thập dữ liệu từ phần này. Việc này giúp tăng khả năng xếp hạng của trang web trên các công cụ tìm kiếm.

3. Tạo ra cấu trúc trang dễ dàng hơn

Sử dụng thẻ <main> giúp bạn cấu trúc trang web một cách rõ ràng và dễ hiểu hơn. Các phần khác nhau của trang như tiêu đề, thanh điều hướng và chân trang có thể được tách biệt ra một cách dễ dàng và logic.

Cách sử dụng thẻ <main> trong HTML

Tổng quan

Thẻ <main> nên chỉ có một và duy nhất một lần trong mỗi trang HTML, và nó nên là con trực tiếp của thẻ <body>. Nội dung trong thẻ <main> không nên bao gồm các thẻ như <header>, <footer>, <aside>, hoặc bất kỳ nội dung điều hướng nào.

Ví dụ cơ bản

Dưới đây là một ví dụ cơ bản về cách sử dụng thẻ <main> trong một tài liệu HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ sử dụng thẻ main</title>
</head>
<body>
    <header>
        <h1>Đây là tiêu đề của trang</h1>
        <nav>
            <ul>
                <li><a href="#home">Trang chủ</a></li>
                <li><a href="#about">Giới thiệu</a></li>
                <li><a href="#contact">Liên hệ</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Bài viết chính</h2>
            <p>Đây là nội dung chính của trang web. Bài viết sẽ cung cấp thông tin chi tiết về chủ đề của trang.</p>
        </article>
    </main>

    <aside>
        <h3>Thông tin thêm</h3>
        <p>Đây là một số thông tin bổ sung mà người đọc có thể quan tâm.</p>
    </aside>

    <footer>
        <p>&copy; 2023 Trang của tôi.</p>
    </footer>
</body>
</html>

Những lưu ý khi sử dụng thẻ <main>

  • Không sử dụng quá nhiều lần: Một trang HTML chỉ nên có một thẻ <main>.
  • Vị trí chính xác: Thẻ <main> nên nằm bên trong thẻ <body> nhưng không nằm trong thẻ <header>, <footer>, <aside> hoặc bất kỳ thẻ điều hướng nào.
  • Chứa nội dung cốt lõi: Nội dung trong thẻ <main> nên là phần trọng tâm của trang web.

Kết luận

Việc sử dụng thẻ <main> không chỉ giúp cấu trúc trang web của bạn rõ ràng hơn mà còn mang lại nhiều lợi ích về SEO và khả năng tiếp cận. Khi được sử dụng đúng cách, thẻ này sẽ không chỉ tạo ra trải nghiệm người dùng tốt hơn mà còn giúp trang web của bạn dễ dàng thu hút sự chú ý của các công cụ tìm kiếm và người dùng có nhu cầu đặc biệt.

Comments

Bài viết liên quan