Текстовые элементы на сайтах

Введение

Это — вступительная статья к циклу «Анатомия веб-сайтов». В нём мы последовательно разберём все ключевые элементы, которые могут встречаться в дизайне сайта. И хоть мы не планируем подробно разбирать в этом курсе HTML (язык гипертекстовой разметки), всё равно, рассматривая элементы сайтов, будем указывать соответствующие им теги.

Теги — это что-то вроде цифровой обёртки элемента. Соответственно, бывают теги открывающие и закрывающие. Существуют также самостоятельные теги, их мы рассмотрим в курсе, посвященном HTML.

Выглядят они примерно так:

Для веб-дизайнеров знание основных тегов полезно, оно помогает в общении с фронтенд-разработчиками, и ещё пригодится в редакторах сайтов.

Сделав эту оговорку, давайте приступать к изучению анатомии сайтов! И начнём мы с изучения текстовых элементов.

Текстовые элементы

Абзацы

Первым среди текстовых элементов мы рассмотрим абзац.

Абзац — это совокупность предложений, объединенных общим смыслом.

В веб-дизайне абзацу соответствует тег <p>. При этом каждый отдельный абзац заворачивается в отдельный тег.

На письме и при печати текста мы начинаем новый абзац с новой строки. Последняя строка в нем часто бывает короче предыдущих, а первая строка часто имеет отступ в начале. Его так и называют — абзацный отступ.

И хотя в веб-дизайне есть параметр, который даёт возможность его задать, абзацный отступ почти никогда не применяется.

Размеры текстов в вебе, как и в типографике, называют кеглями. Измерять их можно в абсолютных величинах — пикселях (px) — и в относительных — em, rem, ex, процентах. Также ихразмеры текстов можно задавать названиями размеров (например, small, x-large, smaller, larger).

Поскольку для новичков проще и понятнее работать с пикселями, в курсе «Основы веб-дизайна» мы будем использовать именно эту размерность.

С точки зрения иерархии содержания, абзац соответствует основному тексту. То есть, когда мы определяем размер текста в абзаце, то по сути определяем размер основного текста.

Конкретный кегль шрифта зависит от конструктивных особенностей шрифта, который вы выбираете для основного текста. Как правило, этот размер составляет от 12 до 16 пикселей.

Общие принципы выбора шрифтов для основного текста мы описывали в материале «Как выбирать шрифты для заголовков и основного текста». Эти принципы актуальны и для интернета.

Название материала, заголовки и подзаголовки

В сайтах существует шесть уровней заголовков, и каждому из них соответствует свой тег.

При этом заголовок 1-го уровня должен быть только один. Потому что в соответствии с иерархией содержания он является названием документа. С точки зрения семантики HTML использование двух заголовков 1-го уровня — это ошибка.

В отношении остальных заголовков такого ограничения нет, но следует понимать, что каждый следующий заголовок — это подзаголовок предыдущего уровня. Соответственно, если у вас есть только три уровня заголовков, то и используют соответственно теги от <H1> до <H3>.

Заголовков ниже шестого уровня в интернете не бывает.

При оформлении заголовков необходимо соблюдать визуальную иерархию — размеры каждого следующего уровня заголовков следует делать меньше предыдущего.

Размеры заголовков не стандартизованы, и веб-дизайнеры могут их изменять в соответствии с контекстом проекта. Но по умолчанию линейка размеров такова:

Заголовки 4-го уровня и ниже на практике используются редко. Для презентационных сайтов и рекламных текстов четыре уровня иерархии заголовков — это скорее исключение. Поэтому часто заголовок третьего уровня может быть всего на несколько пунктов или пикселей больше, чем основной текст. Но если заголовок 4-го уровня всё же появляется, размеры других заголовков необходимо увеличивать.

Ссылки

Отдельный тип элементов сайта — это ссылка (корректнее было бы называть его «гиперссылкой», но так никто не делает, даже среди специалистов). Мы этого уже, наверное, и не замечаем, но и сегодня все подобные надписи воспринимаем, как такие, на которые можно нажать.

Они маркируются тегом <a href="[url]">, где href — это так называемый атрибут, который означает «гиперссылка» (от англ. hypertext reference), а [url] — это адрес страницы, на которую вы ссылаетесь.

Когда сайты только появились, ссылки получили своё традиционное оформление — синий цвет и подчеркивание.

Как и многим другим вещам в интернете, синим цветом ссылок мы обязаны сэру Тиму Бернерсу-Ли, изобретателю паутины. И хотя вряд ли на тот момент он задумывался над вопросом доступности и инклюзивности сайтов, синий цвет для выделения ссылок был достаточно удачным решением, ведь, как отмечает Джо Кларк, автор книги «Доступность сайтов для людей с физическими недостатками», его различает значительное количество людей с дальтонизмом.

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

При этом ссылка — это интерактивный текстовый элемент (то есть такой, с которым пользователь может взаимодействовать).

Следовательно, каждая ссылка может иметь несколько состояний и способов оформления:

  • Ссылка, которую пользователь раньше не посещал. Это состояние ссылки по умолчанию. Так оформляются ссылки на страницы этого сайта или внешние ресурсы, которые пользователь уже посещал ранее.
  • Посещённая ссылка. По умолчанию такие ссылки маркируются фиолетовым цветом. Они соответствуют ссылкам на страницы, которые посетитель уже открывал хотя бы раз.
  • Активная ссылка (ссылка при нажатии). Соответствует текущей странице или состоянию, когда вы нажали на ссылку, но ещё не отпустили кнопку мыши или не отвели палец. По умолчанию такие ссылки маркируются красным.
  • Ссылка при наведении курсора. Это состояние позволяет лучше показать интерактивность, а ещё можно с помощью специального кода добавить всплывающую рядом подсказку. Для таких ссылок характерна смена цвета, как правило, на более светлый.
  • Ещё одно состояние ссылки — состояние фокуса. Это состояние, идентичное наведению, но обеспечивается оно не путём наведения мыши, а через нажатие клавиши [tab]. Она, кстати, позволяет переходить от элемента к элементу в пределах страницы вообще без использования мыши.

Способы выравнивания

Теперь, когда мы с вами определили некоторые базовые элементы текста, коснемся вопроса их выравнивания.

Всего в интернете предусмотрено четыре типа выравниваний текста:

  • По левому краю (это выравнивание по умолчанию)
  • По центру
  • По обоим краям
  • По правому краю

Давайте с каждым типом выравнивания познакомимся поближе.

Выравнивание по левому краю

Выравнивание по левому краю в веб-дизайне используется по умолчанию. При нём начало каждой строки привязано к так называемой линии набора, а завершается строка последним целым словом.

При таком выравнивании правая часть строк неровная. На жаргоне это ещё иногда называют «расчёска». Из-за неё некоторые заказчики просят изменить выравнивание на другое — по обоим краям. Мы не рекомендуем этого делать, и в следующем блоке объясним почему.

Выравнивание по обоим краям

При выравнивании по обоим краям начало строки всегда выравнивается по линии набора, а конец строки — по правому краю блока, к которому относится строка.

Проблема с этим выравниванием в том, что оно достигается путём изменения трекинга и интервала между словами. Это не только портит эстетичность вёрстки текста, но и ухудшает его восприятие, ведь пользователю постоянно приходится менять темп чтения. Причём чем короче строка, тем сильнее проявляется проблема.

В газетах и ​​журналах такое выравнивание используется без изменения трекинга благодаря переносам. И если при вёрстке таких медиа автоматический алгоритм графического редактора расставлял переносы некорректно, дизайнер или редактор могли это легко исправить. Автоматизированные же системы переносов в интернете слишком часто разбивали слова некорректно, а ручная проверка была технически сложной.

Поэтому это выравнивание почти не используется на практике.

Выравнивание по центру

При выравнивании по центру каждая строка выравнивается относительно оси вертикальной симметрии текстового блока.

Выравнивание по центру, как правило, используют для заголовков материала, цитат или списков в форме плитки (например, на посадочных страницах). Некоторые дизайнеры используют его и для основного текста, но в этом случае оно неуместно, ведь читателю приходится каждый раз искать начало строки в новом месте.

Лучше всего выравнивание по центру выглядит в случаях, когда в массиве текста не более 4–5 строк. То есть для заголовков большого объёма лучше использовать выравнивание по левому краю.

Выравнивание по правому краю

При выравнивании по правому краю текст всегда выравнивается концом строки относительно правой границы текстового блока. При этом начало строки всегда начинается в новом месте, то есть появляется обратная расчёска.

Такое выравнивание используется очень редко, как правило, новичками, из композиционных соображений. Для восприятия текстов оно неорганично, ведь при работе с вёрсткой ключевая задача дизайнера — делать тексты комфортными для чтения. А текст, в котором каждая новая строка начинается в новом месте, читать неудобно.

Зачем же тогда вообще такое выравнивание внедрили?

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

Такое выравнивание для этих письменностей является органичным.

Для всех этих письменностей работа с текстами как бы отражается зеркально.

Способы оформления текстов

Теперь, когда мы разобрались с базовыми составляющими текстов на сайтах и ​​способами выравнивания, выясним, какие типовые способы оформления текстов существуют.

Насыщенный (жирный) текст

Вероятно, одним из самых распространенных способов выделения текста является насыщенное начертание. Оно прекрасно помогает выделить среди массива текста ключевые слова или сделать смысловой акцент на определенной части фразы.

Для этого типа оформления используют два тега: <B> и <STRONG>. Визуально они приводят к одинаковому изменению текста.

Но текст, выделенный тегом <STRONG> приобретает ещё и смысловой акцент. Это важно с учётом инклюзивности сайтов, и отличие этого фрагмента почувствуют те, кто не может видеть сайт и воспринимает его на слух — программы чтения сайтов сделают на этом слове акцент.

Наклонный текст

Ещё одним распространенным способом выделения текста является наклонное начертание. Его часто используют для оформления прямой речи или для выделения терминов или иностранных слов.

Для этого типа оформления используют два тега — <I> и <EM>. Как и в случае с насыщенным начертанием, визуального различия между ними нет, но есть содержательное. Слова, выделенные тегом <EM> иначе считывают программы для чтения текстов.

Уменьшенный кегль

Ещё один способ выделения текста — это уменьшение его кегля на одну единицу. Для этого используют тег <SMALL>.

С самого начала тег <SMALL> ввели, чтобы оформлять комментарии к основному тексту (как, например, в «Википедии») или сноски об авторских правах, которые не касаются основного текста, но важны с учётом юридических требований.

В предыдущей версии HTML также был тег <BIG>, который увеличивал кегль выделенного им текста на единицу. Но с 5-й версии HTML его убрали, поскольку не нашлось соответствующих контекстов использования этого способа оформления.

Зачёркнутый текст

Иногда в текстах встречается зачёркнутый фрагмент. Он может быть использован по разным причинам. Например, чтобы подчеркнуть цену товара с учётом скидки, перечеркнуть предыдущую версию документа и просто для шутки.  Например, о том, как власть пытается скрыть правду о зачёркнутом тексте.

Для оформления текста зачёркивающей линией используют тег <DEL>.

Подчёркнутый текст (добавленный текст)

В дополнение к зачёркнутому тексту существует ещё добавленный текст, его отмечают подчёркиванием. Так его начали оформлять потому, что это простой способ обратить внимание на текст, которого раньше в документе не было. Также подчёркиванием часто выделяли важные слова или термины.

Тег для подчеркивания текста — <INS>. Но не следует торопиться его использовать. Мы уже отмечали в этом материале, что такой способ оформления надписей в веб-дизайне ассоциируется в первую очередь со ссылками. Причём когда ссылки оформляют не синим, а каким-то другим цветом (даже черным), подчёркнутый текст все равно воспринимается как ссылка.

Поэтому подчёркивание текста, который ссылкой не является, будет сбивать пользователя с толку.

Текст нижнего и верхнего индексов

Иногда веб-дизайнерам приходится иметь дело со специализированными текстами. Например по химии или физике.

В них могут встречаться надписи, соответствующие верхнему или нижнему индексу (то есть, смещённой вверх или вниз базовой линии). Даже в обычном тексте это может понадобиться, чтобы указать степень в описании квадратуры квартиры — 44 м2. Или же отметить химический состав напитка: H2O.

Для таких случаев и используют форматирование нижнего и верхнего индекса через теги <SUB> (нижний индекс) и <SUP> (верхний индекс).

В заключение

Вопрос, должен ли веб-дизайнер владеть HTML и CSS, — до сих пор предмет дискуссии в отрасли. Единодушной позиции по нему нет, поэтому каждый веб-дизайнер сам решает, уделить ли время их изучению. Но, как мы уже отмечали в начале материала, понимание хотя бы основ работы с языком гипертекстовой разметки и каскадными таблицами стилей существенно облегчает понимание внутри команды и даёт вам возможность самостоятельно выполнять небольшие проекты.

В дальнейших статьях модуля мы познакомимся с другими типичными элементами сайтов.

·
476
·
1
·
goodsuper 6
Наступна стаття
Списки и таблицы на сайтах
0
Головна