HTML5 лучшие практики;элементы section / header / aside / article - PullRequest
Новая
       48

HTML5 лучшие практики;элементы section / header / aside / article

522 голосов
/ 24 января 2011

В Интернете достаточно информации о HTML5 (а также о стековом потоке), но теперь мне интересно узнать о «лучших практиках».Такие теги, как section / headers / article, являются новыми, и у всех разные мнения о том, когда и где вы должны использовать эти теги.Так что вы, ребята, думаете о следующем макете и коде?

Website layout

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

строка 7. section по всему сайту?Или только div?

строка 8. Каждый section начинается с header?

строка 23. Правильно ли это div?или это должна быть строка section?

24. Разбить левый / правый столбец с помощью строки div.

25. Правильное место для тега article?

строка 26. Обязательно ли указывать ваш h1 -tag в header -tag?

в строке 43. Содержимое не связано с основной статьей, поэтому я решил, что этоsection, а не aside.

строка 44. H2 без header

строка 53. section без header

строка 63. Divсо всеми (не связанными) новостями

строка 64. header с h2

строка 65. Хм, div или section?Или удалите этот div и используйте только строку article -tag

105. Нижний колонтитул: -)

Ответы [ 16 ]

470 голосов
/ 30 июня 2011

На самом деле, вы совершенно правы, когда дело доходит до верхнего / нижнего колонтитула. Вот некоторая базовая информация о том, как можно / нужно использовать каждый из основных тегов HTML5 (я предлагаю прочитать полный источник, связанный внизу):

section - используется для группировки тематического контента. Звучит как элемент div, но это не так. У div нет смыслового значения. Прежде чем заменять все свои элементы div на элементы section, всегда спрашивайте себя: «Связано ли все содержимое?»

в сторону - Используется для тангенциально связанного содержимого. Тот факт, что какой-то контент отображается слева или справа от основного контента, не является достаточной причиной для использования элемента aside. Спросите себя, можно ли удалить содержимое в стороне, не уменьшая смысла основного содержимого. Цитаты являются примером тангенциально связанного содержания.

header - Существует существенная разница между элементом header и общепринятым использованием заголовка (или заголовка). На странице обычно есть только один заголовок или заголовок. В HTML5 вы можете иметь столько, сколько хотите. Спецификация определяет его как «группу вводных или навигационных средств». Вы можете использовать заголовок в любом разделе вашего сайта. На самом деле, вы, вероятно, должны использовать заголовок в большинстве ваших разделов. Спецификация описывает элемент section как «тематическую группу контента, обычно с заголовком».

nav - предназначен для основной навигационной информации. Группа ссылок, сгруппированных вместе, не является достаточной причиной для использования элемента nav. Навигация по сайту, с другой стороны, относится к элементу nav.

нижний колонтитул - Похоже, это описание позиции, но это не так. Элементы нижнего колонтитула содержат информацию о содержащем его элементе: кто его написал, авторское право, ссылки на связанный контент и т. Д. В то время как у нас обычно есть один нижний колонтитул для всего документа, HTML5 позволяет нам также иметь нижний колонтитул внутри разделов.

Источник : http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Кроме того, вот описание на article, не найденное в указанном выше источнике:

article - Используется для элемента, который определяет независимое, автономное содержимое. Статья должна иметь смысл сама по себе. Прежде чем заменять все свои элементы div элементами статьи, всегда спрашивайте себя: «Можно ли прочитать его независимо от остальной части веб-сайта?»

208 голосов
/ 27 октября 2014

К сожалению, ответы, данные до сих пор (включая наиболее проголосовавших), являются либо "просто" здравым смыслом, либо ошибочными, либо в лучшем случае запутанными. Нет важных ключевых слов 1 всплывающее окно!

Я написал 3 ответа:

  1. Это объяснение (начало здесь).
  2. Конкретные ответы на вопросы ОП.
  3. Улучшен подробный HTML.

Чтобы понять роль html-элементов, обсуждаемых здесь, вы должны знать, что некоторые из них разбивают документ на части. Каждый HTML-документ может быть разделен в соответствии с HTML5-алгоритмом контура с целью создания схемы - & # x2060; или & # x2060; - таблицы содержания (TOC). Схема обычно не видна (в наши дни), но авторам следует использовать html таким образом, чтобы результирующий план отражал их намерения.

Вы можете создавать разделы с точно этими элементами и ничем иным :

  • создание (явных) подразделов
    • <section> секции
    • <article> секции
    • <nav> секции
    • <aside> разделы
  • создание родственных разделов или подразделов
    • секции неопределенного типа с <h*> 2 (не все это делают, см. Ниже)
  • для выравнивания уровня закрыть текущий явный (под) раздел

Разделы могут быть названы:

  • <h*> созданные разделы называют себя
  • <section|article|nav|aside> разделы будут названы первыми <h*>, если есть один
    • эти <h*> - единственные, которые сами не создают разделы

В разделах есть еще одна вещь: следующие контексты (то есть элементы) создают «границы границ». Независимо от того, какие разделы они содержат, они являются личными

  • сам документ с <body>
  • ячейки таблицы с <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset> и <figure>
  • ничего еще

title

example HTML
<body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline
1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)









Это поднимает два вопроса:

В чем разница между <article> и <section>?

  • оба могут:
    • быть вложенными друг в друга
    • принять другое понятие в другом контексте или на уровне вложенности
  • <section> s как главы книг
    • у них обычно есть братья и сестры (может быть, в другом документе?)
    • вместе они имеют что-то общее, как главы в книге
  • один автор, один <article>, по крайней мере, на самом низком уровне
    • стандартный пример: отдельный комментарий в блоге
    • сама запись в блоге также является хорошим примером
    • запись в блоге <article> и ее комментарий <article> s также могут быть заключены в <article>
    • это какая-то "законченная" вещь, а не часть серии подобных
  • <section> s в <article> подобны главам в книге
  • <article> s в <section> подобны стихам в объеме (в серии)

Как вписываются <header>, <footer> и <main>?

  • они имеют нулевое влияние на секционирование
  • <header> и <footer>
    • они позволяют отмечать зоны каждая секция
    • даже в разделе вы можете иметь их несколько раз
    • чтобы отличить от основной части в этом разделе
    • ограничено только вкусом автора
    • <header>
      • может пометить название / название этого раздела
      • может содержать логотип для этого раздела
      • нет необходимости находиться в верхней или верхней части секции
    • <footer>
      • может пометить кредиты / Автор этого раздела
      • может соя в верхней части раздела
      • может быть даже выше <header>
  • <main>
    • допускается только один раз
    • отмечает основную часть раздела верхнего уровня (то есть документ <body>, то есть)
    • В самих подразделах отсутствует разметка основной части
    • <main> может даже «скрываться» в некоторых подразделах документа, в то время как <header> и <footer> документа не могут (эта разметка будет отмечать верхний / нижний колонтитулы этого подраздела)
      • но это не разрешено в <article> секциях 3
    • помогает отличить «реальную вещь» от не заголовка документа, не нижнего колонтитула, не основного контента, если это имеет смысл в вашем случае ...

1 на ум приходит: схема, алгоритм, неявное разбиение
2 Я использую <h*> как сокращение для <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
3 также не допускается <main> в <aside> или <nav>, но это неудивительно. - В действительности: <main> может скрываться только в (вложенных) нисходящих <section> разделах или появляться на верхнем уровне, а именно <body>

112 голосов
/ 30 июля 2013

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

Разметка для этого документа может выглядеть следующим образом: 

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

Более подробную информацию вы можете найти в этой статье на странице List Apart

62 голосов
/ 15 июля 2014

Я бы рекомендовал прочитать вики-страницу W3 о структурировании HTML5 :

<header> Используется для содержания заголовка сайта.<footer> Содержит содержимое нижнего колонтитула сайта.<nav> Содержит меню навигации или другие функции навигации по странице.

<article> Содержит автономный фрагмент содержимого, который будет иметь смысл
, если синдицирован в виде элемента RSS, например элемента новостей..

<section> Используется либо для группировки различных статей по разным
целям или предметам, либо для определения различных разделов одной статьи.

<aside> Определяет блок контента, который связан с основным контентом вокруг него, но не является центральным для его потока.

Они включают изображение , которые я убрал здесь:

html5

В коде это выглядит так: 

<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>

Давайте рассмотрим некоторые изHTML5 элементы более подробно.

<section>

Элемент <section> предназначен для хранения различных областей функциональности или тематики или для разбиения статьи или истории на разные разделы.Так что в этом случае: «sidebar1» содержит различные полезные ссылки, которые будут сохраняться на каждой странице сайта, такие как «подписка на RSS» и «Купить музыку в магазине».«main» содержит основной контент этой страницы, то есть сообщения в блоге.На других страницах сайта этот контент будет меняться.Это довольно общий элемент, но все же имеет гораздо более семантическое значение, чем простой старый <div>.

<article>

<article> связан с <section>, но заметно отличается.Принимая во внимание, что <section> предназначен для группировки отдельных разделов контента или функциональных возможностей, <article> предназначен для содержания связанных отдельных отдельных фрагментов контента, таких как отдельные сообщения в блоге, видео, изображения или новостные элементы.Подумайте об этом так: если у вас есть несколько элементов контента, каждый из которых подходит для самостоятельного чтения и имеет смысл синдицировать их как отдельные элементы в RSS-канале, тогда <article> подходит для маркировки.их вверх.В нашем примере <section id="main"> содержит записи в блоге.Каждая запись в блоге будет подходящей для синдикации в качестве элемента в RSS-канале, и будет иметь смысл, если ее читать самостоятельно, вне контекста, поэтому <article> идеально подходит для них: 

<section id="main">
    <article><!-- first blog post --></article>        
    <article><!-- second blog post --></article>        
    <article><!-- third blog post --></article>
</section>

Просто да?Имейте в виду, что вы также можете вкладывать разделы в статьи, где это имеет смысл.Например, если каждое из этих сообщений в блоге имеет непротиворечивую структуру отдельных разделов, то вы также можете поместить разделы в свои статьи.Это может выглядеть примерно так: 

<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>

<header> и <footer>

, как мы уже упоминали выше, цель <header> и *Элемент 1070 * предназначен для переноса содержимого верхнего и нижнего колонтитула соответственно.В нашем конкретном примере элемент <header> содержит изображение логотипа, а элемент <footer> содержит уведомление об авторских правах, но вы можете добавить более сложный контент, если хотите.Также обратите внимание, что вы можете иметь более одного верхнего и нижнего колонтитула на каждой странице - а также верхний и нижний колонтитулы верхнего уровня, которые мы только что обсуждали, вы также можете иметь элементы <header> и <footer>, вложенные в каждую <article>,в этом случае они просто применимы к этой конкретной статье.В добавление к нашему примеру: 

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

Элемент <nav> предназначен для разметки навигационных ссылок или других конструкций (например, формы поиска), который приведет вас на разные страницы текущего сайта или в другие области текущей страницы.Другие ссылки, такие как рекламные ссылки, не учитываются.Конечно, вы можете включать заголовки и другие структурирующие элементы в <nav>, но это не обязательно.

<aside>

вы, возможно, заметили, что мы использовали<aside> элемент для разметки2-я боковая панель: та, которая содержит последние концерты и контактные данные.Это совершенно уместно, поскольку <aside> предназначен для разметки фрагментов информации, которые связаны с основным потоком, но не вписываются в него напрямую.И основной контент в этом случае все о группе!Другим хорошим выбором для <aside> будет информация об авторе поста (-ов) блога, биографии группы или дискографии группы со ссылками на покупку их альбомов.<div>?

Итак, со всеми этими замечательными новыми элементами, которые можно использовать на наших страницах, дни смиренного <div> сочтены, не так ли?NO.На самом деле, <div> все еще имеет вполне допустимое применение.Вы должны использовать его, когда нет другого более подходящего элемента, доступного для группировки области контента, что часто бывает, когда вы просто используете элемент для группировки контента вместе для стилизации / визуальных целей.Типичным примером является использование <div> для переноса всего содержимого на странице, а затем использование CSS для центрирования всего содержимого в окне браузера или применение определенного фонового изображения ко всему содержимому.

22 голосов
/ 02 ноября 2014

[ объяснения в моем «основном ответе» ]

строка 7. раздел вокруг всего сайта? Или только div ?

Ни. Для стиля: используйте <body>, он уже там. Для секционирования / семантики: , как подробно описано в моем примере HTML , его эффект противоречит полезности. Дополнительные обертки к уже упакованному контенту - это не улучшение, а шум.


строка 8. Каждый раздел начинается с заголовка?

Нет, автор выбирает, куда помещать контент, обычно обозначаемый как «заголовок». И если этот заголовочный контент легко узнаваем без дополнительной маркировки, он может остаться без <header>. Это также выбор автора.


строка 23. Правильно ли это div ? или это должен быть раздел ?

<div>, вероятно, неправильно. Это зависит от намерений: только для стиля это может быть правильно. Если это для семантических целей, это неправильно: это должно быть <article> вместо , как показано в моем другом ответе . <article> также правильно, если это касается как стиля, так и секционирования.

<section> здесь выглядит неправильно, так как до или после этого нет подобных разделов, как в главах книги. (Это цель <section>).


строка 24. Разбить левый / правый столбец с помощью div .

Нет. Почему?


строка 25. Правильное место для тега article ?

Да, имеет смысл.


строка 26. Обязательно ли указывать ваш h1 -tag в заголовке -tag?

Нет. Одинокий элемент <h*>, вероятно, никогда не должен входить в <header> (но может, если хотите), поскольку уже ясно, что это заголовок того, что должно произойти. - Было бы разумно, если бы <header> также включало в себя слоган (отмеченный <p>), например.


строка 43. Содержание не относится к основной статье, поэтому я решил, что это раздел , а не в стороне .

Неправильно понимать, что <aside> должен быть «тангенциально связан » с окружающим контентом. Суть в том, что используйте <aside>, если содержимое только « по касательной связано» или не имеет вообще!

Тем не менее, несмотря на то, что <aside> является достойным выбором, <article> может все же быть лучше, чем <section>, поскольку «горячие предметы» и «новые предметы» не следует читать как две главы в книге. Вы можете идеально выбрать одну из них, а не другую, как альтернативную сортировку чего-либо, а не как две части целого.


строка 44. H2 без заголовок

Отлично.


строка 53. секция без заголовок

Ну, * <header> нет, но заголовок <h2> довольно ясно показывает, какая часть этого раздела является заголовком.


строка 63. Div со всеми (не связанными) новостями

<article> или <aside> может быть лучше.


строка 64. заголовок с h2

уже обсуждалось.


строка 65. Хм, div или section ? Или удалите этот div и используйте только article -tag

Точно! Снимите <div>.


строка 105. Нижний колонтитул : -)

Очень разумно.

19 голосов
/ 30 октября 2014

Согласно объяснению в моем «основном» ответе рассматриваемый документ должен быть размечен согласно схеме.

В следующих двух таблицах, которые я показываю:

  • исходный HTML-код и его схема
  • возможный предполагаемый контур и соответствующий HTML-код

original html (сокращено)
<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>

оригинальный html, относящийся к схеме
<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>












































результирующий контур
1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3)


Контур оригинала
окончательно не тот, который былпредназначен.




































* +1133 *

* ** 1137 1 136 *
* ** 1140 тысяча сто тридцать девять *

* ** 1144 тысяча сто сорок три ** ** +1145 +1146 +1147 ** *


В следующей таблице показано мое предложение по улучшенной версии.Я использую следующую разметку:

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

возможный намеченный контур
1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3






*** +1197 одна тысяча сто девяносто шесть *

































































 измененный html
<body> <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main> <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article> </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer> </section> ``

результирующий контур
1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav)


Модифицированный HTML лучше отражает
предполагаемый контур, чем
оригинал.
































































17 голосов
/ 09 февраля 2012

Основная ошибка: у вас "дивитис" во всем документе.Почему это? 

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

Вместо: 

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

Чтобы стилизовать этот заголовок, используйте иерархию CSS: body> section> header> h1, body> section> header> h2

Подробнее, ... строка 63: почему заголовок переносит h2 ??Если вы не включили больше элементов в заголовок, просто используйте один h2.Имейте в виду, что ваша структура не для того, чтобы стилизовать документ, а для того, чтобы создать самодостаточный документ.

Примените это к остальной части документа;Удачи;)

10 голосов
/ 20 марта 2011

Почему бы не иметь идентификаторы item_1, item_2 и т. Д. На самих тегах статьи? Как это: 

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

Кажется ненужным добавлять div-обертки. Значения идентификаторов не имеют семантического значения в HTML, поэтому я думаю, что было бы совершенно правильно сделать это - вы не говорите, что первая статья всегда item_1, просто item_1 в контексте текущей страницы. Идентификаторы не обязательно должны иметь какое-либо значение, не зависящее от контекста.

Кроме того, что касается вашего вопроса в строке 26, я не думаю, что там нужен тег

, и я думаю, что вы можете его опустить, поскольку он сам по себе в div "main-left". Если бы он был в основном списке статей, вы могли бы включить тег
просто для согласованности.
5 голосов
/ 24 января 2011
  1. Раздел должен использоваться только для переноса раздела внутри документа (например, главы и т. П.)
  2. С тегом header : NO.Тег заголовка представляет собой оболочку для заголовка страницы и его не следует путать с H1, H2 и т. Д.
  3. Какой div?: D
  4. Да
  5. От W3C Schools:

    Тег определяет внешний контент.Внешний контент может быть новостной статьей от внешнего провайдера, или текстом из сетевого журнала (блога), или текстом из форума, или любым другим контентом из внешнего источника.

  6. Нет, заголовоктег имеет другое использование.H1, H2 и т. Д. Представляют заголовки документов. H1 является наиболее важным

Я не отвечал на другие, потому что довольно сложно догадаться, о чем вы говорите.Если есть еще вопросы, пожалуйста, дайте мне знать.

3 голосов
/ 24 августа 2014

Вот мой пример, в котором я работаю

enter image description here

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...