วิธีใช้งาน Element <main> ใน HTML

เรียนรู้วิธีใช้งาน Element <main> ใน HTML

Element <main> ใน HTML ใช้เป็น Container แทนส่วนหลัก/สำคัญของเนื้อหาหน้าเว็บ ภายใน Element <body>

ตัวอย่าง:

<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>

Element <main> บรรจุเนื้อหาที่เป็นหัวใจสำคัญของหัวข้อเอกสาร

ในขณะที่ Element <header> และ <footer> ก็มีเนื้อหา (มักเป็นลิงก์และโลโก้) แต่ไม่ถือเป็นส่วนหลักของเว็บไซต์ จึงวางอยู่นอก <main>

ไม่เหมือน <article> ที่เป็น Container เนื้อหา <main> ควรใช้เพียงครั้งเดียวในเอกสาร HTML เดียวกัน

ตัวอย่าง:

<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>

เว็บไซต์นี้ใช้โครงสร้าง HTML คล้ายกัน ตรวจสอบได้ด้วยการคลิกขวาเลือก Inspect

<main> เป็นหนึ่งในแท็ก Container Element แท็ก Container ที่ใช้บ่อย:

<section>, <article> , <header>, <footer>,<form>, และ <div> (แท็กทั่วไปใช้เมื่อไม่มีแท็กอื่นเหมาะสม)