HTML: Семантический WEB
С ростом количества страниц в интернете появилась проблема прочтения информации не только человеком, но и роботами. Если человек отделяет смысловые блоки друг от друга, видит расположение и может быстро найти нужный ему участок страницы, то робот видит всю страницу в виде текста и не может самостоятельно разбить её для анализа смысла информации.
Эта проблема остро заявила о себе с начала нового тысячелетия, когда количество страниц в интернете неуклонно стало расти, и поисковые роботы (Google, Bing, Yandex, Yahoo) имели малые возможности для корректного анализа каждой страницы в интернете, из-за чего веб-мастера специально указывали популярные, на то время, ключевые слова на сайте, чтобы подняться в результатах поиска.
Сейчас появились возможности показать роботам смысл (семантику) HTML-страницы. Благодаря этому при запросе в поисковую систему можно увидеть не только список ссылок на сайты, но и конкретную информацию, например рецепт пирога, маршрут до нужной улицы, контакты организации.
Правильная семантика также позволяет устройствам правильно воспринимать части веб-сайта. Например, режим чтения в телефонах старается отбросить не связанные с контентом блоки, чтобы оставить только смысловую часть.
Существуют две реализации семантического веба:
На основе микроразметки. Это специальные атрибуты, которые добавляются в HTML-разметку и помогают роботам найти нужную информацию. Микроразметка используется чаще всего, так как имеет множество возможностей и полей для разметки
Используя стандарт HTML5. В стандарте появилось множество тегов, которые помогают роботам анализировать информацию, находить логические связи между блоками (или понимать, что их нет), искать необходимые части для корректного отображения на устройствах для чтения
Хотя стандарт HTML5 и не вытеснил микроразметку, ввиду меньших возможностей, его использование вместе с микроразметкой позволяет роботам корректнее обрабатывать сайт и находить в нём логические блоки.
Пример семантической разметки на HTML5
<main> <!-- Определение основной части страницы -->
<article> <!-- Определение статьи -->
<header> <!-- Заголовочная информация статьи -->
<h1>Название статьи</h1>
<img src="article.png" alt="Заголовок статьи">
</header>
<p>Текст нашей статьи</p>
<footer> <!-- «Подвал статьи» с указанием автора и даты -->
<address> <!-- Информация об авторе статьи -->
<p>Автор: Дмитрий</p>
<p>Email: dmitry@test.test</p>
</address>
<time datetime="2019-07-27">27 июля</time> <!-- Дата написания статьи -->
</footer>
</article>
</main>
Задание
Создайте разметку статьи, как в примере выше. Данные внутри могут быть произвольными
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.