HTML

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

Давайте разберёмся, какие ещё преимущества дают дизайн-системы, и как эти системы создавать.

Где-то в параллельной вселенной существуют идеальные процессы и идеальные инструменты, которые позволяют создавать дизайн-макеты без единого недочета и упущения.

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

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

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

Есть много способов сэкономить время и упростить жизнь разработчика. Но они кажутся такими сложными и непонятными, что знакомство с ними постоянно откладывается. И зря: сегодня мы расскажем, как автоматизировать работу, используя вспомогательные инструменты.

Шаблонизаторы для HTML — один из таких способов.

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

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

Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.

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

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

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

Давным-давно почти все делали сайты и не переживали о том, что у них внутри. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

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

Есть несколько способов указывать пустые ссылки. Рассмотрим, чем грозит использование того или иного способа.

<a href="">Каталог</a>

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

<a href="#">Каталог</a>

Изменяет адрес страницы, добавляет в конце #. Если было htmlacademy.ru, то после клика станет htmlacademy.ru/#. Прокручивает страницу к самому верху сайта. Если ссылка была в футере, то сайт прокрутится до самого начала. Это не всегда желательное поведение, поэтому этот вариант тоже отбросим.

<a href="##">Каталог</a>

или

<a href="#!">Каталог</a>

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

<a href="#no_scroll">Каталог</a>

Можно сделать полноценную якорную ссылку, но при этом без элементов с id="noscroll". Этот способ работает во всех браузерах, не скроллит страницу к началу, но меняет ссылку, добавляя #noscroll в конец адреса.

<a href="javascript:void(0);">Каталог</a>

Достаточно старый способ, который благодаря JavaScript буквально просит ссылку ничего не делать. Правильнее было бы написать javascript: undefined;, но этот вариант длиннее, поэтому придумали более короткую замену void (0), который также возвращает undefined. Этот вариант был создан ещё в то время, когда JavaScript инлайнили в разметку. Ссылка в этом случае никуда не прокручивается, что лучше, чем в предыдущем варианте. Сам же метод позволял создать AJAX-запрос без перезагрузки страницы. Например, при открытии попапа делается запрос у сервера на его контент, затем попап открывается, и отрисовывается полученный контент от сервера.

<a href="bla-bla-bla" onclick="return false;">Ссылка</a>

На самом деле, когда программистам нечем заняться, они начинают придумывать новые способы. Просто потому что они могут. В этом методе ничто никуда не прокручивается и не прыгает. В href можно добавить что угодно, а в JavaScript не добавлять новый onclick. Хотя раньше это было важно. Сейчас новое событие можно добавить с помощью addEventListener.

<a>Каталог</a>

В новой спецификации разрешили вообще не указывать href, если он не нужен. Ссылка как будто превращается в <span>: удаляется стандартное подчёркивание снизу и синий цвет, указанный по умолчанию. С такой ссылки удаляются состояния: active, focus, так как с ней нельзя взаимодействовать. Это очень хорошо, так как ссылки, действительно, пока нет. Но при этом пользовательская стилизация, которую пишете вы, продолжает работать. В целом, можно сказать, что это самый ленивый и правильный вариант, однако он не всем подходит.

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

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

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

Предупреждение: статья не претендует на академическую полноту, но точно поможет что-нибудь не упустить.