HTML

<table> — один из основных элементов HTML, который используют для отображения данных (текста, изображения или другого элемента) в ячейках на странице. Таблица состоит из строк и столбцов.

Основные теги, используемые при создании таблицы:

• <table> — определяет начало и конец таблицы. Всё содержимое таблицы должно находиться между <table></table>.
• <thead> — определяет заголовок таблицы. Заголовок может содержать одну или несколько строк, в которых могут использоваться теги <th> для определения заголовков столбцов.
• <tbody> — определяет тело таблицы. Тело содержит одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
• <tfoot> — определяет нижний колонтитул таблицы. Колонтитул может содержать одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
• <tr> — определяет строку таблицы. Каждая строка должна находиться между тегами <tbody>, <thead> или <tfoot>.
• <th> — определяет заголовок столбца или строки таблицы. Используется внутри тегов <thead> и <tr>.
• <td> — определяет содержимое ячейки таблицы. Используется внутри тегов <tbody>, <tfoot> и <tr>.
• <caption> — определяет заголовок таблицы, который будет размещен над таблицей. Используется внутри тега <table>.

В стандарте HTML появился новый семантический элемент <search>. Он обозначает раздел страницы, который используется для поиска или фильтрации. Он должен содержать элементы управления формой (например, текстовые поля, выпадающие меню, кнопки и так далее), а область поиска или фильтрации может быть любой: от одного документа до всего интернета.

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

Критерии доступности сайта определяются рядом стандартов 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> и затем стилизуют так, чтобы они стали похожими на кнопки.