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

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

Начну я с того, что покажу текст статьи (некоего осмысленного материала) в структуре:

Самое главное название

Часть первая, вводная

Начало абзаца. Текст. Конец абзаца.

Часть вторая, основная

Начало абзаца. Тут опять идет текст для примера. Конец абзаца.

Для тех, кого не впечатляют схемы объясню: любой текстовый материал имеет название или заголовок. Он также может иметь подзаголовки - названия частей, глав, пунктов. Он состоит, безусловно, из текста, поделенного на абзацы. Абзац - цельная конструкция не только с точки зрения литературы. Текстовые редакторы, а также браузеры, обрабатывают абзац как единый блок, устанавливая ему выравнивание, поля и другие специфические параметры. В HTML-разметке абзац принято обрамлять парным тегом p: <p>Абзац.</p>

В корне отличается от него простой перенос строки, обозначающийся одинарным тегом <br>. Строки, разделенные <br> считаются и обрабатываются как единый абзац.

Большие тексты, не имеющие оформленных <p>абзацев</p> тяжело перевариваются роботами: поисковиками и программами для чтения. К тому же, границы абзацев, как правило, выделяются: это либо удвоенный отступ сверху, либо красная строка - в таком виде текст лучше воспринимается уже человеком (что для нас должно быть более важным, чем удобоваримость роботами). Разумеется, такое оформление часто задается автоматически. Для веб-документов правила оформления прописываются в файле стилей. Если возникает необходимость изменить оформление, это делается на "раз", а не ползанием по всем материалам.

То же касается оформления заголовков. Вместо того, чтобы вспоминать, как в ваших статьях оформляются подзаголовки и прочее, проще указать, что это Заголовок, и потом управлять им также из файла стилей. Кроме того, поисковики обращают внимание на названия, которые промаркированы именно как заголовки. Не смотря на то, что веб-разметка допускает аж 6 уровней заголовков, поисковики обращают внимание  только на первые 2-3 уровня.

А теперь давайте к практике. Первое, для тех, кто не боится html-кодов, предлагаю внести в стандартный (или уже слегка измененный) шаблон юкоз некоторые коррективы.

Откроем шаблон "Страница материала и комментариев к нему” каталога статей.  Обычно у юкоз код заголовка выглядит так:

<div class="eTitle" style="padding-bottom:3px;">
<div style="float:right">$MODER_PANEL$</div>
$ENTRY_TITLE$</div>

где $MODER_PANEL$ - это панелька управления материала: редактирование, удаление и пр. Сегодня она нас не интересует.

Название статьи, выводимое кодом $ENTRY_TITLE$, принимает вид из класса eTitle. Однако, нам бы хотелось видеть название в тегах главного заголовка. Подправим код следующим образом:

<div class="eTitle" style="padding-bottom:3px;">
<div style="float:right">$MODER_PANEL$</div>
<h1>$ENTRY_TITLE$</h1>
</div>

Нужно заметить, что теги заголовков h1, h2, h3 и остальные, также как и <p> имеют некое оформление "по умолчанию”, которое за частую не устраивает по дизайну. Вот ключевые свойства:

h1 {
font-size: 32px;  /* размер шрифта */
font-weight: bold;  /* жирный */
text-align:left;  /* выравнивание по левому краю */
line-height:37px;  /* интерлиньяж или межстрочный интервал */
margin-bottom:21px; margin-top:21px;  /* отступ снизу и сверху */
}

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

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

Открыли Ворд? Точно?

Молодцы. Теперь закройте! Если вы собираетесь переносить текст в веб, забудьте про этот редактор, как и про Writer (OpenOffice) и даже "Документы-Гугл”. Все они "притаскивают” в визуальный редактор немереное количество html-разметки. Она невидима для нетренированного глаза, но сильно увеличивает вес страницы (а также расходует количество символов, выделенных юкозом для текста статьи).

Если так удобно готовить статьи заранее, используйте Блокнот. В крайнем случае (если Вордом вы проверяете орфографию), вставьте сначала текст из Ворда в Блокнот, а уже из Блокнота - в браузер.

А дальше? Дальше мне надоело писать, а вам, думаю, уже надоело читать. И вообще, такие вещи лучше смотреть: практическая часть - на видео.

В следующий раз - правильно оформляем картинки в тексте.

Также полезно взглянуть на Читабельность.