Верстка \ HTML5

Валидация форм с использованием HTML5 и Regex

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

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

Верстка \ HTML5

Полное руководство по электронным письмам в формате HTML

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

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

Верстка \ HTML5

7 полезных атрибутов HTML, о которых вы, возможно, не знаете

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

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

Верстка \ HTML5

Почему необходимо использовать тег picture вместо тега img

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

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

Верстка \ 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

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

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