Советы по HTML: абзацы, заголовки, формы и SVG-иконки
Karina | 26.08.2016
В сегодняшнем посте мы публикуем несколько рекомендаций по работе с HTML, которые помогут сделать ваш код более качественным, а сайты, соответственно, — более удобными и доступными для пользователей. Этими советами по верстке недавно поделилась Belén Albeza — веб-разработчик в Mozilla Developer Relations. Мы адаптировали её рекомендации для наших читателей и немного дополнили их. В статье есть полезная информация как для новичков, так и для более опытных верстальщиков. Поехали!
Советы по тексту
Абзацы
Как правило, когда мы пишем текст, то делим его на абзацы. В HTML для этого предусмотрен тег <p> (paragraph). Не используйте тег <br> с целью изобразить абзацы, поскольку он предназначен для другого.
Не рекомендуется:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Рекомендуется:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Тег <br> (break row) будет правильным использовать, например, для переноса строк в стихе или куплете песни:
<p>Oh mother, tell your children<br> Not to do what I have done<br> Spend your lives in sin and misery<br> In the house of the Rising Sun</p>
Заголовки
Каждый тег заголовка, от <h1> до <h6>, обозначает т. н. важность той секции, перед которой он расположен. Так, <h1> (heading 1) — это первый и наиболее важный заголовок, <h2> — заголовок второго уровня, <h3> — третьего уровня и т. д. Тег <h6> завершает этот список.
Браузер по умолчанию показывает <h1> самым крупным шрифтом, а следующие заголовки, соответственно, шрифтом всё меньшим и меньшим. Чтобы не запутаться в семантике и настроить её должным образом, расставляйте заголовки последовательно, а не ориентируйтесь на размер шрифта (ведь для дизайна есть CSS!).
Не рекомендуется:
<article>
<h1>The Most Endangered Feline Species</h1>
<h4>Amur leopards</h4>
<!-- ... -->
</article>
Рекомендуется:
<article>
<h1>The Most Endangered Feline Species</h1>
<h2>Amur leopards</h2>
<!-- ... -->
</article>
Также стоит отметить и способ разметки подзаголовков, альтернативных названий и строк текста, которые сопровождают заголовок. В документации W3C сказано, что в HTML нет специального механизма создания такого контента, но выход из положения возможен с помощью использования разметки для обычного текста (вместо использования тегов заголовков).
Не рекомендуется:
<header>
<h1>Star Trek IV</h1>
<h2>The Voyage Home</h2>
</header>
Рекомендуется:
<header>
<h1>Star Trek IV</h1>
<p>The Voyage Home</p>
</header>
Советы по HTML-формам
Плэйсхолдеры
Атрибут placeholder в элементе <input> HTML-формы позволяет вывести подсказывающий текст для пользователя, который исчезает, как только в поле начинает набираться текст. Цель плейсхолдера — показать пример правильного заполнения поля.
К сожалению, в Интернете часто встречаются ситуации, когда placeholder используется не по назначению, выполняя при этом роль тега <label> и информируя лишь о том, что это за поле (например, e-mail или номер телефона), вместо того чтобы отображать пример и формат написания того же e-mail либо номера телефона. Такая практика не обеспечивает специальных возможностей, потому избегайте её.
Не рекомендуется:
<input type="email" placeholder="Your e-mail" name="mail">
Рекомендуется:
<label>
Your e-mail:
<input type="email" placeholder="james.kirk@enterprise.uss" name="mail">
</label>
Клавиатуры в мобильных устройствах
Очень много людей используют мобильные устройства (такие как смартфон или планшет) для посещения сайтов. И крайне важно обеспечить им максимальное удобство при наборе текста. Сейчас речь идет о выборе правильного типа элемента <input>.
Например, благодаря HTML5-значению type="number" мобильный телефон отобразит цифровую клавиатуру вместо буквенно-цифровой. То же самое касается значений tel, email и т. д.
Не рекомендуется:
<label>Phone number: <input type="text" name="mobile"></label>
Рекомендуется:
<label>Phone number: <input type="tel" name="mobile"></label>
Вот сравнение: на скриншоте слева показана клавиатура, которая выводится, если использован type="tel", а справа — клавиатура, отображающаяся при type="text".
Советы по изображениям
Скажите «да» SVG-файлам! Во-первых, вы можете использовать векторную графику в тегах <img>, вот так:
<img src="acolyte_cartoon.svg" alt="acolyte">
Во-вторых, для реализации векторных иконок можно применить SVG-спрайты вместо иконочных шрифтов, использование которых считается хаком и не всегда даёт идеальный результат (ведь браузер всё же воспринимает иконочный шрифт как текст, а не как изображения). Есть и другие потенциальные проблемы, такие как блокировщики контента и рекламы, отключающие загрузку веб-шрифтов. Кроме того, электронные читалки могут попытаться прочитать иконочные шрифты, что может привести к странным результатам… Если этих доводов вам недостаточно, в Сети можно найти ещё массу информации по этой теме, например, здесь.
Идея SVG-спрайтов схожа с CSS-спрайтами. Реализация заключается в объединении всех ваших SVG в одном файле изображения. В случае с SVG каждый элемент заворачивается в тег <symbol>, примерно так:
<svg>
<symbol id="social-twitter" viewBox="...">
<!-- actual image data here -->
</symbol>
</svg>
После чего иконку можно использовать в HTML с тегом <svg>, указывая необходимый ID в файле SVG:
<svg class="social-icon">
<use xlink:href="icons.svg#social-twitter" />
</svg>
Вам может показаться, что создание спрайтов SVG — утомительное занятие. Что ж, для этого существуют специальные плагины, например, gulp-svgstore для автоматизации процесса и генерации спрайтов.
Интересно и то, что поскольку в данном случае мы используем для вставки изображений тег <svg> (вместо <img>), мы можем применять к ним стили CSS. Поэтому все прикольные штуки, которые можно делать с веб-шрифтами, можно сделать и с SVG-иконками.
.social-icon {
fill: #000;
transition: all 0.3s;
}
.social-icon:hover {
fill: #3b5998;
}
Существуют, правда, некоторые ограничения по CSS: когда SVG используется таким образом (<use> ссылается на <symbol>), изображение попадает в Shadow DOM, и мы лишаемся некоторых возможностей CSS. В этом случае мы не можем использовать обычные CSS-селекторы для SVG и выборочно стилизовать только необходимые нам элементы, а некоторые свойства (например, fill) будут применяться только к тем элементам, в которых они не определены и никак не перезаписываются. Впрочем, все эти проблемы всё равно решаемы.
В демонстрационном примере ниже показан SVG-спрайт в действии. Если навести курсор на изображение, огонь факела изменит свой цвет благодаря CSS (если картинка отображается не полностью, нажмите кнопку RERUN).
See the Pen SVG acolyte demo by ladybenko (@ladybenko) on CodePen.
Надеемся, что данные рекомендации по HTML были вам полезны. Если у вас есть вопросы или вы хотите поделиться своим советом по этой теме, пишите в комментариях!
Оставить комментарий