Я собираюсь сделать смелый прогноз. Еще долго после вас и меня HTML будет вокруг. Не только в миллиардах архивных страниц нашей эры, а как живые дыхательные органы. Слишком много сил, энергии и инвестиций пошло на разработку web-инструментов, протоколов и платформ, что бы все это было легко брошено.
Остановимся, что бы рассмотреть нашу ответственность. К несчастью, в истории мы связаны с разработкой важного инструмента нашей цивилизации, который будет использоваться для общения в течении десятилетий. И так когда мы направляем свои умы, праздно или всерьез, на улучшение HTML мы должны понимать на сколько далеко идущими могут быть последствия наших решений.
HTML 5, W3C недавно удвоило усилия по формированию нового поколения HTML, за прошедший год или около того набрал значительные темпы. Это огромны проект, который охватывает не только структуру HTML, но и разбор моделей, модели обработки ошибок, DOM, алгоритмы для извлечения ресурсов, медиа-котента, 2D графики, шаблоны данных, модели безопасности, модели загрузки страницы, хранение данных на стороне клиента и многое другое.
Так же существуют изменения в структуре, синтаксисе и семантике HTML, некоторые из них описал Lachlan Hunt в статье "Обзор HTML 5 " (перевод на хабре).
Но в этой статье давайте рассмотрим исключительно семантику HTML. Это то, чем я был заинтересован в течении многих лет и я считаю, что это очень важно для будущего HTML.
BBC недавно объявила о том, что они будут снижать долю микроформата hCalendar в своей программе телепередач, в пользу доступности и удобства abbr design pattern . Это свидетельствует о том, что мы, вне всяких сомнений, вытолкнули семантические возможности HTML далеко за те пределы, которые когда-либо предназначались, и действительно это возможно для языка. Мы просто исчерпали элементы и атрибуты HTML, которые способны повысить семантику документа. Если мы будем и далее хитрить с существующими конструкциями HTML, то будет возникать все больше таких проблем. Потому что HTML страдает от фундаментального деффекта, как семантический язык разметки - его семантика фиксирована и не расширяема.
Это не просто теоретическая проблема. Сотни тысяч разработчиков используют class и id для создания более семантической разметки (они так же используют их в качестве «крючков» для CSS стилей, но это другой вопрос). Почти всегда эти разработчики используют специальные словари, значения которых они сами составляют, а не значения существующих схем. Это псевдосемантическая разметка - в лучшем случае.
Многие страницы по всему интернету используют микроформаты, что бы добавить более структурированной семантики, чем при помощи обнищавшего набора элементов и атрибутов HTML . В этом случае значения использованные для атрибута class согласованы со словарями, иногда взяты из других стандартов, такие как vCard , иногда из недавно созданных словарей, где нет жесткого существующего стандарта (как в случае с hReview).
Расширяемая семантика
Существует очень серьезная проблема, которую необходимо решить здесь. Нам нужны механизмы в HTML, которые четко и однозначно позволят разработчикам добавлять более выразительной семантики, а не псевдосемантики в их разметку. Это, пожалуй, является самой насущной задачей для HTML 5 проектов.
Но это не так просто, придумать механизм для создания большей семантики в HTML контенте: Существуют значительные ограничения, на любое решение. Возможно, самое большое из них - обратная совместимость. Решение, не может нарушить сотни миллионов устройств для просмотра использующихся сегодня, которые будут использоваться в ближайшие годы. Любое решение, которое не совместимо, не будет широко принято разработчиками, опасаясь потери читателей. Оно будет быстро засыхать на корню.
Решение должно быть так же вперед-совместимым. Не в том смысле, что оно должно работать в будущих броузерах - это задача разработчиков броузеров, но оно должно быть расширяемым
. Мы не можем ожидать какого-либо единого решения, которое мы сейчас разработаем, что бы решить все вообразимые и невообразимые потребности семантики в будущем. Мы можем разработать решения, которые могут быть расширены для удовлетворения будущих потребностей, по мере их возникновения.
Эти трудности, в совокупности представляют огромную проблему. Но в контексте языка, основные итерации которого проходят в десятилетние промежутки и важность которого, как глобальная платформа для коммуникаций имеет первостепенное значение, это проблема, которая должна быть решена.
Итак, как HTML 5 решит этот вопрос? HTML 5 вводит ряд новых элементов. Некоторые я назвал «структурные» - section, nav, aside, header и footer. Элемент dialog который по типу и содержанию схож с blockquote. Есть так же целый ряд элементов данных, как например meter , который представляет собой «скалярное измерение в пределах известного диапазона или дробное значение, например использование диска»; и элемент time{http://www.w3.org/html/wg/html5/#the-time}, который представляет собой дату и/или время.
Хоть эти элементы и могут быть полезными и, как выяснилось, вызвали определенный интерес, смогут ли они действительно решить эту проблему, мы определим с ограничениями совместимости снизу вверх и обратной совместимости.
Рассмотрим каждое препятствие
Обратная совместимость
Как современные броузеры обрабатывают эти новые элементы, такие как section? Хорошо,
последние версии Safari, Opera, Mozilla и даже IE7 все делают на странице следующим образом.
<
h1
>
Top Level Heading
<
section
>
<
h1
>
Second Level Heading
<
p
>
this is text in a section element
<
section
>
<
h1
>
Third Level Heading
В начале это выглядит прекрасно. Но когда мы пытаемся задать
стили CSS, например, для элемента section, который выглядит следующим образом:
Section {color: red}
… Большинству из упомянутых броузеров это удается, но IE7 (и тем более 6) нет.
Поэтому у нас есть проблема обратной совместимости с 75% броузеров, использующихся в настоящее время. Учитывая, период полураспад Internet Explorer, мы можем прогнозировать, что большинство пользователей будут использовать IE6 и IE7, даже через несколько лет.
Если HTML 5 вводит новые элементы, какова вероятность, что они будут использоваться подавляющим большинством разработчиков - учитывая то, что они не совместимы с большинством используемых броузеров?
Давайте обратимся к совместимости снизу вверх, это следующая проблема.
Совместимость снизу вверх
Сначала мы поставим вопрос: «Зачем мы изобретать эти новые элементы?». Разумным ответом будет: «Потому что не хватает семантики в HTML, а добавление этих элементов мы увеличим семантику HTML, что не может быть плохим, или может?».
Добавляя эти элементы, мы рассматриваем необходимость повышения потенциала семантики HTML, но только в рамках узкой сферы. Независимо от того сколько элементов введем, мы всегда будем думать о добавлении большей семантике HTML. И добавив столько элементов, сколько нам хочется, мы не решим проблему. Нам не нужно добавлять определенные термины в словарь HTML, мы должны добавить механизм, позволяющий расширять семантику документа по мере необходимости. В технических терминах, мы должны сделать HTML расширяемым. HTML 5 не предлагает механизма расширяемости.
Таким образом HTML 5 выполняет функцию, которая убьет значительный процент современных броузеров и не позволяет добавить семантики языка вообще.
Остаюнся несколько вопросов о новых элементах. Откуда взяты названия новых элементов? Как было решено, что элемент навигации нужно называть «nav»? Зачем в навигации применяются термины page-level, site-level и meta-site-level?
Почему бы не принять существующий словарь, такой как DocBook ? Его словарь структуры документа более богат, он был разработан путем публикаций экспертов, на протяжении многих лет. Это не является аргументом в пользу DocBook, а дело в том, что чрезвычайно важная задача подготовки механизма обеспечения семантикой HTML проходит путь, уделяя малое внимание практике в работе которая началась более 30 лет назад. (Оригинал работы по GML начался в начале 1970-х годов)
Некоторые идеи решения
И так, имее чрезвычайно важное значение нынешних усилий, у меня есть некоторые
практические рекомендации, как решить эту проблему. Ну, я начал с одного.
Если добавление новых элементов не обсуждается, по крайней мере в этой дискуссии, атрибуты - другая логическая область HTML, сконцентрируемся на ней. В конце концов, мы на протяжении, почти, десяти лет использовали атрибуты class и id, как механизмы расширения семантики HTML. Многие разработчики уже знакомы с этим и чувствуют себя комфортно. Проект microformats показал, что существующих атрибутов не достаточно, для использования их как механизм расширения семантики HTML. Так что, если мы хотим использовать атрибуты для решения проблемы, мы должны ввести один или более новых атрибутов. Пред тем, как перейти к механики, того как это может работать, справедливо подвергнуть это предложение тем же требованиям, как и новые элементы в HTML 5. Самое главное во внедрении новых атрибутов - это будет ли обратная совместимость HTML. Если да, то обеспечивает ли это работоспособный механизм расширения семантики в HTML?
Давайте изобретем новый атрибут. Назовем его «structure», но название не важно. Мы можем использовать его так:
Давайте посмотрим, как наши броузеры это оценят.
Конечно, все наши броузеры обработают следующий элемент CSS.
Div {color: red}
А как насчет этого:
Div {font-weight: bold}
На самом деле, почти все броузеры, включая IE7, обработают стиль div с атрибутом structure, даже если нет такого атрибута. К сожалению, наше счастье изчезает, потому что IE6 нет. Но мы можем использовать этот атрибут в HTML и все существующие броузеры распознают его. Мы даже можем использовать стили CSS для нашего HTML, с использованием атрибута во всех современных броузерах. И если мы хотим обойти старые броузеры, мы можем добавить class, со значением стиля. В сравнении с HTML 5 решением, которое добавляет новые элементы, не работающие в Internet Explorer 6 или 7, мы видим, что это, безусловно, более обратно совместимое решение.
Расширяемость через атрибуты
Вместо новых элементов, HTML 5 должна принять ряд новых атрибутов. Каждый из этих атрибутов будет относиться к категории или типу семантики. Например, как я уже подробно изложил в другой статье , HTML включает в себя: структурную семантику, риторическую семантику, ролевую семантику (принятую из XHTML) и другие классы и категории семантики.
Эти новые атрибуты, могут быть использованы как атрибут class: для придания элементу семантики, описывать характер элемента или для метаданных элемента.
Это не отличается от ролей атрибута в XHTML , где мы имеем один атрибут для всех элементов семантики, мы должны определить различные типы семантики элемента и разделить их.
Например XHTML атрибут role работает следующим образом:
<
ul
role
="navigation sitemap"
>
<
li
href
="downloads"
>
Downloads
<
li
href
="docs"
>
Documentation
<
li
href
="news"
>
News
* This source code was highlighted with Source Code Highlighter
.
Значение атрибута role является разделенное пространство списка из слов определенного стандартным словарем или заданным словарем.
Почему бы не принять атрибут role, как есть? Ведь существуют другие виды семантики, для которых определение роли не применимо. Например:
He’s a fantastic person.
Это демонстрирует теоретический тип семантики - «риторический», который может быть использован для разметки документа риторического характера. Этот элемент явно не играет роли иронии в документе. Наоборот, содержит в себе элементы иронии.
Вот еще один пример. Все более очевидно, что в HTML не хватает представления машино-читаемого значения понятным для человека, например даты. Это лежит в основе проблемы BBC с микроформатом hCalendar, о ней мы говорили ранее. Хотя May Day next year действительно не имеет смысла, зато по аналогии May Day next year будет.
Опять же, когда мы используем конкретный термин «equivalent» в качестве атрибута или какой либо другой для обозначения такого рода семантики, это не является проблемой. Важно отметить, что это не так просто, как использование атрибута class или role, где в один элемент помещается целый набор элементов семантики информации. Для, должным образом, расширяемого решения, которое обеспечит обратную совместимость и достаточную гибкость, стоит исследовать в этом направлении.
Я назвал этот раздел «Некоторые идеи решения», поскольку значительный объем работы необходимо сделать, для того, что бы создать действительно работоспособное решение. Открытые вопросы включают в себя следующее.
- сколько различных семантических атрибутов должно быть. Будут ли эти категории расширяемыми, если да, то каким образом?
- Каким образом определять словарь?
- Мы просто изобретаем термины, которые мы хотим, почти тем же образом, как и разработчикки использовали значение class, или возможные значения должны быть определены стандартизированной спецификацией?
- Если у нас есть конфликт, между двумя словарями, например двум идентичным терминам дают определения два различных словаря, как это решить?
- Нужно ли пространство имен или же существует другой механизм?
Вместо того, что бы торопится с ответом на эти вопросы, я выдвинул на свет вопросы которые необходимо решить и начать диалог. Разветвление и размах решений сделаных в HTML 5, слишком велик для принятия этих решений, необходимо внести осведомленность о лингвистике, семантике, семиотике и смежных областях.
Надеюсь понятно, что просто внесение новых элементов в HTML не является решением проблемы расширения семантики в HTML.
Давайте не спешить с легким решением - с изменением «климата» все это обременит наших внуков проблемой, как и сейчас. По крайней, мере давайте оставим им максимально хороший HTML, на сколько возможно.
Теги:
Добавить метки
Чем глубже вы изучаете html и web разработку, тем чаще слышите одно загадочное слово “семантика”. В этой статье мы разгадаем загадку, и расскажем что такое семантическая верстка. Разберем основные теги которые используются для описания семантической структуры.
Что такое семантическая верстка?
Семантическая верстка — это изучение значений слов и выражений. В html ничто иное как написание элементов со смыслом. Семантический элемент четко описывает свое значение как для браузеров, так и для разработчиков.
Давайте взглянем на отличие семантического элемента от обычного.
Например div или span — простые элементы, глядя на них мы не можем понять какого типа контент в них содержится. Это может быть просто текст, картинка, или другие теги.
Теперь семантические form , table , и article здесь уже совсем другое дело. Только прочитав названия мы можем с легкостью понять что внутри этих тегов. Пример верстки обычной и семантической:
XHTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!
Надеюсь на этом этапе вы уловили разницу между типами тегов. Хочу сразу отметить, что это не единственные теги, их много, а с появлением html5 стало еще больше. Дальше мы познакомимся с ними.
Почему семантическая верстка сайта так важна?
Хорошо написанный CSS может скрыть от глаз пользователя плохую верстку html. Но мы не можем скрыть ее от поисковых роботов, плагинов браузера, читалок и других инструментов и девайсов.
Исходя из этого семантическая верстка является обязательной, если вы хотите чтобы ваш сайт был доступен любым посетителям с разнообразных устройств, и хорошо ранжировался в поисковых системах. Не стоит забывать и о тексте, который тоже должен быть хорошо структурирован, чтобы пользователям было комфортно его читать.
Как реализовать семантическую верстку страницы?
Существует одно единственное правило, при написании мы должны использовать теги которые в конкретном случае могут наиболее точно передать значение и тип контента, поисковым роботам и программам. Если нет подходящих тегов, то используем обычные т.к. div
Мы можем сгруппировать наиболее распространенные и важные элементы на четыри группы:
- Теги структуры документа
- Текстовые теги
- Медиа теги
- Корреляционные теги
Теги структуры документа
В прошлом элемент div был основным с помощью которого создавалась , W3C обратили внимание на то, что разработчики использовали в названиях id и class слова header, footer, menu и т.д. Которые описывали смысловое содержимое элемента. Так и появились новые семантические теги в HTML5.
header:
Элемент который используется как контейнер для логотипа, названия сайта и меню. Также для определения заголовков, в статьях и т.д.
footer:
Используется в основном для описания нижней части страницы, обычно содержит информацию об авторе, контакты, копирайт, дополнительное меню и кнопку которая ведет к верху страницы.
main:
Элемент высокого уровня, используется как контейнер для уникального содержимого на странице, которое не повторяется на других страницах сайта.
nav:
элемент для создания навигации по сайту. nav обычно находится в header (хедере) и footer (футере), а также может быть использован в aside (сайдбаре) сайта.
section:
Описывает разделы документа, должен содержать в себе заголовок h1 — h6
aside:
Используется для идентификации контента, который связан с основным контентом на странице. Например, aside элемент может содержать определение термина в статье, рекламные объявления, дополнительную информацию на странице.
article:
Это самодостаточный элемент который используется для описания статьи сайта, блога так же публикации на форуме. Может содержать элемент header и footer.
Текстовые теги
Существует множество тегов для работы с текстом на странице, но не все они семантические. К примеру можно использовать span для стилизации текста, но информацию о содержимом браузеру он не передает.
h1, h2, h3, h4, h5 и h6:
используются для обозначения заголовков. Самый высокий уровень, или самым главным, заголовком является h1, за ним идут в порядке убывания важности заголовки уровня h2 — h6.
strong:
тег придает тексту важности, как правило, отображается полужирным шрифтом.
mark:
используется для выделения текста в определенном контексте. Например, он может быть использован, чтобы выделить каждое вхождение ключа поиска на странице результатов поиска.
cite:
тегом обычно помечают названия книг, песен, фильмов, тв-передач.
blockquote и q:
элементы используются для вставки цитаты из текста другого источника.
time:
тег может быть использован, чтобы сказать браузеру, поисковикам и другим устройствам, что конкретная часть контента представляет собой время и дату.
Медиа теги
HTML5 также включает в себя три тега, которые определяют тип медиа контента. Теги подсказывают браузеру как именно отображать данный контент. а так же они придают смысловое значение для контента.
audio:
Используется для добавления одного или нескольких аудио на страницу, отображается в виде аудио плеера.
video:
подобен аудио тегу, но используется для добавления видео контента в документ.
picture:
Элемент picture дает разработчикам возможность более гибко отображать картинку на странице. Часто используется в адаптивной верстке, так как может содержать сразу несколько картинок которые отображаются при определенных медиа условиях.
Корреляционные теги
Некоторые теги используются для создания связи между другими элементами. К примеру тег маркированного списка ul говорит браузеру что элементы li связаны и должны появляться в определенном порядке. Есть еще теги:
ol:
тег нумерованного списка, аналогичен с тегом ul
figure:
используется для группировки такого контента как картинки, графики, может содержать заголовок figcaption.
address:
описывает контактную информацию на странице. И связывает ее с автором статьи или страницы.
Если вы новенький в html то попробуйте применить все эти теги для создания семантической верстки страницы уже в следующем проекте. Не используйте элементы если не уверены нужен ли он там или нет, использование правильного тега очень важный момент. Лучше потратьте немного времени для глубокого его изучения. Это даст свои плоды в будущем.
Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.
В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.
Рисунок - Семантическая структура для HTML5 страницы.
DOCTYPE и meta теги в заголовке страницы
Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:
Заголовок страницы
Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега
. Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.</p><p>Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.</p><h3>Заголовок страницы</h3><p>Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.</p><p> <!-- Header страницы -->
<header>
<h1>Site title</h1>
</header>
</p><p>Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.</p><p> <!-- Header страницы -->
<header>
<h1>Site title</h1>
<p>site slogan</p>
</header>
</p><p><b>Замечание по поводу тега H1
</b></p><p>Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)</p><p>До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.</p><h3>Навигация на странице</h3><p>Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.</p><p> <!-- Главная Навигация по сайту -->
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</p><h3>Контент на странице</h3><p>Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если <a href="/chem-otlichaetsya-palka-dlya-selfi-ot-monopoda-esli-rech-idet-o-telefone/">речь идет</a> о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!</p><p> <!-- Основное содержимое страниц -->
<main>
...основной контент страницы...
</main>
</p><h3>Оформление статьи</h3><p>Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.</p><p>На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.</p><p> <main>
...
<!-- Статья -->
<article>
<!-- Шапка статьи если в шапке у нас больше чем заголовок -->
<header>
<!-- Заголовок статьи -->
<h1>Article title</h1>
<!-- Дата публикации статьи -->
<time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time>
</header>
<!-- Подзаголовок страницы -->
<h2>Article sub-title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.</p><h3>Сайдбар или колонка с виджетами</h3><p>Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:</p><p> <!-- Сайдбар -->
<div class="sidebar">
<!-- Виджет в сайдбаре -->
<aside>
<h1>Widget title</h1>
...
</aside>
<!-- Виджет в сайдбаре -->
<aside>
<h1>Последние записи</h1>
...
</aside>
<!-- Виджет в сайдбаре -->
<aside>
<h1>Популярные комментарии</h1>
...
</aside>
</div>
</p><h3>Тег section</h3><p>Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.</p><p>В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section> . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»</p><p>Пример использования тега section в списке с перечислением городов:</p><p> <h1>An Event Apart</h1>
<section>
<header>
<h2>Cities</h2>
</header>
<p>Join us in these cities in 2010.</p>
<section>
<header>
<h3>Seattle</h3>
</header>
<p>Follow the yellow brick road.</p>
<section>
<header>
<h3>Boston</h3>
</header>
<p>That"s Beantown to its friends.</p>
<section>
<header>
<h3>Minneapolis</h3>
</header>
<p>It"s so <em>nice</em>.</p>
<small>Accommodation not provided.</small>
</p><h3>Подвал сайта — Footer</h3><p>Подвал сайта оформляется тегом <footer></p><p> <!-- Подвал сайта -->
<footer>
<p class="copyright">© 2015 сайт Copyright</p>
</footer>
</p><h3>Заключение</h3><p>Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.</p><p>Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к <a href="/poiskovye-sistemy-interneta-princip-raboty-poiskovaya/">поисковым системам</a>, что скажется на более высоком рейтинге сайта в поисковой выдаче.</p><p>В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org</p><p><b>Важное замечание по использованию HTML5 тегов.
</b> В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.</p><p><b>Статьи и материалы</b></p>
<ul><li>Перевод
</li>
</ul><p>Я собираюсь сделать смелый прогноз. Еще долго после вас и меня HTML будет вокруг. Не только в миллиардах архивных страниц нашей эры, а как живые дыхательные органы. Слишком много сил, энергии и инвестиций пошло на разработку web-инструментов, протоколов и платформ, что бы все это было легко брошено.</p><p>Остановимся, что бы рассмотреть нашу ответственность. К несчастью, в истории мы связаны с разработкой важного инструмента нашей цивилизации, который будет использоваться для общения в течении десятилетий. И так когда мы направляем свои умы, праздно или всерьез, на улучшение HTML мы должны понимать на сколько далеко идущими могут быть последствия наших решений.<br><br>
HTML 5, W3C недавно удвоило усилия по формированию нового поколения HTML, за прошедший год или около того набрал значительные темпы. Это огромны проект, который охватывает не только структуру HTML, но и разбор моделей, модели обработки ошибок, DOM, алгоритмы для извлечения ресурсов, медиа-котента, 2D графики, шаблоны данных, модели безопасности, модели загрузки страницы, хранение данных на стороне клиента и многое другое.</p><p>Так же существуют изменения в структуре, синтаксисе и семантике HTML, некоторые из них описал Lachlan Hunt в статье "Обзор HTML 5 " ().</p><p>Но в этой статье давайте рассмотрим исключительно семантику HTML. Это то, чем я был заинтересован в течении многих лет и я считаю, что это очень важно для будущего HTML.</p><p>BBC недавно объявила о том, что они будут снижать долю микроформата hCalendar в своей программе телепередач, в пользу доступности и удобства abbr design pattern . Это свидетельствует о том, что мы, вне всяких сомнений, вытолкнули семантические возможности HTML далеко за те пределы, которые когда-либо предназначались, и действительно это возможно для языка. Мы просто исчерпали элементы и атрибуты HTML, которые способны повысить семантику документа. Если мы будем и далее хитрить с существующими конструкциями HTML, то будет возникать все больше таких проблем. Потому что HTML страдает от фундаментального деффекта, как семантический язык разметки - его семантика фиксирована и не расширяема.</p><p>Это не просто теоретическая проблема. Сотни тысяч разработчиков используют class и id для создания более семантической разметки (они так же используют их в качестве «крючков» для CSS стилей, но это другой вопрос). Почти всегда эти разработчики используют специальные словари, значения которых они сами составляют, а не значения существующих схем. Это псевдосемантическая разметка - в лучшем случае.</p><p>Многие страницы по всему интернету используют микроформаты, что бы добавить более структурированной семантики, чем при помощи обнищавшего набора элементов и атрибутов HTML . В этом случае значения использованные для атрибута class согласованы со словарями, иногда взяты из других стандартов, такие как vCard , иногда из недавно созданных словарей, где нет жесткого существующего стандарта (как в случае с hReview).</p><h2>Расширяемая семантика</h2>
Существует очень серьезная проблема, которую необходимо решить здесь. Нам нужны механизмы в HTML, которые четко и однозначно позволят разработчикам добавлять более выразительной семантики, а не псевдосемантики в их разметку. Это, пожалуй, является самой насущной задачей для HTML 5 проектов.<p>Но это не так просто, придумать механизм для создания большей семантики в HTML контенте: Существуют значительные ограничения, на любое решение. Возможно, самое большое из них - обратная совместимость. Решение, не может нарушить сотни миллионов устройств для просмотра использующихся сегодня, которые будут использоваться в ближайшие годы. Любое решение, которое не совместимо, не будет широко принято разработчиками, опасаясь потери читателей. Оно будет быстро засыхать на корню.</p><p>Решение должно быть так же вперед-совместимым. Не в том смысле, что оно должно работать в будущих броузерах - это задача разработчиков броузеров, но оно должно быть <b>расширяемым
</b>. Мы не можем ожидать какого-либо единого решения, которое мы сейчас разработаем, что бы решить все вообразимые и невообразимые потребности семантики в будущем. Мы можем разработать решения, которые могут быть расширены для удовлетворения будущих потребностей, по мере их возникновения.</p><p>Эти трудности, в совокупности представляют огромную проблему. Но в контексте языка, основные итерации которого проходят в десятилетние промежутки и важность которого, как глобальная платформа для коммуникаций имеет первостепенное значение, это проблема, которая должна быть решена.</p><p>Итак, как HTML 5 решит этот вопрос? HTML 5 вводит ряд новых элементов. Некоторые я назвал «структурные» - section, nav, aside, header и footer. Элемент dialog который по типу и содержанию схож с blockquote. Есть так же целый ряд элементов данных, как например meter , который представляет собой «скалярное измерение в пределах известного диапазона или дробное значение, например использование диска»; и элемент time{http://www.w3.org/html/wg/html5/#the-time}, который представляет собой дату и/или время.</p><p>Хоть эти элементы и могут быть полезными и, как выяснилось, вызвали определенный интерес, смогут ли они действительно решить эту проблему, мы определим с ограничениями совместимости снизу вверх и обратной совместимости.</p><p>Рассмотрим каждое препятствие</p><h2>Обратная совместимость</h2>
Как современные броузеры обрабатывают эти новые элементы, такие как section? Хорошо, последние <a href="/poisk-na-stranice-v-safari-ios-7-safari-skachat-besplatno-russkaya/">версии Safari</a>, Opera, Mozilla и даже IE7 все делают на странице следующим образом.<br><blockquote> <span><
h1
>
Top Level Heading</
h1
>
<br><
section
>
<br><
h1
>
Second Level Heading</
h1
>
<br><
p
>
this is text in a section element</
p
>
<br><
section
>
<br><
h1
>
Third Level Heading</
h1
>
<br></
section
>
<br></
section
>
</span></blockquote><br>
В начале это выглядит прекрасно. Но когда мы пытаемся задать стили CSS, например, для элемента section, который выглядит следующим образом: <p>Section {color: red}
<br>
… Большинству из упомянутых броузеров это удается, но IE7 (и тем более 6) нет.</p><p>Поэтому у нас есть проблема обратной совместимости с 75% броузеров, использующихся в настоящее время. Учитывая, период полураспад Internet Explorer, мы можем прогнозировать, что большинство пользователей будут использовать IE6 и IE7, даже через несколько лет.</p><p>Если HTML 5 вводит новые элементы, какова вероятность, что они будут использоваться подавляющим большинством разработчиков - учитывая то, что они не совместимы с большинством используемых броузеров?</p><p>Давайте обратимся к совместимости снизу вверх, это следующая проблема.</p><h2>Совместимость снизу вверх</h2>
Сначала мы поставим вопрос: «Зачем мы изобретать эти новые элементы?». Разумным ответом будет: «Потому что не хватает семантики в HTML, а добавление этих элементов мы увеличим семантику HTML, что не может быть плохим, или может?».<p>Добавляя эти элементы, мы рассматриваем необходимость повышения потенциала семантики HTML, но только в рамках узкой сферы. Независимо от того сколько элементов введем, мы всегда будем думать о добавлении большей семантике HTML. И добавив столько элементов, сколько нам хочется, мы не решим проблему. Нам не нужно добавлять определенные термины в словарь HTML, мы должны добавить механизм, позволяющий расширять семантику документа по мере необходимости. В технических терминах, мы должны сделать HTML расширяемым. HTML 5 не предлагает механизма расширяемости.</p><p>Таким образом HTML 5 выполняет функцию, которая убьет значительный процент современных броузеров и не позволяет добавить семантики языка вообще.</p><p>Остаюнся несколько вопросов о новых элементах. Откуда взяты названия новых элементов? Как было решено, что элемент навигации нужно называть «nav»? Зачем в навигации применяются термины page-level, site-level и meta-site-level?</p><p>Почему бы не принять существующий словарь, такой как DocBook ? Его словарь структуры документа более богат, он был разработан путем публикаций экспертов, на протяжении многих лет. Это не является аргументом в пользу DocBook, а дело в том, что чрезвычайно важная задача подготовки механизма обеспечения семантикой HTML проходит путь, уделяя малое внимание практике в работе которая началась более 30 лет назад. (Оригинал работы по GML начался в начале 1970-х годов)</p><h2>Некоторые идеи решения</h2>
И так, имее чрезвычайно важное значение нынешних усилий, у меня есть некоторые практические рекомендации, как решить эту проблему. Ну, я начал с одного.<p>Если добавление новых элементов не обсуждается, по крайней мере в этой дискуссии, атрибуты - другая логическая область HTML, сконцентрируемся на ней. В конце концов, мы на протяжении, почти, десяти лет использовали атрибуты class и id, как механизмы расширения семантики HTML. Многие разработчики уже знакомы с этим и чувствуют себя комфортно. Проект microformats показал, что существующих атрибутов не достаточно, для использования их как механизм расширения семантики HTML. Так что, если мы хотим использовать атрибуты для решения проблемы, мы должны ввести один или более новых атрибутов. Пред тем, как перейти к механики, того как это может работать, справедливо подвергнуть это предложение тем же требованиям, как и новые элементы в HTML 5. Самое главное во внедрении новых атрибутов - это будет ли обратная совместимость HTML. Если да, то обеспечивает ли это работоспособный механизм расширения семантики в HTML?</p><p>Давайте изобретем новый атрибут. Назовем его «structure», но название не важно. Мы можем использовать его так:</p><p> <div structure="header">
<br>
Давайте посмотрим, как наши броузеры это оценят.</p><p>Конечно, все наши броузеры обработают следующий элемент CSS.</p><p>Div {color: red}
<br>
А как насчет этого:</p><p>Div {font-weight: bold}
<br>
На самом деле, почти все броузеры, включая IE7, обработают стиль div с атрибутом structure, даже если нет такого атрибута. К сожалению, наше счастье изчезает, потому что IE6 нет. Но мы можем использовать этот атрибут в HTML и все существующие броузеры распознают его. Мы даже можем использовать стили CSS для нашего HTML, с использованием атрибута во всех современных броузерах. И если мы хотим обойти старые броузеры, мы можем добавить class, со значением стиля. В сравнении с HTML 5 решением, которое добавляет новые элементы, не работающие в Internet Explorer 6 или 7, мы видим, что это, безусловно, более обратно совместимое решение.</p><h2>Расширяемость через атрибуты</h2>
Вместо новых элементов, HTML 5 должна принять ряд новых атрибутов. Каждый из этих атрибутов будет относиться к категории или типу семантики. Например, как я уже подробно изложил в другой статье , HTML включает в себя: структурную семантику, риторическую семантику, ролевую семантику (принятую из XHTML) и другие классы и категории семантики.<p>Эти новые атрибуты, могут быть использованы как атрибут class: для придания элементу семантики, описывать характер элемента или для метаданных элемента.</p><p>Это не отличается от ролей атрибута в XHTML , где мы имеем один атрибут для всех элементов семантики, мы должны определить различные типы семантики элемента и разделить их.</p><p>Например XHTML атрибут role работает следующим образом:</p><blockquote> <span><
ul
role
="navigation sitemap"
>
<br><
li
href
="downloads"
>
Downloads</
li
>
<br><
li
href
="docs"
>
Documentation</
li
>
<br><
li
href
="news"
>
News</
li
>
<br></
ul
>
</span><p>* This source code was highlighted with Source Code Highlighter
.
</p></blockquote><br>
Значение атрибута role является разделенное пространство списка из слов определенного стандартным словарем или заданным словарем.<p>Почему бы не принять атрибут role, как есть? Ведь существуют другие виды семантики, для которых определение роли не применимо. Например: </p><p> <p rhetoric="irony">He’s a fantastic person.</p>
<br>
Это демонстрирует теоретический тип семантики - «риторический», который может быть использован для разметки документа риторического характера. Этот элемент явно не играет роли иронии в документе. Наоборот, содержит в себе элементы иронии.</p><p>Вот еще один пример. Все более очевидно, что в HTML не хватает представления машино-читаемого значения понятным для человека, например даты. Это лежит в основе проблемы BBC с микроформатом hCalendar, о ней мы говорили ранее. Хотя May Day next year действительно не имеет смысла, зато по аналогии May Day next year будет.</p><p>Опять же, когда мы используем конкретный термин «equivalent» в качестве атрибута или какой либо другой для обозначения такого рода семантики, это не является проблемой. Важно отметить, что это не так просто, как использование атрибута class или role, где в один элемент помещается целый набор элементов семантики информации. Для, должным образом, расширяемого решения, которое обеспечит обратную совместимость и достаточную гибкость, стоит исследовать в этом направлении.</p><p>Я назвал этот раздел «Некоторые идеи решения», поскольку значительный объем работы необходимо сделать, для того, что бы создать действительно работоспособное решение. Открытые вопросы включают в себя следующее.</p><ul><li>сколько различных семантических атрибутов должно быть. Будут ли эти категории расширяемыми, если да, то каким образом?</li>
<li>Каким образом определять словарь?</li>
<li>Мы просто изобретаем термины, которые мы хотим, почти тем же образом, как и разработчикки использовали значение class, или возможные значения должны быть определены стандартизированной спецификацией?</li>
<li>Если у нас есть конфликт, между двумя словарями, например двум идентичным терминам дают определения два различных словаря, как это решить?</li>
<li>Нужно ли пространство имен или же существует другой механизм?</li>
</ul><p>Вместо того, что бы торопится с ответом на эти вопросы, я выдвинул на свет вопросы которые необходимо решить и начать диалог. Разветвление и размах решений сделаных в HTML 5, слишком велик для принятия этих решений, необходимо внести осведомленность о лингвистике, семантике, семиотике и смежных областях.</p><p>Надеюсь понятно, что просто внесение новых элементов в HTML не является решением проблемы расширения семантики в HTML.</p><p>Давайте не спешить с легким решением - с изменением «климата» все это обременит наших внуков проблемой, как и сейчас. По крайней, мере давайте оставим им максимально хороший HTML, на сколько возможно.</p><p>Теги:
</p><ul><li>html 5</li>
<li>xhtml</li>
<li>семантика</li>
<li>браузеры</li>
</ul>
Добавить метки
<p>Подготовил: Евгений Рыжков
Дата публикации: 22.01.2010</p>
<p>У тебя в распоряжении 6 различных тегов для вставки заголовков — h1, h2, h3, h4, h5, h6 (h сокращенное от англ. heading — заголовок). Каждый из них имеет определенный вес (важность): h1 — имеет наибольшую важность, h6 — наименьшую. А вот как эти заголовки правильно использовать — одна из самых спорных тем. Давай попробуем копнуть глубже в тему и ответить на следующие вопросы:</p>
<ol><li>зачем вообще нужно грамотное использование заголовков в верстке?</li>
<li>какова правильная иерархия заголовков в HTML?</li>
<li>сколько и каких заголовков должно быть на странице?</li>
<li>а если заголовок картинкой?</li>
<li>нужен ли title заголовку?</li>
</ol><h2>Зачем вообще нужно правильное использование заголовков в верстке?</h2>
<p>Во-первых, это дает возможность быстро сориентироваться на странице, на которой зачастую море информации. Это как в журнальной статье, быстро пробегая глазами по заголовкам, ты сразу отмечаешь на чем стоит остановиться. <a href="/mvt-v-tys-kvt-edinicy-izmereniya-energii-moshchnosti-i-ih-pravilnoe-ispolzovanie/">Правильное использование</a> тегов заголовков даст возможность не только визуально ориентироваться на странице (этого можно добиться используя любые теги совместно с таблицами стилей), но и даст возможность так же уверенно находить <a href="/nuzhen-li-lyudyam-iphone-chem-aifon-luchshe-drugih-telefonov/">нужное людям</a> с <a href="/vozmozhnost-kommentirovaniya-etoi-fotografii-ogranichena-v/">ограниченными возможностями</a>, которые используют голосовые браузеры и устройства чтения Брайля. Плюс не забываем, что не все устройства хорошо поддерживают <a href="/17-ponyatie-kaskadnyh-tablic-stilei-css/">каскадные таблицы</a> стилей (например, <a href="/chto-delat-kogda-ustroistvo-ne-podderzhivaet-ochistka-mobilnogo-ustroistva/">мобильные устройства</a>). А еще существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у opera .</p>
<p>Во-вторых, поисковым роботам будет проще работать со страницей, проще выделить главное и второстепенное, а значит больше шансов попасть в топ.</p>
<p>В-третих, четкая <a href="/logicheskaya-set-logicheskie-i-neironnye-seti-logicheskaya/">логическая структура</a> документа — это шаг к повышению качества, понятности, доступности информации, это шаг к новому уровню предоставления информации — Семантический веб.</p>
<p>Спецификации гласят следующее:</p>
<blockquote style="background:url(../../assets/images/lessons/semantic/w3c.png) 0 10px no-repeat; padding-left: 100px">Заголовки на странице должны иметь четкую иерархию по уровням, т.е. h2 должен следовать после h1, h3 после h2 и т.д. Пропуск уровней в последовательности заголовков может создать впечатление, что структура документа не была должным образом продумана или что определенные заголовки были выбраны для их визуального исполнения, а не их значения.
</blockquote>
<p>Google говорит практически тоже самое:</p>
<blockquote style=" background:url(../../assets/images/lessons/semantic/google.png) 0 120px no-repeat; padding-left: 100px;">
Не советуем:
<ul><li>использовать теги заголовков там, где больше подошли бы теги <em> или <strong></li>
<li>беспорядочно переключаться от заголовков одного размера к другому</li>
</ul><p>Не разбрасывайтесь заголовками. Используйте заголовки только там, где они действительно необходимы. Слишком <a href="/kak-skryt-bolshoe-kolichestvo-druzei-vk-instrukciya-kak-skryt-druga/">большое количество</a> заголовков на странице дезориентирует пользователя и затрудняет понимание того, где заканчивается одна тема и начинается другая.</p>
<ul><li>засорять страницу лишними заголовками,</li>
<li>использовать заголовки только для стилизации текста, без определения структуры страницы.</li>
</ul></blockquote>
<ul><li>использовать заголовки только там, где действительно заголовки</li>
<li>соблюдать четкую иерархию заголовков (h2, следует за h1. h3 после h2 и т.д.). Желательно не нарушать четкую последовательность уровней</li>
<li>желательно чтобы первый заголовок (по коду) на странице был h1</li>
<li>не следует неупорядоченно переключаться от заголовков одного размера к другому</li>
</ul><p>соблюдай четкую иерархию вложенности заголовков</p>
<h2>Сколько и каких заголовков должно быть на HTML странице?</h2>
<p>Четких каких-либо правил в спецификациях или рекомендациях от поисковиков нет. Некоторые гуру рекомендуют придерживаться следующей схемы:</p>
<ul><li>h1 — один на странице</li>
<li>h2 — 2-3</li>
<li>h3 — 4-6</li>
<li>и т.д.</li>
</ul><p>Такой порядок имеет смысл: h1 — это тема страницы (статьи), поэтому должен быть один (это особенно важно при <a href="/kak-sdelat-post-s-knopkoi-podpisatsya-vk-storiz-i/">поисковой оптимизации</a>). У статьи может быть несколько подтем, как правило в рамках одной темы их немного, потому заголовков второго уровня немного на странице. И так далее с остальными.</p>
<p>Может возникнуть вопрос: как быть со страницами анонсов новостей (статей), где по иерархии должно быть много заголовков второго уровня? В таких случаях использование заголовков остается на усмотрение верстальщика: сделать много заголовков второго уровня или пропустить один-два уровня. У меня в приоритетах соблюдать иерархию, поэтому у меня будет много заголовков второго уровня.</p>
<p>Рассмотрим несколько примеров использования заголовков на веб страницах:</p>
<p>На главных страницах сайта основной заголовок принято считать название компании или сайта. Поэтому часто можно встретить сайты, где на <a href="/yandeks-glavnaya-stranica-sdelat-startovoi-sohranit-avtomaticheski/">главной странице</a> логотип является заголовком первого уровня:</p>
<h2>Если заголовок картинкой</h2>
<p>Иногда для заголовков дизайнеры используют красивые (нестандартные) шрифты. Если решено было делать их картинками, тогда с помощью CSS прячем изображения в фон. Текст заголовка дублируем текстом (для устройств не поддерживающих CSS, голосовых браузеров и в некоторой степени для поисковых роботов) и прячем его (текст). Такая же техника применяется для логотипа на главной:</p>
<p> <h1>Фирма Рога и копыта</h1></p>
<p>H1 {
width: 250px;
height: 100px;
background: url(../../training/semantic-html/path-to/logo.png);
text-indent: -9999px; /* прячем текст за пределами заголовка, прием предложен Джеффри Зельдманом */
overflow: hidden;
}</p>
<h2>Нужен ли атрибут title заголовку?</h2>
<p>Атрибут title предназначен, чтобы дать пользователю дополнительную (расширенную) информацию об объекте. Имеет смысл использовать <a href="/tema-sozdanie-arhiva-dannyh-izvlechenie-dannyh-iz-arhiva-atributy-faila-i/">данный атрибут</a> для тех заголовков, когда действительно есть чем дополнить и title даст дополнительную <b>полезную
</b> информацию пользователю. Такое использование атрибутов title сделает сайт более удобным и понятным, а на это обращают внимание и <a href="/goda-poiskovye-roboty-otnosyatsya-luchshe-poiskovoi-robot-google/">поисковые роботы</a>. С другой стороны, повсеместное использование атрибута title, которые не несут дополнительное <a href="/v-telefone-s-androidom-plei-market-prosit-aktivirovat-promo-kod-kak-i-gde/">полезной информации</a> могут негативно сказаться на удобстве и позициях в выдачах поисковиков. Представь себе, ты используешь <a href="/golosovoi-poisk-yandeks-onlain-na-vremya-vklyuchenie-funkcii-golosovogo-poiska-v/">голосовой браузер</a>, который тебе прочитал заголовок. Тебе показалось этого мало и ты просишь прочитать и title. Что ты подумаешь о разработчиках сайта, если содержимое title окажется идентичным тексту заголовка? Поэтому использовать атрибут title (как и вообще любой другой элемент ли атрибут) нужно обдуманно.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
<div style="font-size:0px;height:0px;line-height:0px;margin:0;padding:0;clear:both"></div>
</div>
</article>
<style>
.VashAdaptTest {
width: 100%;
height: 300px;
}
@media(min-width: 500px) {
.VashAdaptTest {
width: 100%;
height: 300px;
}
}
@media(min-width: 800px) {
.VashAdaptTest {
width: 100%;
height: 300px;
}
}
</style>
<div id="share_button">
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus"></div>
</div>
<div class='yarpp-related'>
<div class="title">Похожие статьи</div>
<ul class="related-items">
<li> <img src="/uploads/ed2b1a9e6ad84f6d497c8b0f38b86f90.jpg" width="120" height="120" alt="Первые действия при появлении ошибки «Устройство USB не опознано" / loading=lazy> <a href="/yusb-ne-opoznano-chto-delat-pervye-deistviya-pri-poyavlenii/">Первые действия при появлении ошибки «Устройство USB не опознано</a> </li>
<li> <img src="/uploads/ce49988f17ebc16b6b63b6bd47a23c7f.jpg" width="120" height="120" alt="Недостаточно патриотичный" / loading=lazy> <a href="/aleksandr-bon-vedushchii-biografiya-nedostatochno-patriotichnyi-radio-maximum/">Недостаточно патриотичный</a> </li>
<li> <img src="/uploads/653067dd6cbb221291259a8a48964503.jpg" width="120" height="120" alt="Компьютер не видит флешку через USB или неопознанное устройство" / loading=lazy> <a href="/komp-ne-raspoznaet-usb-ustroistvo-kompyuter-ne-vidit-fleshku-cherez-usb-ili/">Компьютер не видит флешку через USB или неопознанное устройство</a> </li>
<li> <img src="/uploads/ffb85025854ebd2c2769fc7f30b7c382.jpg" width="120" height="120" alt="Использование эквалайзера Windows Как настроит эквалайзер на windows 7" / loading=lazy> <a href="/skachat-na-kompyuter-horoshii-ekvalaizer-muzyki-na-russkom-yazyke/">Использование эквалайзера Windows Как настроит эквалайзер на windows 7</a> </li>
</ul>
</div>
</div>
</div>
<aside id="sidebar">
<div id="sidebar_wrap">
<div class="section" id="category_block">
<div class="section_title">РУБРИКИ САЙТА:</div>
<ul id="cats">
<li class="cat-item cat-item-17"><a href="/category/internet/">Интернет</a></li>
<li class="cat-item cat-item-17"><a href="/category/programs/">Программы</a></li>
<li class="cat-item cat-item-17"><a href="/category/instructions/">Инструкции</a></li>
<li class="cat-item cat-item-17"><a href="/category/browsers/">Браузеры</a></li>
<li class="cat-item cat-item-17"><a href="/category/windows-10/">Windows 10</a></li>
<li class="cat-item cat-item-17"><a href="/category/android/">Android</a></li>
<li class="cat-item cat-item-17"><a href="/category/ios/">Ios</a></li>
<li class="cat-item cat-item-17"><a href="/category/communication/">Связь</a></li>
</ul>
</div>
<div class="section section-comments">
<div class="section_title">Последние статьи:</div>
<div class="last-comments">
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-03-06 02:07:19</div>
<div class="last-comments__item-text">Microsoft.</div><a href="/razreshenie-ekrana-htc-sensation-xe-htc-sensation-xe---tehnicheskie-harakteristiki/" class="last-comments__item-link" title="HTC Sensation XE - Технические характеристики">HTC Sensation XE - Технические характеристики</a> </div>
</div>
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-02-29 02:09:14</div>
<div class="last-comments__item-text">Ios.</div><a href="/kak-eto-sdelano-kak-eto-rabotaet-kak-eto-ustroeno-kak-eto-sdelano-kak/" class="last-comments__item-link" title="Как это сделано, как это работает, как это устроено Видео: как работает Picaso Builder">Как это сделано, как это работает, как это устроено Видео: как работает Picaso Builder</a> </div>
</div>
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-02-29 02:09:14</div>
<div class="last-comments__item-text">Word.</div><a href="/ne-rabotaet-internet-dns-pochemu-dns-server-nedostupen-kak/" class="last-comments__item-link" title="Почему DNS-сервер недоступен: как решить проблему">Почему DNS-сервер недоступен: как решить проблему</a> </div>
</div>
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-02-25 02:16:19</div>
<div class="last-comments__item-text">Интернет.</div><a href="/posobie-po-rabote-s-kompyuterom-chtoby-nauchitsya-s-nulya/" class="last-comments__item-link" title="Чтобы научиться с нуля работатьна компьютере и ноутбуке, нужны:хороший самоучитель и ваше желание">Чтобы научиться с нуля работатьна компьютере и ноутбуке, нужны:хороший самоучитель и ваше желание</a> </div>
</div>
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-02-10 02:54:49</div>
<div class="last-comments__item-text">Microsoft.</div><a href="/pgp-na-strazhe-elektronnoi-korrespondencii/" class="last-comments__item-link" title="PGP на страже электронной корреспонденции">PGP на страже электронной корреспонденции</a> </div>
</div>
</div>
</div>
<div class="section widget_text" id="text-4">
<div class="textwidget">
</div>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div id="footer_logo">
<div id="footer_logomob"><img src="/img/logo.png" alt="Все о современной технике. Поломки. Техника. Интернет. Ошибки. Windows" loading=lazy></div>
</div>
<div id="footer_copyright">
<p>© lab-music.ru, Все о современной технике. Поломки. Техника. Интернет. Ошибки. Windows </p>
<p></p>
</div>
<nav id="footer_nav">
<ul>
<li><a href="/sitemap.xml">Карта сайта
</a></li>
</ul>
</nav>
</footer>
</div>
</div>
</body>
</html> 