26
Января2017
html
Как и зачем наполнять сайты: базовые правила и HTML-коды

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

Что-то новенькое

Ресурс потеряется среди огромного количества сайтов, если его контент — это трижды по девять раз перепечатанные статьи, картинки из «Яндекса» и популярные видео «Как правильно завязать галстук».

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

Добавьте инфографику, фотографии или картинки — мир интернета основан на визуальных образах, не полагайтесь только на хороший текст.

как заполнять сайт

Это красиво

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

Абзацы. Берегите терпение читателя и помогайте: абзацы делают текст привлекательным и удобным для чтения. Тег для абзаца — <p>.

Заголовки. <h1> может быть только один. Поисковые системы обращают внимание заголовки, поэтому добавьте на страницу <h2>, <h3> — всего шесть видов заголовков.

Таблицы. Для чего? Например, чтобы сравнить цены или модели. HTML-код для создания таблицы:

  • <table> — начало таблицы,
  • <tr> — начало строки,
  • <td> первая ячейка < /td> — первый столбец,
  • <td> вторая ячейка </td> — второй столбец,
  • </tr>— конец строки,
  • </table>— конец таблицы.

Списки. Некоторую информацию удобнее расположить списком — маркированным и нумерованным. Составляя списки, мы снова заботимся о читателе и экономим его время на чтении «простыни». Коды: <ul>, <ol> и <li>. Тег <ol> используется для создания нумерованных списков.

    <ol type="1"> — нумерация арабскими цифрами. Используется при отсутствии «Type»;

    <ol type="A"> — заглавные буквы;

    <ol type="a"> — строчные буквы;

    <ol type="I"> — заглавные римские цифры;

    <ol type="i"> — строчные римские цифры.

Индексы — смещение символов вверх или вниз, обычно применяется для написания единиц измерений. В HTML предусмотрены два тега: <sup> — для создания верхнего индекса и <sub> — для нижнего.

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

Номера телефонов и почта. Кликабельный номер телефона создаётся с помощью кода href="tel: ", а почта — href="mailto: ". Примеры:

  • href="tel:+78124483822"
  • href="mailto: info@lemonrain.ru"

инфографика в hmtl

Больше картинок

Не секрет, что самые активные пользователи интернета — визуалы, которым картинки помогают принять решение и сформировать доверие к ресурсу.

Изображения товаров, фото «до и после» для услуг, инфографика — простые идеи для картинок. Унифицируйте размер изображений. Маленькие картинки раздражают пользователей, большие долго загружаются и утяжеляют ресурс.

Вставить изображение поможет тег <img>. Используйте изображения до 1 000 px или до 60 Кбайт. Форматы — JPG и PNG (для прозрачного фона).

Оформление

Мы приветствуем команды, в которых работают корректоры и прочие граммар-наци. Даже, если вы не готовы вводить в штат дополнительную единицу, простые правила всё равно надо заучить.

  • В тексте ставим кавычки «ёлочки».
  • Знак % отбиваем от числа неразрывным пробелом.
  • После заголовка не ставим точку.
  • Названия на иностранных языках пишем без кавычек.
  • Подписываем изображения, потому что не все из пользователей — экстрасенсы.
  • В русском языке есть буква Е и буква Ё.
  • Тире и дефис — это не одно и тоже. Дефис не отбивается пробелами, поскольку является частью слова.
  • Если в конце пункта в маркированном списке стоит точка с запятой, то следующий пункт начинается со строчной буквы.

Надеемся, что статья пригодилась. Если возникли вопросы, пишите или звоните: мы любим поболтать.

Автор: 1

Читайте также: