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

HTML5 การใช้งาน Layout Elements

ใน HTML5 มี Layout Elements หลายตัวที่ออกแบบมาเพื่อกำหนดโครงสร้างของหน้าเว็บให้มีความหมายชัดเจนและง่ายต่อการเข้าใจ โดยสามารถประยุกต์ใช้งานได้หลายแบบ ซึ่งประกอบด้วย

1. <header>

ใช้สำหรับส่วนหัวของหน้าเว็บหรือหัวข้อย่อยในส่วนต่าง ๆ ของเอกสาร เช่น โลโก้ เมนูนำทาง หรือชื่อเรื่องของเนื้อหา

ตัวอย่าง

HTML
<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

2. <nav>

ใช้สำหรับกำหนดเมนูนำทาง (Navigation) เช่น ลิงก์ที่เชื่อมโยงไปยังหน้าต่าง ๆ ของเว็บไซต์

ตัวอย่าง

HTML
<nav>
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
    </ul>
</nav>

3. <section>

ใช้กำหนดส่วนหลักของเนื้อหาที่มีความสัมพันธ์กัน มักใช้ในกรณีที่เนื้อหาถูกแบ่งออกเป็นกลุ่ม ๆ

ตัวอย่าง

HTML
<section>
    <h2>About Us</h2>
    <p>We are a company dedicated to providing excellent service.</p>
</section>

4. <article>

ใช้สำหรับเนื้อหาที่เป็นอิสระและสามารถนำไปใช้ในบริบทอื่นได้ เช่น บทความหรือบล็อกโพสต์

ตัวอย่าง

HTML
<article>
    <h2>Breaking News</h2>
    <p>This is an article about the latest events happening around the world.</p>
</article>

5. <aside>

ใช้สำหรับเนื้อหาที่เสริมความเข้าใจเพิ่มเติม แต่ไม่ใช่เนื้อหาหลัก เช่น ข้อมูลที่เกี่ยวข้องหรือโฆษณา

ตัวอย่าง

HTML
<aside>
    <h3>Related Articles</h3>
    <ul>
        <li><a href="#article1">How to improve your skills</a></li>
        <li><a href="#article2">Tips for staying productive</a></li>
    </ul>
</aside>

6. <footer>

ใช้สำหรับส่วนท้ายของหน้าเว็บหรือบทความ ซึ่งอาจประกอบด้วยลิขสิทธิ์ ลิงก์ทางกฎหมาย หรือข้อมูลผู้เขียน

ตัวอย่าง

HTML
<footer>
    <p>© 2024 My Website. All rights reserved.</p>
</footer>

7. <main>

ใช้สำหรับส่วนเนื้อหาหลักของหน้าเว็บที่สำคัญที่สุด ใช้กำหนดพื้นที่ที่เป็นหัวใจหลักของเนื้อหาในเอกสาร

ตัวอย่าง

HTML
<main>
    <h1>Welcome to Our Website</h1>
    <p>This is where the main content of the page goes.</p>
</main>

8. <figure> และ <figcaption>

ใช้เพื่อจัดการรูปภาพหรือตารางข้อมูลที่เกี่ยวข้องกับเนื้อหา และใช้ <figcaption> สำหรับใส่คำอธิบายรูปภาพหรือตารางนั้น ๆ

ตัวอย่าง

HTML
<figure>
    <img src="image.jpg" alt="Beautiful Landscape">
    <figcaption>A beautiful landscape during sunset.</figcaption>
</figure>

9. <div>

ถึงแม้ <div> จะไม่ใช่ layout element ใน HTML5 โดยตรง แต่ยังคงเป็นหนึ่งในวิธีที่ใช้กันมากในการจัดการโครงสร้างหน้าเว็บเป็นกลุ่มเนื้อหา มักใช้ร่วมกับ CSS เพื่อจัดรูปแบบหน้าเว็บ

ตัวอย่าง

HTML
<div class="container">
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <section>
        <p>This is the main content of the page.</p>
    </section>
</div>

การประยุกต์ใช้งาน Layout Elements

  • สามารถจัดทำ Layout ที่ชัดเจน เช่นการจัดส่วน Header, Main Content และ Footer ให้แต่ละส่วนมีความหมายเชิงโครงสร้าง
  • ช่วยให้ Search Engine สามารถเข้าใจโครงสร้างเว็บไซต์ได้ดีขึ้น
  • ช่วยเพิ่มความสะดวกในการเข้าถึงเนื้อหาสำหรับผู้ใช้ที่ใช้ Screen Reader หรือเครื่องมือช่วยเหลืออื่น ๆ

การเลือกใช้ Layout Elements แต่ละตัวขึ้นอยู่กับการออกแบบและโครงสร้างของเนื้อหาที่ต้องการนำเสนอ

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

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