×

Cách sử dụng thẻ <article> để tạo bài viết độc lập trong HTML

Avatar of admin
admin 1 Views

Trong phát triển web, việc tổ chức nội dung trang web một cách khoa học và dễ đọc là vô cùng quan trọng. Để giúp định dạng và cấu trúc nội dung một cách hiệu quả, HTML5 giới thiệu nhiều thẻ mới, trong đó thẻ <article> là một công cụ hữu ích. Bài viết này sẽ đi sâu vào cách sử dụng thẻ <article> để tạo bài viết độc lập nhằm cải thiện SEO và trải nghiệm người dùng.

1. Khái Niệm Về Thẻ <article>

Thẻ <article> trong HTML được sử dụng để định nghĩa một khối nội dung độc lập, có thể là một bài viết, bài blog, bình luận, hoặc bất kỳ thông tin nào có thể tồn tại riêng biệt khỏi nội dung khác trên trang web. Nó giúp xác định ranh giới của mỗi phần nội dung, khiến mã HTML trở nên dễ quản lý và dễ hiểu hơn.

2. Lợi Ích của Việc Sử Dụng Thẻ <article>

  • Cải Thiện SEO: Bằng cách sử dụng thẻ <article>, bạn có thể giúp công cụ tìm kiếm xác định và lập chỉ mục nội dung chính xác hơn.
  • Khả Năng Truy Cập: Người dùng với công cụ hỗ trợ truy cập, như trình đọc màn hình, sẽ dễ dàng nhận diện và tiếp cận từng phần nội dung độc lập.
  • Tối Ưu Hóa Trải Nghiệm Người Dùng: Tổ chức nội dung một cách rõ ràng giúp người đọc dễ dàng theo dõi và hấp thụ thông tin.

3. Cách Sử Dụng Thẻ <article>

Tạo Một Bài Viết Cơ Bản

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trải nghiệm sử dụng thẻ article</title>
</head>
<body>
    <article>
        <header>
            <h1>Tiêu Đề Bài Viết</h1>
            <p>Ngày đăng: 01/01/2023</p>
        </header>
        <section>
            <p>Đây là nội dung của bài viết. Bạn có thể đặt văn bản, hình ảnh hoặc bất kỳ thành phần HTML nào bên trong phần này.</p>
        </section>
        <footer>
            <p>Tác giả: Nguyễn Văn A</p>
        </footer>
    </article>
</body>
</html>

Thêm Nhiều Bài Viết Trên Một Trang

Trong trường hợp bạn có nhiều bài viết trên cùng một trang, bạn có thể sử dụng nhiều thẻ <article> để tách biệt các nội dung khác nhau.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang Tin Tức</title>
</head>
<body>
    <article>
        <header>
            <h2>Bài Viết 1</h2>
            <p>Ngày đăng: 01/01/2023</p>
        </header>
        <section>
            <p>Nội dung bài viết 1.</p>
        </section>
        <footer>
            <p>Tác giả: Nguyễn Văn A</p>
        </footer>
    </article>
    <article>
        <header>
            <h2>Bài Viết 2</h2>
            <p>Ngày đăng: 02/01/2023</p>
        </header>
        <section>
            <p>Nội dung bài viết 2.</p>
        </section>
        <footer>
            <p>Tác giả: Trần Thị B</p>
        </footer>
    </article>
</body>
</html>

4. Tích Hợp Các Thẻ HTML Khác với Thẻ <article>

Bạn có thể dễ dàng tích hợp các thẻ HTML khác như hình ảnh <img>, danh sách <ul>, và liên kết <a> vào bên trong thẻ <article> để làm phong phú thêm nội dung.

<article>
    <header>
        <h1>Hướng dẫn cơ bản về HTML</h1>
        <p>Ngày đăng: 01/01/2023</p>
    </header>
    <section>
        <h2>Giới thiệu</h2>
        <p>HTML là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo ra các trang web.</p>
        <img src="html-guide.jpg" alt="Hướng dẫn về HTML">
        <h2>Các thẻ quan trọng</h2>
        <ul>
            <li><code>&lt;p&gt;</code>: Định nghĩa một đoạn văn</li>
            <li><code>&lt;a&gt;</code>: Tạo liên kết</li>
            <li><code>&lt;img&gt;</code>: Chèn hình ảnh</li>
        </ul>
    </section>
    <footer>
        <p>Tác giả: Nguyễn Văn A</p>
    </footer>
</article>

Kết Luận

Sử dụng thẻ <article> đúng cách giúp bạn tổ chức và quản lý nội dung trang web một cách hiệu quả, từ đó tối ưu hóa SEO và nâng cao trải nghiệm người dùng. Bằng cách nắm bắt cơ bản về việc sử dụng thẻ này, bạn sẽ có lợi thế trong việc xây dựng và phát triển các trang web chuyên nghiệp và thân thiện với người dùng.

Comments

Bài viết liên quan