среда, 14 апреля 2010 г.

HTML5. Элемент section

Сейчас вот впервые знакомлюсь с HTML5. Читаю спецификацию. На данный момент последняя версия вот такая. Особенно конечно обращаю внимание на новые элементы, которых не было в html4.01. Сегодня хочу представить свой перевод спецификации об элементе section.

Элемент section [^]
Категории которым принадлежит элемент:
Контексты, в которых данный элемент может быть использован:
Когда ожидается flow content.
Модель содержимого элемента:
Атрибуты:

Элемент section представляет общий документ или же секцию документа.Секция, в данном контексте, это тематическая группа содержимого, обычно с заголовком.
Примерами секций могут быть главы, различые страницы с закладками в диалоговых окнах с закладками, или пронумерованные секции заголовка. Домашняя страница сайта может быть разделена на секции для официальной части, новостей, контактной информации.
Примечание: Авторам можно использовать элемент article вместо section, это имеет смысл для объеденения элементов.
Примечание: Элемент section не является главным контейнером для других элементов. Если нужно для целей стилизации или удобства работы скрипта, разработчики могут использовать вместо элемента section элемент div. Общий случай, когда элемент section является наиболее подходящим, если контент элемента должен быть включен в список структуры документа.
В следующем примере, мы видим статью(которая является частью большой web-страницы) о яблоках, содержащую 2 секции.
<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>
Обратите внимание, что использование элемента section означает, что разработчик может использовать элемент h1 везде, не переживая о том на каком уровне находится секция: на высшем, втором, третьем или другом.

Ниже представлена программа церемонии с двумя секциями, первая список выпускников, вторая с описанием церемонии.
<!DOCTYPE Html>
<Html>
  <Head>
    <Title>Graduation Ceremony Summer 2022</Title>
  </Head>
  <Body>
    <H1>Graduation</H1>
    <Section>
      <H1>Ceremony</H1>
      <P>Opening Procession</P>
      <P>Speech by Validactorian</P>
      <P>Speech by Class President</P>
      <P>Presentation of Diplomas</P>
      <P>Closing Speech by Headmaster</P>
   </Section>
   <Section>
     <H1>Graduates</H1>
       <Ul>
         <Li>Molly Carpenter</Li>
         <Li>Anastasia Luccio</Li>
         <LiEbenezar McCoy</Li>
         <Li>Karrin Murphy</Li>
         <Li>Thomas Raith</Li>
         <Li>Susan Rodriguez</Li>
       </Ul>
   </Section>
       </Body>
     </Html>

Комментариев нет:

Отправить комментарий

Выскажитесь