10 правил вёрстки статей
Вёрстка статей или HTML разметка текста — головная боль новичков и профессиональных онлайн изданий. Визуальный редактор это хорошо, но им надо уметь пользоваться или придерживаться хотя бы нескольких из предложенных правил HTML вёрстки статей.
Все стили в CSS
Нагромождение style, font, прочего — мусор. Выносите всё оформление в CSS. Оптимальное решение: укажите основной шрифт, цвет, прочее в теге BODY.
Выравнивай текст по левому краю
Выравнивание по краям увеличивает отступы между словами и затрудняет чтение текста. Оптимальные решения: выравнивание текста по левому краю или использование CSS3 свойство hyphens для расстановки переносов слов.
Контрастный с фоном цвет текста
Чем меньше соотношение цвета текста и фона, тем сложнее читать текст. Но небольшое его уменьшение улучшает сглаживание. Оптимальные варианты: фон #fff и текст #222 или фон #000 и текст #f7f7f7.
Заметные заголовки
По умолчанию все H-заголовки выделены крупным и жирным начертанием. Использование линий, цвета, прочего, редко даёт хороший результат. Оптимальные варианты: оставить по умолчанию; шрифт заголовка с засечками (serif), а текста — рубленный (sans-serif) и наоборот или цвет заголовка светлее, а текста — темнее и наоборот.
Верхний отступ заголовка больше нижнего
Верхний отступ заголовка должен быть больше нижнего. Это позволяет визуально отнести заголовок к ниже следующей части текста.
Простая структура текста
Сложная иерархия подзаголовков в тексте затрудняет его чтение. Оптимальные решения: простая структура текста или добавление списка содержания в начале статьи с соответствующим отображением иерархии её частей.
Читабельный межстрочный отступ
Размер межстрочного отступа (интерлиньяж) задаётся CSS свойством line-height и зависит от размера кегля (высоты) букв и ширины строки. Чем шире строка и крупнее кегль, тем больше интерлиньяж. Оптимальное решение: line-height:1.4.
Читабельная ширина текстового блока
Широкий блок затрудняет чтение текста. Оптимальное решение: ограничить ширину текстового блока CSS свойством width или max-width, при необходимости применяя его центрирование или разбиение на колонки.
Читабельный размер кегля (высоты) букв
Маленький размер шрифта затрудняет чтение текста. Оптимальный кегль букв зависит от шрифта, но обычно должен быть больше 12px. Оптимальный вариант: 14px или 16px, задаётся CSS свойством font-size.
Читабельные абзацы
Абзац задаётся тегом P. Если это не возможно — между абзацами вставляется пустая строка из двух тегов BR. В некоторых случаях CSS свойство margin (внешний отступ) абзаца обнуляется и добавляется отступ первой строки, используя CSS свойство text-indent.
Короткая ссылка: https://goo.gl/fb/Ocn8ja
Спасибо за советы-)
часто нагромождение фонтов и стайлов происходит когда в визуальный редактор вставляют уже форматированный где-то текст (например из какого-нибудь Word). а вставлять надо просто как текст и размечать внутри редактора - тогда результат сильно лучше.
про выравниванием по обеим сторонам несогласен. жутко раздражает выравнивание полевой стороне, выглядит неряшливо и колхозно.
Увы, но сейчас альтернативы выравниванию по левому краю по сути нет. Тот же перенос слов, т.е. hyphens:auto работает только в Safaru 5+, Firefox6+, IE10+ и iOS4.2+ при условии подключения соответствующего словаря, в то время как Crome, Opera, Android этого не поддерживают.
Кажется, звезды странице кто-то забыл прикрутить)
подскажите есть ли софт для верстки типа Индизайна только под HTML
Наверное, здесь всё зависит от круга решаемых задач. Например, для вёрстки статей вполне достаточно и визуального редактора, который обычно есть во многих CMS. Хотя, ими тоже надо уметь пользоваться — часто получается много «шлака» в конечном коде. Поэтому я обычно подготавливаю статью в визуальном редакторе (для себя набросал tinymce.c3h.ru), а потом допиливаю исходный код.
Если же речь идёт о создании сайтов, то здесь стоит отметить Adobe Dreamweaver. Нюанс в том, что это больше визуальный конструктор, а чтобы сделать что-то толковое всё равно надо работать с кодом. Поэтому здесь вполне достаточно и банального текстового редактора, вроде того же стандартного «Блокнота» в Windows или несколько более продвинутого и бесплатного Notepad++, также пользуется спросом Sublime Text, но он платный.
По поводу букв в тексте кое что возьму на вооружение, а как в статье смотрится картинка лучше? Обтекаемая текстом, слева или справа выровненная.
Вставка картинки в текст это уже тема модульной вёрстки. Её основу составляет прямоугольник. Так что важно понять как его вставить в макет и что с ним получится при адаптации контента.
Если интересно, советую прочитать советы А. Горбунова про модульную вёрстку и якорные объекты.
В самом просто случае картинку лучше оформить как отдельный абзац с выравниванием по левому краю, например:
<p><img alt="image" src="images/file.jpg"><p>
С учётом HTML5, лучше использовать теги <figure> и <figcaption>, например:
<figure>
<img alt="краткое описание картинки" src="images/file.jpg">
<figcaption>примечание к картинке<figcaption>
<figure>
Более сложный вариант: использовать центрирование, фоновое заполнение пустот, адаптивное ограничение ширины картинки и прочее. Всё это можно реализовать в CSS, например:
figure{text-align:center;background:#eee}
figure img{max-width:100%}