Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 15.11.2018

Наверх

Наверх

Нет комментариев

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

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

В сегодняшнем посте мы публикуем несколько рекомендаций по работе с 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".

HTML label tel и 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 были вам полезны. Если у вас есть вопросы или вы хотите поделиться своим советом по этой теме, пишите в комментариях!

Оставить комментарий