GORAGOD.com

freelance, web developer, web designer, hosting, domain name

HTML5 section element

<section> เป็น element ใหม่ของ HTML5 อันหนึ่งซึ่งอาจถูกใช้อย่างผิดๆได้เสมอถ้าดูจากชื่อของมัน ความหมายของ <section> คือการแบ่งกลุ่มของเนื้อหาออกเป็นส่วนๆ เช่น กลุ่มของข่าวในพระราชสำนัก กลุ่มของข่าวกีฬา กลุ่มของข่าวบันเทิง เป็นต้น 
  • <section> ไม่ได้ใช้สำหรับแบ่งเว็บเพจออกเป็นส่วนๆ ไม่ได้ใช้สำหรับทำ Layout ถ้าอยากทำ Layout ให้ใช้ div แทน
  • <section> ใช้สำหรับแบ่งเนื้อหาออกเป็นส่วนๆ ซึ่งหมายความว่า โดยทั่วไปเรามักจะใช้ Section ภายใน Article
<article>
   <header>
      <hgroup>
        <h1>ข่าว</h1>
        <h2>ข่าวประจำวันที่ 27 ตค. 2555</h2>
      </hgroup>
   </header>
   <p>วันนี้มีความคืบหน้าทั่วไปเกี่ยวกับ................</p>
   <section>
      <header>
         <h2>ข่าวในพระราชสำนัก</h2>
      </header>
      <p>คำอธิบายเกี่ยวกับข่าวในหมวด ข่าวในพระราชสำนัก<//p>
      <article>
         <header>
           <h3>หัวข้อข่าว ที่ 1</h3>
         </header>
         <p>รายละเอียดของข่าวที่ 1.....</p>
      </article>
      <article>
         <header>
           <h3>หัวข้อข่าว ที่ 2</h3>
         </header>
         <p>รายละเอียดของข่าวที่ 2.....</p>
      </article>
      ...................
  </section>
  <!-- จบข่าวในพระราชสำนัก -->
  <section>
     <header>
        <h2>ข่าวบันเทิง</h2>
     </header>
     <p>คำอธิบายเกี่ยวกับข่าวในหมวด ข่าวบันเทิง<//p>
     <article>
        <header>
           <h3>หัวข้อข่าว ที่ 1</h3>
        </header>
        <p>รายละเอียดของข่าวที่ 1.....</p>
     </article>
     <article>
        <header>
           <h3>หัวข้อข่าว ที่ 2</h3>
        </header>
        <p>รายละเอียดของข่าวที่ 2.....</p>
     </article>
     ...................
  </section>
  <!-- จบข่าวบันเทิง -->
</article>
<html>
<body>
<h1>Graduation</h1>
<section>
    <h2>หัวข้อของ Section แรก</h2>
    <p>เนื้อหาของ Section แรก</p>
</section>
<section>
    <h2>หัวข้อของ Section ที่สอง</h2>
    <ul>
        <li>ลิสต์รายการใน Section ที่สอง</li>
        <li>ลิสต์รายการใน Section ที่สอง</li>
    </ul>
</section>
</body>
</html>

 
0SHAREFacebookLINE it!
^