HTML

Доступность сайта означает, что каждый человек, включая людей с ограниченными возможностями, может выполнить любое действие на сайте. При этом неважно, использует пользователь клавиатуру или любое другое устройство.

Критерии доступности сайта определяются рядом стандартов Web Content Accessibility Guidelines или WCAG, которые регулируют, какие функциональные возможности должны быть доступны на сайте.

Спецификация — это совокупность всех правил языка программирования, собранных в единый документ. Спецификации создаются в специальных организациях — W3C, WHATWG, Ecma International, OpenJS Foundation и других.

Браузеры на разных движках могут поддерживать или не поддерживать определённые HTML-элементы, по-своему рендерят стили и интерпретируют поведение JavaScript. Поэтому и сайты в них отображаются по-разному.

Например, у Chrome, Firefox и Safari отличается рендеринг шрифтов и стили по умолчанию.

Отличий много, но добиваться полного сходства необязательно. Главное — проверить, что сайт во всех браузерах работает корректно и соответствует макету.

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

В статье рассмотрим три распространённых формата: JPEG, PNG и WebP. Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать.

Добавление изображений на страницу — типовая задача веб-разработчиков. Её можно выполнить разными способами: вставить картинку в разметку через теги <img>, <svg> или использовать в CSS с помощью background-image.

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

Что нужно, чтобы писать код правильно и не допускать ошибок? Знать самые распространённые ошибки и не совершать их.

Чтобы сверстать простой сайт, необязательно знать все HTML-теги. Для начала можно изучить самые популярные — их достаточно для создания примитивной страницы с текстом, ссылками, картинками, подключёнными стилями и скриптами.

Мы будем рассматривать популярность тегов, опираясь на исследование Николая Шабалина — автора профессиональных курсов HTML Academy. Он проанализировал структуру 55 тысяч сайтов и посмотрел, из чего они состоят: какие теги встречаются часто, а какие — редко.

Для создания кнопок используется тег <button>. Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

<button type="button">Я кнопка</button>

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name, disabled и type.

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

<button type="button" name="popup-button">Я кнопка</button>

Атрибут disabled блокирует доступ к кнопке.

<button type="button" disabled>Я заблокированная кнопка</button>

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

button — значение по умолчанию. Означает, что элемент — обычная кнопка. Она может добавлять товары в корзину или избранное, переключать слайдеры или закрывать всплывающие окна.

submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.

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

Полный список атрибутов

Иногда на сайте встречаются элементы вроде кнопок «Перейти в каталог», «Читать далее» или кнопок соцсетей. На самом деле это ссылки. Их создают с помощью <a href="">Какой-то текст</a> и затем стилизуют так, чтобы они стали похожими на кнопки.

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

Ссылки в большой статье могут потеряться, а вот красочная картинка привлекает больше внимания.

Чтобы вставить изображение на сайт, используют тег <img>. У тега есть четыре обязательных атрибута:

• src — для указания пути до файла с картинкой и его отображения на экране;
• width и height — размеры изображения. Эти атрибуты позволяют резервировать место для изображения, чтобы убрать «прыжки» страницы пока изображение грузится;
• alt — альтернативное описание.

<img src="images/cat.jpg" width="600" height="200" alt="Котик">

Для создания ссылок используется тег <a>. Чтобы сделать картинку ссылкой, нужно разместить её внутри тега <a>:

<a href="https://htmlacademy.ru">
  <img src="images/cat.jpg" width="600" height="200" width="600">
</a>

Адрес ссылки задаётся в формате URL с помощью атрибута href.

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

Не бывает единого шаблона формы — под каждую задачу нужно составлять что-то своё. Например, форма для отправки сообщений будет отличаться от формы для ввода данных банковской карточки.

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

<form action="#" method="post" target="_blank">
  <h2>Шаблон формы</h2>
  <fieldset>
    <legend>Персональные данные</legend>
    <ul>
      <li>
        <label for="name">Имя:*</label>
        <input type="text" name="name" placeholder="Иван Иванов" id="name" required>
      </li>
      <li>
        <label for="age">Возраст:</label>
        <input type="number" name="age" placeholder="27" id="age" min="0" max="125">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Контакты</legend>
    <ul>
      <li>
        <label for="email">E-mail:*</label>
        <input type="email" name="mail" placeholder="ivanov@gmail.com" id="email" required>
      </li>
      <li>
        <label for="number">Телефон:*</label>
        <input type="tel" name="phone" placeholder="+7 000 000-00-00" id="number" maxlength="21" required>
      </li>
    </ul>
  </fieldset>
  <div>
    <label for="message">Увлечения</label>
    <textarea name="comment" placeholder="Расскажите обо всём, что для вас важно" id="message"></textarea>
  </div>
  <fieldset>
    <legend>Учёба</legend>
    <ul>
      <li>
        <input type="checkbox" name="intensive-courses" id="courses" checked>
        <label for="courses">Прохожу курсы</label>
      </li>
      <li>
        <input type="checkbox" name="books" id="books">
        <label for="books">Читаю книги</label>
      </li>
      <li>
        <input type="checkbox" name="video" id="video">
        <label for="video">Смотрю видео</label>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Предпочтения</legend>
    <ul>
      <li>
        <input type="radio" name="preference" id="front" value="frontend" checked>
        <label for="front">Фронтенд-разработка</label>
      </li>
      <li>
        <input type="radio" name="preference" id="back" value="backend">
        <label for="back">Бэкенд-разработка</label>
      </li>
    </ul>
  </fieldset>
  <div>
    <button type="submit">Отправить</button>
    <p>* — Обязательные поля</p>
  </div>
</form>