Prodvigenie-saytov.ru

Please select a Mobi Menu from the Menu Locations tab in order to make your header display as intended.

Prodvigenie-saytov.ru
  • ГЛАВНАЯ
  • SEO
  • ЮЗАБИЛИТИ
  • ВЕБ-ДИЗАЙН
  • ПОЛЕЗНОЕ
  • КОНТАКТЫ
  • КАРТА САЙТА
  • КНИГИ
  • Корзина

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

Главная страница ПОЛЕЗНОЕ Советы по HTML: абзацы, заголовки, формы и SVG-иконки

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

prodvigenie
18.09.2018
ПОЛЕЗНОЕ

В сегодняшнем посте мы публикуем несколько рекомендаций по работе с 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) — это первый и наиболее важный заголовок,

— заголовок второго уровня,

— третьего уровня и т. д. Тег

завершает этот список.

Браузер по умолчанию показывает

самым крупным шрифтом, а следующие заголовки, соответственно, шрифтом всё меньшим и меньшим. Чтобы не запутаться в семантике и настроить её должным образом, расставляйте заголовки последовательно, а не ориентируйтесь на размер шрифта (ведь для дизайна есть 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-файлам! Во-первых, вы можете использовать векторную графику в тегах , вот так:

acolyte

Во-вторых, для реализации векторных иконок можно применить SVG-спрайты вместо иконочных шрифтов, использование которых считается хаком и не всегда даёт идеальный результат (ведь браузер всё же воспринимает иконочный шрифт как текст, а не как изображения). Есть и другие потенциальные проблемы, такие как блокировщики контента и рекламы, отключающие загрузку веб-шрифтов. Кроме того, электронные читалки могут попытаться прочитать иконочные шрифты, что может привести к странным результатам… Если этих доводов вам недостаточно, в Сети можно найти ещё массу информации по этой теме, например, здесь.

Идея SVG-спрайтов схожа с CSS-спрайтами. Реализация заключается в объединении всех ваших SVG в одном файле изображения. В случае с SVG каждый элемент заворачивается в тег , примерно так:





После чего иконку можно использовать в HTML с тегом , указывая необходимый ID в файле SVG:



Вам может показаться, что создание спрайтов SVG — утомительное занятие. Что ж, для этого существуют специальные плагины, например, gulp-svgstore для автоматизации процесса и генерации спрайтов.

Интересно и то, что поскольку в данном случае мы используем для вставки изображений тег (вместо ), мы можем применять к ним стили CSS. Поэтому все прикольные штуки, которые можно делать с веб-шрифтами, можно сделать и с SVG-иконками.

.social-icon {
fill: #000;
transition: all 0.3s;
}

.social-icon:hover {
fill: #3b5998;
}

Существуют, правда, некоторые ограничения по CSS: когда SVG используется таким образом ( ссылается на ), изображение попадает в Shadow DOM, и мы лишаемся некоторых возможностей CSS. В этом случае мы не можем использовать обычные CSS-селекторы для SVG и выборочно стилизовать только необходимые нам элементы, а некоторые свойства (например, fill) будут применяться только к тем элементам, в которых они не определены и никак не перезаписываются. Впрочем, все эти проблемы всё равно решаемы.

В демонстрационном примере ниже показан SVG-спрайт в действии. Если навести курсор на изображение, огонь факела изменит свой цвет благодаря CSS (если картинка отображается не полностью, нажмите кнопку RERUN).

See the Pen SVG acolyte demo by ladybenko (@ladybenko) on CodePen.

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

Предыдущая запись
Юзабилити сайта: значение и польза
Следующая запись
Что такое robots.txt для SEO

Добавьте комментарий Cancel Reply

Cвежие записи

  • Паллиативная и хосписная помощь: сходства и различия Понедельник, 3, Дек
  • О пользе брендбука, или зачем компании нужен стайл-гайд Вторник, 18, Сен
  • Что такое robots.txt для SEO Вторник, 18, Сен
  • Советы по HTML: абзацы, заголовки, формы и SVG-иконки Вторник, 18, Сен
  • Юзабилити сайта: значение и польза Вторник, 18, Сен

Рубрики

  • SEO (1)
  • Без рубрики (1)
  • ВЕБ-ДИЗАЙН (1)
  • ПОЛЕЗНОЕ (1)
  • ЮЗАБИЛИТИ (2)

Категории товаров

Статистика



Яндекс.Метрика

Календарь

Февраль 2019
Пн Вт Ср Чт Пт Сб Вс
« Дек    
 123
45678910
11121314151617
18192021222324
25262728  

RSS Новостная лента

  • Паллиативная и хосписная помощь: сходства и различия 03.12.2018 prodvigenie
  • О пользе брендбука, или зачем компании нужен стайл-гайд 18.09.2018 prodvigenie
  • Что такое robots.txt для SEO 18.09.2018 prodvigenie
  • Советы по HTML: абзацы, заголовки, формы и SVG-иконки 18.09.2018 prodvigenie
© Prodvigenie-saytov.ru, 2018. Разработан и поддерживается Websitefabrika.com
SearchЗаписиLoginКорзина
Понедельник, 3, Дек
Паллиативная и хосписная помощь: сходства и различия
Вторник, 18, Сен
О пользе брендбука, или зачем компании нужен стайл-гайд
Вторник, 18, Сен
Что такое robots.txt для SEO
Вторник, 18, Сен
Советы по HTML: абзацы, заголовки, формы и SVG-иконки
Вторник, 18, Сен
Юзабилити сайта: значение и польза
Вторник, 18, Сен
Разница между UI и UX: определение терминов

Welcome back,