banner_nika_hozyaike      banner_pos_bekker     banner_specpredl_roznica_2

HTML5 серия: структура контента

  1. Элемент раздела
  2. пример кода
  3. Элемент статьи
  4. пример кода
  5. статья как дочерний элемент раздела
  6. пример кода
  7. пример кода
  8. Див лучше!
  9. раздел как дочерний элемент статьи
  10. пример кода
  11. Элемент в стороне
  12. пример кода
  13. пример кода

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

Элемент раздела

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

пример кода

<section> <h1> Лига чемпионов </ h1> <p> В течение сезона ... </ p> ... </ section> <section> <h1> Бундеслига </ h1> <p> С самого начала позвольте немецкому мастеру ... </ p> ... </ section>

Таким образом, раздел предназначен для приблизительного тематического разбиения страницы на разделы. Это именно то, что означает слово «раздел» (английский раздел или глава).

Элемент статьи

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

пример кода

<article> <header> <address> Автор: <a href="..."&gt; Макс Мустерманн </a> </ address> <h1> Почему я должен вести блог? </ h1> </ header> <p> Ранее, когда блоги еще назывались интернет-дневниками, ... </ p> </ article> <article class = "comment"> <h1> Comment by Mario </ h1> <p> Хороший аргумент. Не все должны знать все. </ P> </ article>

статья как дочерний элемент раздела

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

пример кода

<article> <header> <address> Автор: <a href="..."&gt; Макс Мустерманн </a> </ address> <h1> Почему я должен вести блог? </ h1> </ header> <p> Ранее, когда блоги еще назывались интернет-дневниками, ... </ p> </ article> <section> <article> <h1> Комментарий Марио </ h1> <p> Хороший аргумент. Не все должны знать все. </ P> </ article> </ section>

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

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

пример кода

<article> <! - статья блога -> </ article> <section> <h2> comments </ h2> <ol id = "commentlist"> <! - комментарии -> </ ol> <форма id = "reply"> <! - форма ответа -> </ form> </ section>

Див лучше!

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

раздел как дочерний элемент статьи

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

пример кода

<article> <h1> Допинг: Бен Джонсон обманывает весь мир </ h1> <p> Бен Джонсон, канадец ... </ p> <section> <h2> Сеул 1988 </ h2> <p> 24 мая В сентябре 1988 года Бен Джонсон справился с невероятным ... </ p> <p> 2 дня спустя его моча ... </ p> </ section> <section> <h2> возвращение и возвращение </ h2> < После его четырехлетнего запрета ... </ p> <p> В Монреале он снова был уверен в ... </ p> </ section> </ article>

Элемент в стороне

В некоторых учебниках разделение страниц характеризуется краями различной ширины. Более широкий из двух краев покрывает примерно одну пятую общей ширины, поэтому является небольшим, лежащим на краевом столбце и поэтому называется краевым столбцом. Но «маргинальный» также имеет значение «вторичный»; Что может быть более уместным для размещения в граничной колонке дополнительной информации, которая не является неважной, а лишь незначительно связана с актуальной темой? Это могут быть советы, подсказки, альтернативные способы речи или правописания или иллюстративные наброски. Вполне логично, что этот элемент дизайна попал от печатного носителя к Интернету, особенно если учесть, что большинство людей, вероятно, будут смотреть на веб-страницы в альбомном формате, даже если их доля уменьшается из-за постоянно растущих мониторов.

Многие веб-сайты сегодня имеют многостолбцовый макет, предполагающий соответствующую ширину выходного носителя. Маргинальный столбец представлен дополнительным элементом. В спецификации сказано, что элемент aside включает в себя разделы страницы, содержимое которых только косвенно связано с окружающим содержимым . Конечно, это также проясняет, что сторонние элементы не обязательно должны быть в граничном столбце, даже если имя и происхождение имени предполагают это. Как всегда, представление контента подчинено его значению.

Хотя или потому, что содержимое дополнительного элемента не имеет прямого отношения к основному содержимому, дополнительное содержимое должно быть автономным и понятным без основного содержимого страницы.

пример кода

<article> <h1> Наша солнечная система </ h1> <p> Планетная система состоит из 8 планет, ... </ p> <aside> <h1> Плутон </ h1> <p> К концу 20-го века обнаружил большое количество плутоподобных объектов за короткое время. Правильно, все они должны были быть классифицированы как планеты. </ p> </ aside> <статья>

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

пример кода

<aside> <nav> <h1> заархивированные сообщения </ h1> <ol> ... </ ol> <nav> </ aside>

С элементами, представленными здесь, содержание веб-сайта может быть семантически структурировано, но что у вас есть? Конечно, как посетитель сайта, вы не увидите ничего из базовой подструктуры: современные браузеры так же аккуратны, как и в безукоризненно разработанном HTML. исправлены даже ошибочные исходные тексты. Таким образом, семантика поверхностно используется поисковыми системами, и именно в этот момент вы как пользователи семантически правильных интернет-страниц извлекаете выгоду, потому что поисковые системы могут рекомендовать страницы, которые лучше соответствуют вашим условиям поиска. В комментарии к первая часть серии HTML5 это было правильно сформулировано: семантика, таким образом, влияет на качество результатов поисковых систем и, следовательно, на уровень разочарования посетителей.

Похожие

HTML предложения
Свободно вдохновленный инструментом «Поиск HTML-расширений» Google Search Console, он стремится преодолеть его ограничения, предлагая более богатое, обновленное, подробное и удобное представление о возможных недостатках сайта в отношении использования заголовков HTML-меток и мета-описания.
Написание статьи | SEO статьи | Пользовательские статьи - профессионалы в разработке контента
SEO статьи являются наиболее важным фактором в получении хорошего рейтинга в поисковых системах. Простой факт заключается
Что делает писатель контента?
... как эти элементы улучшат способ взаимодействия с вашей веб-аудиторией. Мы исследователи. Неважно, для кого мы пишем или какого рода материал, каждый автор контента - сначала исследователь, а второй автор. Почти в каждом случае автор контента будет иметь дело с предметом, с которым он или она не знаком, и должен провести адекватное исследование, чтобы гарантировать, что вся информация, представленная в его или ее статье, является точной, актуальной и не противоречит
Как настроить прибыльную кампанию SEO
Владельцы бизнеса, которые прошли через первые шаги по созданию хорошего присутствия в Интернете для своих брендов, продуктов или услуг, несомненно, слышали о SEO или поисковой оптимизации. Для многих SEO означает,
Контент - Тактика полезного SEO контента для успешного 2017 года: статья MarketingProfs
... пример, через несколько дней после того, как видео о маме Чубакки стало вирусным, мы опубликовали статья об уроках контент-маркетинга это содержало. навигация Навигация - все о пользовательском опыте (UX). Убедитесь, что ваши пользователи могут легко перемещаться по вашему сайту - от первой целевой страницы до конечной страницы. Вам потребуется
Как создать идеальный тег H1
Важность контент-маркетинга в сегодняшних стратегиях онлайн-коммуникации находится у всех на виду, и мы уже обсуждали это в прошлом. Сегодня я хочу сосредоточиться на очень небольшой части контента, который часто игнорируется, но который может иметь основополагающее значение для вашего успеха, если о нем хорошо позаботятся: я говорю о том, как создать эффективный тег H1! Вы, вероятно, уже будете иметь некоторое представление о том, что такое тег H1, если вы уже работаете в области широкого
Как использовать SEO в блоге
Когда вы создадите свои коллекции и введете данные, перейдите к шаблону публикации и откройте настройки страницы. Вы увидите, что: Вы можете использовать данные коллекции (динамические данные CMS) для заполнения полей
Как улучшить SEO вашего сайта
... какой-либо общей стратегии по привлечению трафика на ваш сайт на основе услуг, которые предоставляет ваш бизнес, используйте Google. Планировщик ключевых слов и посмотрите, какие ключевые слова чаще всего ищут в Google о ваших предложениях услуг (следовательно, какие ключевые фразы способны привлечь наибольшее количество трафика). Укажите ключевые слова с самыми высокими показателями поиска и используйте их на своем сайте. В противном
Как провести аудит контента SEO
... элемента контента, мы предлагаем этот один поверх другого. Это создает основу для определенной страницы для ранжирования выше. (Узнайте больше, посмотрев эту часть веб-семинара здесь.) Превратите связанный с пылью контент в более крупные свежие кусочки. Используйте Google Search Console> Crawl> Sitemaps, чтобы посмотреть, сколько страниц вы отправили и сколько они проиндексировали. Добивайтесь доверия со стороны
Серия веб-трафика, часть 18: обмен ссылками с партнерскими сайтами
Даниэль Скокко Практика обмена ссылками в основном используется в целях SEO, но она также может быть использована для генерации трафика при правильной структуре. Ниже вы найдете, как вы можете использовать эту технику для генерации трафика на ваш собственный сайт или блог.
SEO: контрольный список оптимизации контента
Контент позволяет потребителям находить ваши страницы в результатах поиска. Но весь интересный контент, который ваша команда тратит так много времени на планирование, проектирование, написание и разработку, может быть невидим для поиска потребителей без его оптимизации . Оптимизация контента - это просто редактирование текстового контента, чтобы включить понятия и ключевые слова, которые поисковики просят Google, Bing и другие поисковые системы найти для них. Каждая

Комментарии

Не забывайте любые вопросы, помогите себе 5W и 2H : кто, что, когда, где, почему, как, как (кто, что, когда, где, почему, как, сколько)?
Интернет изменил способ, которым мир работает навсегда. Возможность доступа к информации практически по любому предмету привела к взрыву инноваций. Однако у Интернета есть и обратная сторона. Низкие, почти невидимые барьеры
Это рейтинговые фабрики контента по медицинским запросам, таким как «Как пережить сердечный приступ» и другим медицинским терминам?
Это рейтинговые фабрики контента по медицинским запросам, таким как «Как пережить сердечный приступ» и другим медицинским терминам? Или, может быть, вы думаете, что статья, готовящаяся к ответам на вопрос о том, как избежать сердечных приступов, написанная парнем с английским дипломом, не является частью помойки? Мэтт Каттс выделил проблемы со здоровьем как прекрасный пример того, почему продажа
Как мы хотим оценить такой мягкий фактор как качество контента в зависимости от его влияния?
Как мы хотим оценить такой мягкий фактор как качество контента в зависимости от его влияния? Исследование ключевых слов обычно полностью недооценивается. Исходя из своей повседневной практики, я могу сказать, что исследование и выбор подходящих ключевых слов требует большого опыта. Обработка инструментов изучена быстро. И, конечно же, вы можете использовать его для поиска и выбора ключевых слов, которые часто вводят пользователи. Но
И как только вы это сделаете, как вы будете говорить о себе и своей работе, не звуча как «коммивояжерка» или не выйдя из группы?
И как только вы это сделаете, как вы будете говорить о себе и своей работе, не звуча как «коммивояжерка» или не выйдя из группы? Именно такие вопросы останавливают большинство людей на своем пути с помощью этого совета. Но когда он реализован правильно, вы можете охватить все аспекты маркетинга, которые вам когда-либо понадобятся, всего лишь за небольшую социализацию на экране. Настоящий совет: Здесь есть два реальных совета. 1) Большинство
Сколько контента вы можете ожидать от каждого пакета, и как вы можете обеспечить качество контента?
Сколько контента вы можете ожидать от каждого пакета, и как вы можете обеспечить качество контента? Платный поиск. Малому бизнесу может быть сложно попасть на верхние позиции без помощи платного поиска, но недостаточно просто заплатить за несколько объявлений и ожидать, что они принесут результаты. Ваша SEO компания должна знать, какие ключевые слова делать ставки. Создание видео - разнообразие вашей контент-стратегии принесет вам очки от ваших
Как вы думаете, как будет выглядеть будущее для поисковой оптимизации?
Как вы думаете, как будет выглядеть будущее для поисковой оптимизации? Оставьте свои комментарии ниже и, пожалуйста, поделитесь, если вам понравилась запись 🙂
А как насчет сопровождения SEO - как агентства сопровождения могут достичь максимальной степени воздействия в своих целевых областях?
А как насчет сопровождения SEO - как агентства сопровождения могут достичь максимальной степени воздействия в своих целевых областях? Нельзя отрицать, что этот сектор невероятно конкурентоспособен на всех уровнях. Вот почему мы тесно сотрудничаем с нашими взрослыми SEO и сопровождаем клиентов SEO, чтобы установить достижимые цели и установить реалистичные ожидания с первого дня. Наша цель заключается в том, чтобы максимально использовать ваш бюджет в любое время и убедиться, что мы вкладываем
Как генерируется доход вашей компании и как могут помочь результаты поиска?
Как генерируется доход вашей компании и как могут помочь результаты поиска? Какие еще рекламные каналы вы используете? Кто ваши конкуренты? С этими вопросами агентство SEO получает обзор приоритетов и особенностей компании и гарантирует, что оно работает в правильном направлении, а не только в соответствии со схемой F. Вопросы, которые клиенты должны задать потенциальным SEO-агентствам: У вас есть ссылки, которые
После того, как вы нашли несколько ключевых слов, как насчет того, чтобы сделать их ранжированными?
После того, как вы нашли несколько ключевых слов, как насчет того, чтобы сделать их ранжированными? Продвижение ваших заголовков и описаний Etsy: ваши заголовки и изображения являются важными элементами позиционирования для Google. Название продукта - Etsy Store: Названия продуктов / предметов являются обязательными, поскольку они помогают вашему SEO на странице тремя различными способами. Google рассматривает заголовок страницы
Вы когда-нибудь замечали, как такие сайты, как ProBlogger, Kikolani и probloggingsuccess очень хорошо справляются с рейтингом в поисковых системах?
Вы когда-нибудь замечали, как такие сайты, как ProBlogger, Kikolani и probloggingsuccess очень хорошо справляются с рейтингом в поисковых системах? Вы когда-нибудь почему они всегда в таблице каждый раз, когда вы ищете для каждого соответствующего термина? Ответ прост. Посмотрите на количество комментариев, которые они имеют. Мы говорим не о 5 или 10. Мы говорим сотни комментариев, ради всего святого! Разве это не доказывает, что читатель
Как соотносятся небрендированные темы (как показано на скриншоте ниже) с эффективностью фирменных ключевых слов?
Как соотносятся небрендированные темы (как показано на скриншоте ниже) с эффективностью фирменных ключевых слов? Снимок экрана эффективности без фирменного ключевого слова Имея эту информацию в руках, маркетологи B2B могут установить дополнительные критерии для

Gt; Макс Мустерманн </a> </ address> <h1> Почему я должен вести блог?
Gt; Макс Мустерманн </a> </ address> <h1> Почему я должен вести блог?
Это рейтинговые фабрики контента по медицинским запросам, таким как «Как пережить сердечный приступ» и другим медицинским терминам?
Или, может быть, вы думаете, что статья, готовящаяся к ответам на вопрос о том, как избежать сердечных приступов, написанная парнем с английским дипломом, не является частью помойки?
Как мы хотим оценить такой мягкий фактор как качество контента в зависимости от его влияния?
И как только вы это сделаете, как вы будете говорить о себе и своей работе, не звуча как «коммивояжерка» или не выйдя из группы?
Сколько контента вы можете ожидать от каждого пакета, и как вы можете обеспечить качество контента?
Как вы думаете, как будет выглядеть будущее для поисковой оптимизации?
А как насчет сопровождения SEO - как агентства сопровождения могут достичь максимальной степени воздействия в своих целевых областях?
Как генерируется доход вашей компании и как могут помочь результаты поиска?

Наш магазин

Сезонные товары

Icon    Доставка в течение дня
Icon    Работаем с 09:00 до 18:00 кроме выходных
Icon    Возврат в течении 14 дней
Icon    Гарантия на все товары