Советы по HTML: абзацы, заголовки, формы и SVG-иконки
В сегодняшнем посте мы публикуем несколько рекомендаций по работе с HTML, которые помогут сделать ваш код более качественным, а сайты, соответственно, — более удобными и доступными для пользователей. Этими советами по верстке недавно поделилась Belén Albeza — веб-разработчик в Mozilla Developer Relations. Мы адаптировали её рекомендации для наших читателей и немного дополнили их. В статье есть полезная информация как для новичков, так и для более опытных верстальщиков. Поехали!
Советы по тексту
АБЗАЦЫ
Как правило, когда мы пишем текст, то делим его на абзацы. В HTML для этого предусмотрен тег
(paragraph). Не используйте тег
с целью изобразить абзацы, поскольку он предназначен для другого.
Не рекомендуется:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Рекомендуется:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Тег
(break row) будет правильным использовать, например, для переноса строк в стихе или куплете песни:
Oh mother, tell your children
Not to do what I have done
Spend your lives in sin and misery
In the house of the Rising Sun
ЗАГОЛОВКИ
Каждый тег заголовка, от
до
, обозначает т. н. важность той секции, перед которой он расположен. Так,
(heading 1) — это первый и наиболее важный заголовок,
— заголовок второго уровня,
— третьего уровня и т. д. Тег
завершает этот список.
(heading 1) — это первый и наиболее важный заголовок,
— заголовок второго уровня,
— третьего уровня и т. д. Тег
завершает этот список.
— третьего уровня и т. д. Тег
завершает этот список.
Браузер по умолчанию показывает
самым крупным шрифтом, а следующие заголовки, соответственно, шрифтом всё меньшим и меньшим. Чтобы не запутаться в семантике и настроить её должным образом, расставляйте заголовки последовательно, а не ориентируйтесь на размер шрифта (ведь для дизайна есть CSS!).
Не рекомендуется:
The Most Endangered Feline Species
Amur leopards
Рекомендуется:
The Most Endangered Feline Species
Amur leopards
Также стоит отметить и способ разметки подзаголовков, альтернативных названий и строк текста, которые сопровождают заголовок. В документации W3C сказано, что в HTML нет специального механизма создания такого контента, но выход из положения возможен с помощью использования разметки для обычного текста (вместо использования тегов заголовков).
Не рекомендуется:
Star Trek IV
The Voyage Home
Рекомендуется:
Star Trek IV
The Voyage Home
Советы по HTML-формам
ПЛЭЙСХОЛДЕРЫ
Атрибут placeholder в элементе HTML-формы позволяет вывести подсказывающий текст для пользователя, который исчезает, как только в поле начинает набираться текст. Цель плейсхолдера — показать пример правильного заполнения поля.
К сожалению, в Интернете часто встречаются ситуации, когда placeholder используется не по назначению, выполняя при этом роль тега
Не рекомендуется:
Рекомендуется:
КЛАВИАТУРЫ В МОБИЛЬНЫХ УСТРОЙСТВАХ
Очень много людей используют мобильные устройства (такие как смартфон или планшет) для посещения сайтов. И крайне важно обеспечить им максимальное удобство при наборе текста. Сейчас речь идет о выборе правильного типа элемента .
Например, благодаря HTML5-значению type=»number» мобильный телефон отобразит цифровую клавиатуру вместо буквенно-цифровой. То же самое касается значений tel, email и т. д.
Не рекомендуется:
Рекомендуется:
Вот сравнение: на скриншоте слева показана клавиатура, которая выводится, если использован type=»tel», а справа — клавиатура, отображающаяся при type=»text».
HTML label tel и text — поведение клавиатуры на мобильном
Советы по изображениям
Скажите «да» SVG-файлам! Во-первых, вы можете использовать векторную графику в тегах , вот так:
Во-вторых, для реализации векторных иконок можно применить SVG-спрайты вместо иконочных шрифтов, использование которых считается хаком и не всегда даёт идеальный результат (ведь браузер всё же воспринимает иконочный шрифт как текст, а не как изображения). Есть и другие потенциальные проблемы, такие как блокировщики контента и рекламы, отключающие загрузку веб-шрифтов. Кроме того, электронные читалки могут попытаться прочитать иконочные шрифты, что может привести к странным результатам… Если этих доводов вам недостаточно, в Сети можно найти ещё массу информации по этой теме, например, здесь.
Идея SVG-спрайтов схожа с CSS-спрайтами. Реализация заключается в объединении всех ваших SVG в одном файле изображения. В случае с SVG каждый элемент заворачивается в тег
После чего иконку можно использовать в HTML с тегом
Вам может показаться, что создание спрайтов SVG — утомительное занятие. Что ж, для этого существуют специальные плагины, например, gulp-svgstore для автоматизации процесса и генерации спрайтов.
Интересно и то, что поскольку в данном случае мы используем для вставки изображений тег
.social-icon {
fill: #000;
transition: all 0.3s;
}
.social-icon:hover {
fill: #3b5998;
}
Существуют, правда, некоторые ограничения по CSS: когда SVG используется таким образом (
В демонстрационном примере ниже показан SVG-спрайт в действии. Если навести курсор на изображение, огонь факела изменит свой цвет благодаря CSS (если картинка отображается не полностью, нажмите кнопку RERUN).
See the Pen SVG acolyte demo by ladybenko (@ladybenko) on CodePen.
Надеемся, что данные рекомендации по HTML были вам полезны. Если у вас есть вопросы или вы хотите поделиться своим советом по этой теме, пишите в комментариях!