Cách sử dụng Phần tử <main> HTML

Tìm hiểu cách sử dụng HTML <main> phần tử.

HTML <main> phần tử được sử dụng làm vùng chứa để đại diện cho phần chính / chủ đạo của nội dung trang của bạn bên trong <body phần tử.

Ví dụ:

<body>
  <header><!-- Header content --></header>
  <main>
    <article>
      <h3>Google Chrome</h3>
      <p>Paragraph</p>
    </article>

    <article>
      <h3>Headline</h3>
      <p>Paragraph</p>
    </article>

    <article>
      <h3>Headline</h3>
      <p>Paragraph</p>
    </article>
  </main>
  <footer><!-- Footer content --></footer>
</body>

<main> phần tử chứa nội dung trọng tâm của chủ đề tài liệu của bạn.

Trong khi <header> và <footer> các phần tử cũng chứa nội dung (thường là liên kết và biểu trưng), chúng không thể được coi là phần chính của trang web của bạn, đó là lý do tại sao bạn đặt chúng bên ngoài <main> phần tử.

Không giống như <article> , cũng là một vùng chứa nội dung, <main> phần tử chỉ nên được sử dụng một lần trong cùng một tài liệu HTML.

Ví dụ

<main>
  <article>
    <h1>Title of your post</h1>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <img href="your-image.jpg" alt="description of image" />
    <p>Paragraph</p>
    <p>Paragraph</p>
  </article>
</main>

Trang web bạn đang đọc bên phải tuân theo một cấu trúc đánh dấu HTML tương tự. Bạn có thể tự mình thấy điều đó nếu bạn nhấp chuột phải vào trang web này và nhấp vào Kiểm tra.

<main> thẻ là một trong nhiều thẻ HTML được sử dụng để xác định các phần tử vùng chứa. Một số phần tử vùng chứa HTML được sử dụng phổ biến nhất là:

<section> , <article> , <header> , <footer> , <form> và <div> (là thẻ chung mà chúng tôi sử dụng nếu không có thẻ nào khác áp dụng).

Cách sử dụng Phần tử HTML

Cách sử dụng Phần tử
HTML