Советы по HTML: абзацы, заголовки, формы и SVG-иконки

20.01.2018 HTML, CSS

В сегодняшнем посте мы публикуем несколько рекомендаций по работе с HTML, которые помогут сделать ваш код более качественным, а сайты, соответственно, — более удобными и доступными для пользователей. 

Советы по тексту

АБЗАЦЫ

Как правило, когда мы пишем текст, то делим его на абзацы. В 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" мобильный телефон отобразит цифровую клавиатуру вместо буквенно-цифровой. То же самое касается значений telemail и т. д.

Не рекомендуется:

<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) будут применяться только к тем элементам, в которых они не определены и никак не перезаписываются. Впрочем, все эти проблемы всё равно решаемы.

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

Контакты

+38 (044) 464-28-17
+38 (063) 184-13-41
+38 (097) 978-54-92
+38 (099) 274-56-60
info@valsorokin.ru
valsorokin@gmail.com

О нас

ВИДЕО В КАЧЕСТВЕ ФОНА ДЛЯ САЙТА НА HTML5+CSS