Вот и подошел к концу цикл статей, скопипастеных с Хабра. Последняя статья из блока "дизайн текста" посвящена ссылкам, элементам del, ins и дополнительным элементам.

Продолжение под катом.

Ссылки

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

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

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

Удалённое и добавленное содержимое

Элементы <del> и <ins> существуют для указания в тексте удалённого и обновлённого содержимого.
Меня однажды спросили: а зачем это нужно? Почему нельзя просто удалить текст и вместо него написать новый? Эти элементы используются для того, чтобы явно указать изменения в тексте. Пример скидок самый простой:

Картофель — <del>0,90</del> <ins>0,79</ins> ?.

В результате получаем: Картофель — 0,90 0,79 ?.
Похожий пример приводится во всех учебниках и здесь есть один минус — элемент >ins> по-умолчанию оформляется подчёркнутым начертанием, что является недопустимым и это нужно исправлять с помощью CSS. Один из удачных способов выделения этих элементов — задание фонового цвета. Для удалённого текста — красного оттенка, для добавленного — зелёного. Возможен и другой вариант: удалённый текст — более приглушённого цвета, чем основной текст, а добавленный — полужирным.

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

Дополнительные строчные элементы

Вообще, в тексте может быть достаточно много различных строчных элементов (code, samp, var, kbd, tt и другие), которые могут отличаться от основного текста, не только начертанием, но гарнитурой и даже размером шрифта.

Существует достаточно много способов отформатировать специфический элемент в тексте не изменяя его гарнитуры. Например, по-умолчанию элемент <code>, который предназначен для отображения исходного кода программы, имеет моноширинный шрифт. Так как <code> является строчным элементом, то он может быть вставлен в строку среди текста. Если шрифт текста отличается от <code>, то появляется неприятный контраст гарнитур.
Рекомендуется все строчные элементы используемые среди текста отображать той же гарнитурой и тем же размером кегля, что и у основного текста. Если нужно выделить, то рекомендую воспользоваться стандартными средствами для изменения начертания (font-style, font-weight, font-variant), цветом, цветом фона, границами элемента. Но ни в коем случае не менять гарнитуру.

Форматирование в редакторах

Текстовые редакторы в современных CMS системах дают возможность отформатировать текст по нашему вкусу. И это очень плохо. Почему? Ну представьте себе, что вы создали дизайн сайта, настроили отображение основных элементов текста, а администратор сайта, при размещении материала стал злоупотреблять возможностями текстового редактора: покрасил текст в розовый цвет, добавил синий фоновый цвет, увеличил шрифт, сделал его наклонным и центрированным. Ужас!

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

К примеру, если смотреть на TinyMCE:

• Термины и их значения, список вопросов и ответов — принцип одинаковый (текстовые редакторы ими пренебрегают);
• Сноски — как в Википедии. Можно использовать вместе с элементом <dfn> для обозначения терминов. Возле термина ставится номер сноски (<sup>), а внизу страницы помещается строка с описанием термина или пояснением какого-то момента в тексте;
• Примечания, дополнения, определения. Важные и довольно часто необходимые элементы, которые можно оформлять в виде плашек или помещаться в рамки;
• Важные примечания, дополнения, определения. Возможно каждому элементу можно задавать уровень важности и от этого будет выбираться оформление;
• Содержание статьи, например в виде списка «якорей», генерируемый автоматически по количеству заголовков в тексте;
• Предусмотреть варианты вставки иллюстраций, видео и аудио материалов с определёнными размерами, расположением и отступами;
• Правильное оформление цитат, удалённого и обновлённого содержимого со всеми необходимыми атрибутами.
• Эпиграф

От чего следует отказаться в WYSIWYG-редакторах:

• Подчёркивание (underline);
• Горизонтальное выравнивание (text-align);
• Выбор гарнитуры (font-family);
• Выбор кегля (font-size);
• Отступ/Выступ (indent/outdent);
• Выравнивание, размеры, качество, отступы, цвета фона и рамок иллюстраций и других медиа-файлов;
• Выбор цвета шрифта и фона;
• Смайлики (они допустимы только в переписке);
• Изменение размеров и цвета горизонтального разделителя;
• Слои (div { position: absolute });
• Любое изменение стилей

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

Статьи по теме:

• Дизайн текста: часть четвертая
• Дизайн текста: часть третья
• Дизайн текста: часть вторая
• Дизайн текста: часть первая
• Требования к контенту