Новости

Когда использовать элемент HTML5 «section»

  1. Определение <section>
  2. Дальнейшее уточнение из спецификации
  3. Когда это должно быть использовано?
  4. Мой вывод

После публикации   Простой HTML5 шаблон   На прошлой неделе, и получив некоторую конструктивную обратную связь по содержанию шаблона, меня осенило кое-что, о чем, по-видимому, упоминалось в нескольких различных статьях, включая   один на HTML5 Доктор   ,   По сути, кажется, что новый элемент HTML5 <section> сбивает с толку, и его истинное значение трудно определить После публикации Простой HTML5 шаблон На прошлой неделе, и получив некоторую конструктивную обратную связь по содержанию шаблона, меня осенило кое-что, о чем, по-видимому, упоминалось в нескольких различных статьях, включая один на HTML5 Доктор ,

По сути, кажется, что новый элемент HTML5 <section> сбивает с толку, и его истинное значение трудно определить. Я попытаюсь объяснить это здесь, вернувшись к спецификации и обсудив, через процесс исключения, некоторые способы ее использования.

Определение <section>

Согласно спецификации <section> определяется следующим образом:

Элемент section представляет общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком.

Таким образом, мы сразу можем подумать, что <section> может использоваться для хранения поста в блоге или отдельного комментария в посте. Но подожди минутку. Спецификация продолжается:

Авторам рекомендуется использовать элемент article вместо элемента section, когда было бы целесообразно объединить содержимое этого элемента.

Эта часть исключает сообщения в блогах, статьи в блогах, контент новостных лент и другой синдицированный контент. Что это оставляет нас с?

Дальнейшее уточнение из спецификации

Далее в спецификации описывается, как ее не следует использовать, а также дается рекомендуемое использование. Это объясняет:

Примерами разделов могут быть главы, различные страницы с вкладками в диалоговом окне с вкладками или пронумерованные разделы диссертации. Домашняя страница веб-сайта может быть разбита на разделы для введения, новостей и контактной информации.

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

Обновление (20 октября 2011 г.) Изначально я ошибочно предполагал, что «новостные статьи», упомянутые в спецификации, были разделены на разделы. Это говорит о том, что новости будут находиться внутри одного элемента <section>, а затем, возможно, будут разбиты на элементы <article>. Кредит для этот комментарий Пол Д. Уэйт о переполнении стека.

Наконец, вот предупреждение, приведенное в спецификации (что соответствует хотя бы один человек возникли проблемы с моим использованием <section> в шаблоне Easy HTML5):

Элемент section не является универсальным контейнерным элементом. Когда элемент нужен для стилизации или для удобства написания сценариев, авторам рекомендуется использовать вместо этого элемент div. Общее правило заключается в том, что элемент section уместен только в том случае, если содержимое элемента будет явно указано в схеме документа.

У меня есть проблема со спецификацией, говоря, что это «не общий элемент контейнера». Ну, вроде как. Как еще вы можете это описать? Тем не менее, вооружившись этой информацией, мы можем принять несколько разумное решение для ее использования.

Когда это должно быть использовано?

В HTML5 для веб-дизайнеров Джереми Кит напоминает нам, что нужно убедиться, что все элементы одного раздела связаны между собой.

Чтобы сделать это более понятным в практическом плане, я провел мозговой штурм списка некоторых конкретных DO, и DON'T, о которых следует помнить при использовании элемента <section>.

Список дел…

  • НЕОБХОДИМО использовать раздел для каждого отдельного раздела переключателя вкладок или ползунка содержимого (если неупорядоченный список не требуется)
  • НУЖНО использовать раздел, чтобы разделить длинную страницу «Условия использования» (или аналогичную) на пронумерованные разделы
  • СЛЕДУЕТ вкладывать элементы раздела в случае необходимости (как вы могли бы сделать со страницей «условия»)
  • НЕОБХОДИМО использовать раздел для хранения описания товара (которое может включать фотографию, кнопку «добавить в корзину» и т. Д.)
  • НУЖНО использовать раздел для хранения индивидуальных биографий сотрудников на корпоративной информационной странице
  • НЕОБХОДИМО использовать раздел для разделения различных разделов одностраничного веб-сайта или портфолио

ОБНОВЛЕНИЕ (12 января 2011 г.) : Брюс Лоусон не согласен с этим с двумя пунктами, которые теперь имеют сквозную линию выше. Он упоминает, что они могут быть синдицированы, так что было бы более уместно, если они обернуты тегами статьи Я предварительно согласен, но я полагаю, что можно было бы использовать случай для использования раздела, если нет намерения когда-либо синдицировать контент. Но тогда возникает вопрос: является ли потенциал для синдикации, который требует использования статьи (что сделало бы его утверждение правильным в этом случае)? Или это фактическое намерение синдицировать, которое определяет, использовать ли статью?

Список не ...

  • НЕ используйте раздел, чтобы отделить содержимое от верхнего и нижнего колонтитула; используйте вместо этого div (см. доктор )
  • НЕ используйте раздел, чтобы обернуть переключатель вкладок для манипулирования DOM или стилизации
  • НЕ используйте раздел для боковой панели или других касательно связанных полей контента; использовать вместо
  • НЕ используйте раздел только для того, чтобы добавить рамку или тень вокруг чего-либо; используйте вместо этого div
  • НЕ используйте раздел для оболочки при реализации искусственные колонны ; снова используйте вместо этого div
  • НЕ используйте раздел, чтобы вкладывать элементы при попытке избежать Баг с плавающей точкой в ​​IE6 (или похожая проблема, связанная с макетом); снова используйте div
  • НЕ используйте раздел, чтобы держать биографию отдельного автора в блоге или новостной статье; использовать вместо

Мой вывод

Короче говоря, элемент <section> в HTML5 можно использовать в любом случае, где он содержит автономное, не синдицированное, не стороннее содержимое, обертка которого не предназначена для стилизации. Другими словами: вряд ли когда-либо.

Я думаю, что Джереми Кит сделал хорошее наблюдение когда он сказал:

Я не думаю, что должен быть элемент section и элемент article. У меня нет особенно сильного мнения о том, какой из них следует оставить, а какой - пойти, но небольшая подгонка определенно в порядке.

Когда я включил <section> в шаблон Easy HTML5, я намеревался представить его для возможного использования, и я не собирался превращать его в универсальную обертку для стилей. Я решил включить два элемента <section> в этот шаблон и обернуть их в общий <div>, чтобы было более понятно, как его использовать.

Как вы думаете? Можете ли вы вспомнить какие-либо другие ЗАДЕРЖКИ и ЗАДЕРЖКИ для элемента <section>, которые я могу добавить в список, чтобы сделать его использование более понятным? Я использовал это неправильно в любом из тех, кого я перечислил? Как вы думаете, нам вообще нужен элемент <section>?

Похожие

Основные обновления алгоритма Google
... когда происходят изменения, и не подтверждает, когда произошло обновление. SEO-специалисты по всему миру собираются вместе, чтобы обсудить изменения в SERP на форумах, в социальных сетях и на новостных сайтах. Объединяя свои знания и данные, все вместе оптимизаторы поисковых систем могут определить, насколько изменчивы рейтинги в любой данный момент времени. Очень изменчивые рейтинги (рейтинги, которые показывают значительные изменения) указывают на некоторую форму обновления с алгоритмом
SEO оптимизация - смысл
определение Обычно термином SEO Optimization (от англ. Search Engine Optimization , в переводе «поисковая оптимизация») мы обозначаем набор методов, которые позволяют улучшить видимость сайта: Представление (на английском языке), которое состоит в том, чтобы сделать сайт известным поисковым системам (инструментам); Позиционирование (в английском рейтинге ), которое состоит
Версия для печати <Версия для печати> Версия для печати> Версия для Windows 8 - 8.1
Свернуть все страницы Windows 8.1, Windows XP, Windows Live ... RћRЎ для Windows С, Сs: услуги.msc, СМС, С, С, С ... (Москва), Россия, Россия, Франция, Россия, Франция, Россия РЅРμРјР ± С ... РѕРґРёРјС <. Ґјѕјј °
Определение функций и категорий SEO
... это повлияет на сам SEO. SEO важно? Успех веб-сайта зависит от того, как вы определяете SEO. Веб-сайт без посетителей похож на продукт, который нельзя продать. Чтобы достичь желаемых посетителей на вашем сайте, необходима правильная интеграция SEO. Помните, что ключом к достижению посетителей является обеспечение позиции сайта в списке органического поиска. Доля кликов в обычном Google составляет 86%, а оставшиеся 14% приходится на платный поиск, что делает интеграцию в SEO жизненно
SEO 101: что это такое и зачем вам это нужно?
Создание достойного награды веб-сайта с большим количеством отличного контента и визуальных эффектов не продвинет вас слишком далеко без твердой основы SEO план на месте. «Если вы построите это, они придут» - неэффективная стратегия в современном конкурентном мире поиска. Ни один из них не сфокусирован исключительно на социальных сетях. Согласно исследованию, составленному Search Engine Journal,
White Hat SEO: определение, тактика, значение
... когда большинство компаний и маркетологов используют этот тип SEO. В этом посте делается попытка осветить White Hat SEO, его тактику и почему важно и выгодно придерживаться этого типа SEO, даже если на получение результатов уходит больше времени. White Hat SEO относится к использованию стратегий и методов SEO, которые ориентированы на аудиторию, а не строго на поисковые системы, этот тип SEO также следует этическим правилам и политикам поисковых систем. Есть несколько
Parallax Scrolling - это эффективный тренд веб-дизайна
Parallax scrolling - это метод веб-дизайна, который фокусируется только на одной странице, где фон веб-страницы перемещается или прокручивается медленнее, чем передний план, создавая впечатление трехмерного эффекта при прокрутке страницы вниз или в стороны. Проще говоря, это сайт с прокруткой, который позволяет веб-элементам - изображениям и содержимому - прокручиваться с разной скоростью, создавая впечатление глубины. Начиная с 1982 года, параллаксная прокрутка была впервые популяризирована
Создание ссылок - определение терминов
Создание ссылок (см. Также оптимизация Offpage ) служит для усиления профиля обратных ссылок вашей собственной страницы. Цель состоит в том, чтобы увеличить количество входящих обратных ссылок и, следовательно, популярность ссылок на странице. Различают органическое и искусственное построение ссылок. Органическое создание ссылок пытается естественным образом генерировать
Все о тегах заголовка и SEO
... это отличный способ сообщить Google, о чем ваша страница, и они могут сильно помочь или навредить вашей странице. Тег H1 должен находиться близко к верху страницы, чтобы Google мог классифицировать содержание страницы и правильно ее подать. Ниже вы
Руководство по местному SEO для стоматологов | Стоматологическая поисковая оптимизация сайта
Если у вас есть стоматологическая практика, вам, вероятно, не нужно рассказывать о важности повышения вашей видимости в Интернете или о создании эффективной местной SEO-кампании для повышения этой видимости. Фактически, вы, вероятно, уже потратили время и деньги на поисковую оптимизацию своей практики. И, если вы управляли своей собственной локальной SEO-кампанией, у вас, вероятно, был смешанный пакет результатов, и вы, возможно, даже сделали один или оба из следующих комментариев:
SEO SEO: что это такое и как это сделать
... когда-нибудь задавали себе этот вопрос? SEO-эксперты Youtube считают, что идеальная продолжительность - около 2 минут. Но это не может быть принято как универсальное правило, потому что оно очень сильно зависит от типа контента, который вы намереваетесь донести, и от идентичности вашего бренда. Если вы действительно хотите принять эталонное значение, рассмотрите 4-минутный порог; фактически это продолжительность, которую Youtube использует для фильтрации «коротких» видео из «более длинных»

Комментарии

Php if (function_exists ('yoast_breadcrumb')) {yoast_breadcrumb ('<p id = "breadcrumbs">', '</ p>'); }?
php if (function_exists ('yoast_breadcrumb')) {yoast_breadcrumb ('<p id = "breadcrumbs">', '</ p>'); }?> Похожие сообщения с помощью плагина Связывание связанных постов под статьей также помогает создавать взаимные ссылки. YARP (еще один связанный пост) Плагин является наиболее часто используемым плагином для связанных сообщений, он очень простой и очень эффективный.
Когда вы можете использовать это?
Когда вы можете использовать это? Почему ваш продукт лучше, чем ваши конкуренты? Кто это использует? Описание, помимо того, что является ключевым для вашего клиента, также является ключевым для индексации статьи в Amazon. Не скупитесь и пишите товары примерно длиной в 150 слов. Недостаток вдохновения? Если вы хотите уточнить свое описание и решить эти сомнения будущих клиентов, я рекомендую вам поискать аналогичные продукты и
Вы делаете все, чтобы быть уверенными, что помогаете своей компании быть успешной, насколько это возможно; но что, если вы что-то упустили?
Вы делаете все, чтобы быть уверенными, что помогаете своей компании быть успешной, насколько это возможно; но что, если вы что-то упустили? Это может быть SEO. Если вы еще не знакомы с SEO, это поисковая оптимизация. Поисковая оптимизация имеет решающее значение для расширения вашего бизнеса через ваш сайт. Подумайте, сколько раз вы искали что-то в поисковой системе, скажем, Google. Вы когда-нибудь задумывались, как именно Google знает, какие веб-сайты вам будут показывать, когда вы
Есть много способов сделать это, поэтому когда использовать какой метод?
Есть много способов сделать это, поэтому когда использовать какой метод? В этой статье мы обсудим, когда использовать каждый из этих методов, а также рассмотрим плюсы и минусы. Поисковые системы сканируют миллиарды страниц каждый день. Но они индексируют меньше страниц, чем это, и они показывают еще меньше страниц в своих результатах. Вы хотите, чтобы ваши страницы были среди них. Итак, как вы контролируете весь этот процесс и повышаете свой рейтинг? Чтобы ответить
Это может быть хорошим описанием того, что делает ваш бизнес, но может ли оно быть ценным для видимости вашего сайта в Интернете?
Это может быть хорошим описанием того, что делает ваш бизнес, но может ли оно быть ценным для видимости вашего сайта в Интернете? В 2012 году Мэтт Каттс, затем глава веб-спама Google, преуменьшает влияние расширения доменов на SEO , В то время он заявил, что «Google имеет большой опыт в возвращении соответствующих веб-страниц, независимо от домена верхнего уровня (TLD). Google попытается соответствующим образом
Самое полезное, что вы можете сделать для себя, - это просто спросить друзей и семью, что они будут вводить в поле поиска, если они пытаются найти <войти в свою нишу здесь>?
Самое полезное, что вы можете сделать для себя, - это просто спросить друзей и семью, что они будут вводить в поле поиска, если они пытаются найти <войти в свою нишу здесь>? Это даст вам отличный внешний вид, от реальных людей, и обеспечит отправную точку для вашего списка ключевых слов. Проводя исследование ключевых слов, всегда старайтесь думать как искатель. Будьте изобретательны и мыслите нестандартно. Запишите каждое потенциальное ключевое слово, а затем сократите
Как всегда поддерживать высокие стандарты качества ваших постов, даже когда рабочая нагрузка заставляет вас быть быстрее или когда у вас неизбежный срок?
Как всегда поддерживать высокие стандарты качества ваших постов, даже когда рабочая нагрузка заставляет вас быть быстрее или когда у вас неизбежный срок? SEMrush всегда на вашей стороне, чтобы облегчить вашу повседневную жизнь: если вы контент-маркетолог, вы знаете наш инструментарий контента Это один из лучших на рынке, оснащенный инструментами, которые можно применять на любой стадии вашего рабочего процесса.
Это будет отражать мой окончательный вывод, приведенный ниже для «Кто для WF For?
Это будет отражать мой окончательный вывод, приведенный ниже для «Кто для WF For?». Я не проверял все темы и все ответы, но я все еще был очень не впечатлен тем, что увидел. Я все еще думаю, что вы могли бы получить лучшие ответы от Тупые вопросы SEO а также получить законные ответы почти ничего, без пуха. То же самое касается групп в социальных сетях в Google+, Facebook, Twitter и
Почему это должно быть скрыто?
Почему это должно быть скрыто? Это из-за угрозы со стороны его отца? * Тогда я просто буду продолжать смотреть эту драму * хахаха Чон Ха Джин, у которого высокая температура, лечится Джанг Ха На, но из-за личности Джо Ха Нао Джан Ха На снова получает приказ покинуть его. Зрители начали представлять интересные шоу, когда Рю Сын Йон встретил близкого друга Ли Су Хена Goo Seo Jin подозревает исчезновение доктора Канга и друга Рю Сын Йона. Эта сцена, возможно, является
Таким образом, вместо того, чтобы задавать вопрос «является ли это оптимизированным для SEO», задайте себе вопрос «Является ли эта публикация работы настолько четкой и подробной, как и должно быть?
Таким образом, вместо того, чтобы задавать вопрос «является ли это оптимизированным для SEO», задайте себе вопрос «Является ли эта публикация работы настолько четкой и подробной, как и должно быть?» Если ответ «да», то поисковые системы будут вознаграждать вас. Чтобы получать такие сообщения в блоге прямо в свой почтовый ящик,
Это потому, что если вы сделали это раньше, и это произойдет снова, что еще подумает сторонний наблюдатель, кроме того, что вы соответствуете своим старым трюкам?
Это потому, что если вы сделали это раньше, и это произойдет снова, что еще подумает сторонний наблюдатель, кроме того, что вы соответствуете своим старым трюкам? Это ключ к любой SEO-кампании, положительной или отрицательной, помня, что Google - просто наблюдатель, который рассказывает пользователям о том, о чем они спрашивают. Например, если бы в вашем блоке происходила череда грабежей, кого бы вы заподозрили? Человек, который признает, что он был грабителем, но перевернул свою жизнь, или ваш

Что это оставляет нас с?
Когда это должно быть использовано?
Или это фактическое намерение синдицировать, которое определяет, использовать ли статью?
Как вы думаете?
Я использовал это неправильно в любом из тех, кого я перечислил?
SEO важно?
Когда-нибудь задавали себе этот вопрос?
Php if (function_exists ('yoast_breadcrumb')) {yoast_breadcrumb ('<p id = "breadcrumbs">', '</ p>'); }?
Когда вы можете использовать это?
Когда вы можете использовать это?