พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน main Tag

น HTML5 แท็ก <main> ถูกนำมาใช้เพื่อระบุเนื้อหาหลักของหน้าเว็บเพจ โดยเนื้อหานั้นต้องเป็นข้อมูลที่มีความสำคัญที่สุดในเอกสาร และมีความเป็นเอกลักษณ์ในแต่ละหน้า แท็ก <main> ช่วยให้เครื่องมือค้นหา (เช่น Google) และเทคโนโลยีที่สนับสนุนการเข้าถึง (เช่น screen readers) เข้าใจว่าเนื้อหาส่วนนี้คือจุดสนใจหลักของเพจ ซึ่งเป็นส่วนที่ไม่มีการซ้ำกับส่วนอื่นๆ เช่น header, footer, navigation เป็นต้น

รูปแบบการใช้งานแท็ก <main>

ใช้งานเพื่อห่อหุ้มเนื้อหาหลักของหน้าเว็บ แท็ก <main> สามารถใช้เพื่อกำหนดส่วนที่เป็นเนื้อหาหลักของหน้า โดยไม่มีส่วนของ header, footer, หรือ navigation

HTML
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <main>
        <article>
            <h2>Main Content Heading</h2>
            <p>This is the main content of the webpage.</p>
        </article>
    </main>

    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>

ห่อหุ้มหลายๆ ส่วนที่เป็นเนื้อหาหลัก ในกรณีที่หน้าเว็บมีหลายส่วนที่เป็นเนื้อหาหลัก เช่น บทความหรือโพสต์หลายอันในหน้าเดียว แท็ก <main> ก็สามารถใช้ห่อหุ้มทุกส่วนเหล่านั้นได้

HTML
<body>
    <header>
        <h1>My Blog</h1>
    </header>

    <main>
        <article>
            <h2>Blog Post 1</h2>
            <p>This is the first blog post.</p>
        </article>

        <article>
            <h2>Blog Post 2</h2>
            <p>This is the second blog post.</p>
        </article>
    </main>

    <footer>
        <p>© 2024 My Blog</p>
    </footer>
</body>

ไม่ควรมี <main> มากกว่าหนึ่งในหน้าเว็บเดียว แท็ก <main> มีไว้สำหรับระบุเนื้อหาหลักของหน้าเท่านั้น จึงไม่ควรมีหลายแท็ก <main> ในหน้าเดียวกัน และแท็กนี้ไม่ควรถูกใช้ภายใน <header>, <footer>, <article>, หรือ <aside>

ตัวอย่างการประยุกต์ใช้งานในเว็บอีคอมเมิร์ซ เว็บไซต์ประเภทอีคอมเมิร์ซอาจมีหลายส่วน เช่น แบนเนอร์, รายการสินค้าที่แนะนำ, หรือรายละเอียดผลิตภัณฑ์ ในกรณีนี้ <main> จะครอบคลุมส่วนที่เป็นข้อมูลหลักของหน้า

HTML
<body>
    <header>
        <h1>Online Store</h1>
    </header>

    <main>
        <section class="product-details">
            <h2>Product Name</h2>
            <p>Price: $100</p>
            <p>Description: This is a detailed description of the product.</p>
        </section>

        <section class="related-products">
            <h3>Related Products</h3>
            <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
            </ul>
        </section>
    </main>

    <footer>
        <p>© 2024 Online Store</p>
    </footer>
</body>

สรุป

แท็ก <main> ใน HTML5 ใช้เพื่อกำหนดเนื้อหาหลักของหน้า ซึ่งช่วยให้ผู้ใช้และเครื่องมือค้นหาสามารถระบุเนื้อหาสำคัญได้ง่าย การใช้ <main> ยังช่วยในการปรับปรุงการเข้าถึงของเว็บไซต์ (accessibility)

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ