Блог Сергея Князева

Юзабилити
Оформляем текст за 5 минут

Оформляем текст за 5 минут

12.05.20166220
Размещая различные статьи на своём сайте, вы должны помнить, что любой текст должен быть понятен и удобен для прочтения. Если вы просто вставите текст без HTML вёрстки он будет выглядеть нерентабельным (не оправдывающий себя).
mail
mail
Сейчас в интернете вёрстка HTML каркаса для текста в 1000 символов ориентировочно стоит около 800 рублей. Эти деньги вы сможете потратить на мороженое, если будите пользоваться советами, которые я вам предложу.

Теги для вёрстки текста


Самым главным тегом, который необходимо использовать в любой статье является тег H1. Этот тег используется поисковыми машинами для поиска информации по вашему сайту.

Код
<h1>Название статьи</h1>

Также необходимо указать и другие теги: H2, H3, H4, H5, H6. Данные теги используется для обозначения "подтем" статьи, например:
Код
<h2>Теги для вёрстки текста</h2>

Для лучшего отображения текста при выделении "подтем", я предлагаю установить один шрифт и один размер для этих тегов. Сделать это можно, прописав стили CSS:
Код
h1,h2,h3,h4,h5,h6{ display: block;  font-size: 18px;  font-weight: bold;  padding-bottom: 4px;  margin-bottom: 10px;  margin-top: 10px;  color: #CCC;}


Для выделения важных слов в тексте, используйте теги b , u , i. Тег b - делает текст жирным, тег u - подчёркивает текст, а тег i - наклоняет текст. Применять их следует следующим образом:

Код
<b>Жирный текст</b> <u>Текст подчёркнутый внизу</u> <i>Текст с наклоном</i>


Также, не стоит забывать, что текст не должен быть записан сплошным блоком (слитно). Используйте коды перевода на новую строку. К ним относятся HR, BR, P. HR- Проводит линию во всю длину страницы, BR - переводит текст на строку ниже (принцип клавиши Enter), P - разделяет текст на графы. Для использования, воспользуйтесь кодами:

Код
<br> <hr> <p>Текст</p>


Для выделения пунктов используйте LI. Этот тег переносит на новую строку текст и добавляет точку в начале. Пишется так:

Код
<li>Ваш текст</li>


Основные советы


Основными критериями для текста является его читабельность и понятность. Используйте текст размера 13 или 14 ,так как данные размеры будут лучше восприниматься глазами пользователей на любых устройствах.


Что касается понятности текста, то тут всё зависит от вас. Я советую не использовать "Замудрённых" фраз, а если и приходится, то пишите разъяснение в скобках.


Если вы используете картинки в тексте, то пропишите для них отступы - margin="".

Код
<img src="ссылка на картинку" style="margin-right:10px; margin-top:10px; margin-bottom:10px; float:left;" alt="описание картинки"/>
или
<img src="ссылка на картинку" style="margin-left:10px; margin-top:10px; margin-bottom:10px; float:right;" alt="описание картинки"/>


Используйте выразительный цвет текста, что бы он не сливался с фоном.


Ещё одним хорошим дополнением будет - увеличенный отступ между строками. Для этого пропишите в CSS - line-height: 1.95em;. Например так:

Код
<style>.txt{line-height: 1.95em;}</style>
<div class="txt">Текст</div>


Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.