Верстка \ HTML5

Быстрая предварительная загрузка Hero-изображений

От автора: предварительная загрузка позволяет как можно скорее сообщить браузеру о критических ресурсах, которые вы хотите загрузить, до того, как они будут найдены в HTML. Если вы оптимизируете Отображение наибольшего контента (LCP), предварительная загрузка может изменить правила игры для повышения приоритета загрузки поздно обнаруживаемых Hero-изображений и ресурсов, загружаемых через JavaScript.

Продолжить чтение

Верстка \ HTML5

Почему вам стоит выбрать элемент HTML5 article, а не section

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

Продолжить чтение

Верстка \ HTML5

Цитирование в HTML

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

Продолжить чтение

Верстка \ HTML5

Доступность форм: Проблемы с заполнителями placeholder HTML

От автора: на днях я заполнял регистрационную форму онлайн-экзамена. Они попросили меня ввести мой адрес офиса, домашний адрес, рабочий телефон и домашний телефон. Я заполнил всю информацию без каких-либо проблем. Однако, когда я захотел проверить, ввел ли я все данные в правильных полях, текст «Адрес офиса» и тексты для других полей исчезли. Что мне было делать? Нужно ли повторно вводить данные в поле, чтобы убедиться, что я прав? К сожалению, это единственный способ, который отнимает много времени и расстраивает.

Продолжить чтение

Верстка \ HTML5

Выделение текста с помощью HTML-тега mark

От автора: если вам когда-либо понадобится выделить текст внутри абзаца, лучше используйте тег mark. Это HTML-версия желтого маркера. Я всегда использовал тег span с некоторыми CSS-стилями, не понимая, что существует более семантический вариант. HTML5 полон всяких вкусностей, не правда ли?

Продолжить чтение

Верстка \ HTML5

Валидация формы с HTML5 и регулярными выражениями

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

Продолжить чтение

Верстка \ HTML5

Извлечение текста из контента с использованием HTML Slot, HTML Template и Shadow DOM

От автора: названия глав в книгах, цитаты, ключевые слова в статье, статистика в отчете — это все типы контента, который может быть выделен и превращен в краткое изложение того, что важно. Например, вы видели, как Business Insider предоставляет ключевые моменты статьи перед тем, как перейти к содержанию?

Продолжить чтение

Верстка \ HTML5

Как у вас обстоят дела с figure в HTML 5?

От автора: элементы figcaption и figure в HTML 5 предназначены для создания значимой структуры разметки, что обеспечивает описательную метку для части контента, которая имеет отношение к текущему документу, но не жизненно важна для его понимания. Чтобы получить более конкретную информацию, давайте рассмотрим эти элементы отдельно.

Продолжить чтение

Верстка \ HTML5

Элемент dialog HTML

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

Продолжить чтение