HTML

Не все 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-департамента. Что можно сделать самостоятельно и быстро, чтобы проверить, что всё работает как задумано.

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

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

Самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными. Достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.

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

Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.

Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.

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

Alt — обязательный атрибут тега <img>. Это альтернативное описание для изображений, которые не видят пользователи:

• из-за медленного соединения;
• из-за неправильного пути или имени файла в атрибуте src;
• так как пользуются скринридерами.

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

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

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

Именно этим и займёмся — создадим SVG-диаграмму и легенду к ней, а затем стилизуем всё с помощью CSS и в самом конце добавим немного JavaScript-магии. Вам понадобятся базовые знания HTML, CSS и JavaScript. Если их пока нет — самое время пройти бесплатные тренажёры, а после этого вернуться к туториалу.