Znacznik section w HTML-5

Stronę tą wyświetlono już: 208 razy

Znacznik ten jest zazwyczaj wykorzystywany wraz z znacznikami nagłówków (<h1>, <h2> ...) w następujący sposób:

Listing 1
  1. <article>
  2. <section><h1>Lorem ipsum dolor ...</h1>
  3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet justo lectus, nec rhoncus nisi consequat sed. Curabitur venenatis id tortor sed suscipit. Integer eu malesuada purus. Curabitur vel elit ac nisi lobortis congue. Quisque id dolor scelerisque, cursus mi eget, efficitur est. Duis facilisis ligula sit amet sapien lacinia mollis. In consequat sollicitudin libero id pharetra. Quisque viverra fringilla ex vitae lacinia. Mauris leo nunc, ultrices id tortor non, tincidunt faucibus diam. Pellentesque lacinia tincidunt molestie. Vestibulum eu feugiat ligula.</p>
  4. <section><h2>Lorem ipsum dolor ...</h2>
  5. <p>Nunc hendrerit quam eros, tempus blandit nunc porta sed. Sed non laoreet lacus. Cras blandit, purus id egestas tincidunt, metus dolor pretium orci, eu ultricies eros nunc ut tortor. Sed aliquet vitae magna at tincidunt. Quisque congue elit faucibus magna molestie finibus. Aenean ac urna massa. Morbi ac aliquet quam. Vivamus imperdiet efficitur posuere. Suspendisse nisl nibh, venenatis vitae nibh ac, sodales sodales metus. Vestibulum tristique lobortis varius. Quisque bibendum neque lobortis, luctus ipsum sit amet, pulvinar nisl. Vestibulum lacinia, diam ac fermentum imperdiet, enim odio blandit urna, quis facilisis eros tortor in diam. Quisque sagittis nisi nunc, nec mollis metus suscipit id. Donec quis nibh a lacus sagittis mattis maximus a purus.</p>
  6. <section><h3>Lorem ipsum dolor ...</h3>
  7. <p>Quisque eleifend orci sit amet ultrices luctus. Vestibulum ac placerat ex. Vestibulum posuere, erat pellentesque luctus lobortis, elit enim volutpat ex, a rhoncus mi ante eget sem. Nunc sed bibendum nisl, non pretium lorem. Nulla id lacus sed sapien pharetra cursus. Ut a semper mi, in pretium massa. Nullam pharetra diam tellus, a pharetra nunc aliquam cursus. Donec non lectus sit amet massa commodo facilisis. </p></section></section></section>
  8. </article>

Wynik działania powyższego kodu:

Lorem ipsum dolor ...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet justo lectus, nec rhoncus nisi consequat sed. Curabitur venenatis id tortor sed suscipit. Integer eu malesuada purus. Curabitur vel elit ac nisi lobortis congue. Quisque id dolor scelerisque, cursus mi eget, efficitur est. Duis facilisis ligula sit amet sapien lacinia mollis. In consequat sollicitudin libero id pharetra. Quisque viverra fringilla ex vitae lacinia. Mauris leo nunc, ultrices id tortor non, tincidunt faucibus diam. Pellentesque lacinia tincidunt molestie. Vestibulum eu feugiat ligula.

Lorem ipsum dolor ...

Nunc hendrerit quam eros, tempus blandit nunc porta sed. Sed non laoreet lacus. Cras blandit, purus id egestas tincidunt, metus dolor pretium orci, eu ultricies eros nunc ut tortor. Sed aliquet vitae magna at tincidunt. Quisque congue elit faucibus magna molestie finibus. Aenean ac urna massa. Morbi ac aliquet quam. Vivamus imperdiet efficitur posuere. Suspendisse nisl nibh, venenatis vitae nibh ac, sodales sodales metus. Vestibulum tristique lobortis varius. Quisque bibendum neque lobortis, luctus ipsum sit amet, pulvinar nisl. Vestibulum lacinia, diam ac fermentum imperdiet, enim odio blandit urna, quis facilisis eros tortor in diam. Quisque sagittis nisi nunc, nec mollis metus suscipit id. Donec quis nibh a lacus sagittis mattis maximus a purus.

Lorem ipsum dolor ...

Quisque eleifend orci sit amet ultrices luctus. Vestibulum ac placerat ex. Vestibulum posuere, erat pellentesque luctus lobortis, elit enim volutpat ex, a rhoncus mi ante eget sem. Nunc sed bibendum nisl, non pretium lorem. Nulla id lacus sed sapien pharetra cursus. Ut a semper mi, in pretium massa. Nullam pharetra diam tellus, a pharetra nunc aliquam cursus. Donec non lectus sit amet massa commodo facilisis.

Znacznik <section> określa w jednoznaczny sposób granice tematyczne treści dotyczącej danego nagłówka dokumentu.

Komentarze