Если вы только начинаете погружаться в мир веб-дизайна, освоение основ HTML станет отличной отправной точкой. Как дизайнеру, вам может не понадобиться писать код, но базовое понимание HTML-тегов значительно упростит взаимодействие с разработчиками.
Знакомство с наиболее распространёнными и популярными HTML-тегами позволит вам понять, как разработчики воплощают ваши дизайнерские идеи в жизнь и с какими ограничениями могут столкнуться. Знание HTML даёт возможность эффективно взаимодействовать с командой разработки, обеспечивая точную реализацию дизайна.
Тег абзаца <p>
<p> — это блочный элемент, который используется для введения абзаца. Содержимое размещается между открывающим и закрывающим тегами, а браузеры отображают каждый абзац с разрывом строки между ними.
Лучше использовать тег <p>, когда вы начинаете новую мысль или вводите новую идею. «Почему бы просто не использовать разрыв строки?» — спросите вы. Потому что <p> даёт гораздо больше контроля над содержанием: вы можете добавлять HTML-атрибуты и стилизовать каждый абзац отдельно. Кроме того, вспомогательные технологии, такие как скринридеры, распознают абзацы, позволяя пользователям удобно их просматривать и воспринимать.
Тег жирного текста <b>
Существует несколько способов стилизации текста в HTML, и один из базовых — использовать теги форматирования. Парный тег <b> делает текст жирным, не придавая ему дополнительной смысловой важности — обычно его используют для визуального выделения.
Не используйте <b> для заголовков — вместо этого применяйте специальные теги заголовков от <h1> до <h6>, так как они также определяют структуру контента.
Совет! Добавляйте тег <strong> вместе с <b>. В 99% случаев жирным выделяется значимый по смыслу текст, а это важно и для SEO.
Тег курсивного текста <i>
Парный тег <i> — это тег форматирования, который делает текст внутри него курсивным. Его чаще всего используют для названий произведений и других объектов, чтобы визуально выделить их из общего контекста. Также может применяться для акцента, хотя жирное выделение в этом случае используется чаще.
Теги заголовков от <h1> до <h6>
Основная функция тегов заголовков — создание визуальной и логической иерархии на странице. Существует 6 уровней заголовков — от <h1> до <h6>, где <h1> — самый важный, а <h6> — наименее значимый.
Визуально заголовки выделяются от основного текста увеличенным и жирным шрифтом, а также отступами до и после. Логически заголовки используются поисковыми системами для индексации структуры и содержания страницы. Это также помогает как обычным, так и пользователям вспомогательных технологий быстро просматривать страницу и находить нужную информацию.
Совет! Не пропускайте уровни заголовков. Используйте <h1> для основного заголовка страницы, далее <h2>, затем менее важные <h3> и так далее.
Тег ссылки <a>
Тег <a> (от «anchor» — якорь) используется для создания гиперссылки. У него есть обязательный атрибут href, который указывает адрес перехода — без него ссылка просто не будет работать.
Текст ссылки размещается между открывающим и закрывающим тегами — именно так пользователи будут видеть название ссылки. В качестве содержимого ссылки можно использовать и другие элементы — например, изображения или кнопки (подробнее об этом будет рассказано в уроке про ссылки).
Атрибут target указывает, где откроется связанный документ. По умолчанию все ссылки открываются в том же окне, но если указать target=»_blank», страница откроется в новом окне или вкладке.
Тег элемента списка <li>
В HTML есть несколько способов организовать списки. Самые распространённые — это нумерованные и маркированные списки. Список как компонент состоит из двух основных элементов: тега, определяющего тип списка, и тегов, задающих его элементы. Такая структура называется вложенной: родительский тег содержит дочерние — как коробка с шоколадными конфетами содержит отдельные конфеты. В данном случае конфеты помечаются тегом элемента списка <li>, который вложен в тег типа списка <ol> или <ul>.
Тег нумерованного списка <ol>
Тип тега списка определяет его вид — логично. Наиболее распространены нумерованные и маркированные списки.
Нумерованные, или упорядоченные списки, создаются с помощью тега <ol>. Он работает вместе с вложенными тегами <li>. Каждый элемент, заключённый в тег <li>, будет отображаться с номером в зависимости от своего положения в коде. Как несложно догадаться, упорядоченные списки используют там, где важен порядок элементов — например, в рецептах или пошаговых инструкциях.
Тег неупорядоченного списка <ul>
Тег <ul> используется для создания списка с маркировкой (буллитами). Как и другие типы списков, он не работает сам по себе, а только вместе с тегами элементов <li>, вложенными внутрь. Тег <ul> действует как выдвижной ящик, а теги <li> — это, образно говоря, разбросанные в нём носки. Используйте неупорядоченные списки, когда порядок элементов не важен — например, в списке покупок.
Тег блочный контейнер <div>
Разделение пространства на отдельные контейнеры позволяет точечно управлять каждой областью — именно это делает тег <div> на веб-странице. Он действует как контейнер, который делит страницу на секции, такие как шапка (header), навигация, контент, боковая панель (sidebar) и подвал (footer). Добавляя внутрь другие теги, можно по-разному стилизовать каждую секцию, не затрагивая остальные. Имейте в виду, что это блочный тег — он отделяет свою секцию от остальной части страницы с помощью разрывов строк.
Тег строчный контейнер <span>
Элемент <span> похож на <div> — оба используются для выделения части текста, к которой нужно применить отдельные стили. У <span> нет обязательных атрибутов, но часто используются style, class и id. Единственное отличие от тега <div> — это строчный элемент, то есть он не создает разрыв строки и занимает только столько ширины, сколько нужно содержимому.
Тег изображения <img>
Тег <img> используется для вставки изображений в HTML-документы — чаще всего это файлы BMP, GIF, PNG или JPG. <img> — это пустой элемент и содержит только атрибуты. Обязательный атрибут — src, указывающий путь к изображению. Однако хорошей практикой является добавление атрибута alt с осмысленным описанием изображения, а также width и height для оптимизации загрузки.
Большинство современных браузеров поддерживают вставку векторных изображений SVG с помощью тега <img>. Если требуется поддержка старых браузеров, проверьте совместимость.
Тег векторной графики <svg>
Элемент <svg> (сокращение от «Scalable Vector Graphics») позволяет вставлять SVG-векторные изображения прямо на веб-страницу. Дизайнерам хорошо известно, что растровые изображения состоят из пикселей, а векторные — это математические формулы, которые указывают программному обеспечению, как отрисовать изображение в реальном времени.
Именно поэтому браузеры по-разному обрабатывают растровую и векторную графику. Тег <svg> позволяет напрямую внедрять векторную графику в HTML-документ.
Тег встроенного фрейма <iframe>
Элемент <iframe> позволяет встроить одну веб-страницу в другую. Самые распространённые случаи использования — встраивание видео с YouTube, рекламы или сторонних виджетов, таких как кнопки «Нравится» и «Поделиться» от социальных сетей.
Главный атрибут этого элемента — src, указывающий путь к встраиваемой странице. Также рекомендуется задавать размеры с помощью атрибутов width и height.
Тег таблицы <table>
Элемент <table> используется для организации данных в виде строк и столбцов. Таблицы обычно включают несколько вложенных тегов. Самые распространённые — это <tr> для создания строк и <td> для создания ячеек в строке. Также можно использовать тег <th>, чтобы определить заголовочную ячейку для группы ячеек. Правильная разметка таблицы особенно важна для пользователей вспомогательных технологий — у экранных читалок есть специальный режим для работы с табличными данными, позволяющий легко их просматривать. Всегда используйте тег <table> для табличной информации.