Верстка \ HTML5

Как загрузить адаптивные изображения с imagesize и imagesrcset

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

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

Верстка \ HTML5

Оптимизация веб-сайтов с помощью новых медиаформатов Webp и WebM

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

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

Верстка \ 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 предназначены для создания значимой структуры разметки, что обеспечивает описательную метку для части контента, которая имеет отношение к текущему документу, но не жизненно важна для его понимания. Чтобы получить более конкретную информацию, давайте рассмотрим эти элементы отдельно.

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