Косячим: Верстка текста.

Основные ошибки при верстке текста (контента) на сайте.

Несемантическая верстка

  • Списки

    Неверно:

     - Пункт один;&lt;br&gt;<br /> - Пункт два;&lt;br&gt;<br /> - Пункт три.&lt;br&gt;<br /> &lt;br&gt;<br /> 1. Пункт один;&lt;br&gt;<br /> 2. Пункт два;&lt;br&gt;<br /> 3. Пункт три. 

    Верно:

       
    • Пункт один;
    •  
    • Пункт два;
    •  
    • Пункт три.
    1. Пункт один;
    2.  
    3. Пункт два;
    4.  
    5. Пункт три.
  • Параграфы

    Неверно:

    Параграф один. <br><br>

    Параграф два.

    Верно:

    Параграф один.

    <code><br />
  • Параграф два.

Заголовки

Неверно:

<code><span style="text-size: 24px;">Заголовок</span><br />

Подзаголовок

<code><br />

Подзаголовок

Верно:

Заголовок
<code><br />

Подзаголовок
<code><br />

Подзаголовок


Встречаются и другие ошибки, но эти зачастили. Советую загуглить запрос «семантическая верстка». Там конечно рассказано про CSS, но все те правила нужно использовать и при верстке текстов. Основной смысл такой — если делаем спискок, то делает его тегом списка, если делаем заголовок, то тегом заголовка и т.д.



Перенос предлогов
на новую строчку

  • Используем непереносимый пробел

    Ошибочно:

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

    Грамотно:

    В&nbsр;чащах юга жил&nbsр;бы цитрус? да, но&nbsр;фальшивый экземпляр!

Для этого есть специальные утилиты, например «Реформатор»



Картинки без отступов

У любой картинки в тексте должен быть отступ, поэтому нам необходимо создать всего-лишь одно правило на CSS. Если блок с вашим контентом имеет id="content", то правило будет выглядеть так:

  • Отступы у картинки
     #content img {margin: 20px;} 


Тег readmore в неположенном месте

Если вы поставите тег readmore в случайном месте, то все открытые до него теги будут закрыты тегами верстки, что в свою очередь на 99% перекосит весь дизайн сайта, особненно если вы используете div в верстке текста.

  • Тег readmore

    Ошибочно:

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

    Грамотно:

    В чащах юга жил бы цитрус?



    да, но фальшивый экземпляр!



Делайте верно, и оно будет красивым.

P.S. Скопировали — вставили текс из WORD — бросьте в себя камень, бейте себя по рукам, наймите здоровенного мужика с волосатыми руками, который будет стучать вам по голове, когда вы делаете это. Так делать нельзя ни в коем случае.

5 comments
Очень смешное заключение к сстатье :)