Справка:Вёрстка

Это архивная страница с ныне недоступного сайта Lukomore.

В на этой странице собраны рекомендации по вёрстке страниц и шаблонов. Эта статья миллионная по счёту в интернете, но всё равно для многих участников наверное она будет полезна ибо призвана объяснить, что такое хорошо и плохо. Как верстают мудаки, а как профи.

Да безусловно, любая рабочая вёрстка может претендовать на жизнь, но главное не то, что бы просто работало как надо, а что бы при этом всё было аккуратно в html разметке ведь ваша работа будет открыта для редактирования другим участникам, которые возможно захотят продолжить ваши начинания и доделать какой либо шаблон. Однако когда всё написано через жопу, то всё желание доделывать пропадает и хочется просто создать свой новый шаблон не трогая весь тот бардак.

Понятное дело, что скорее всего ты, мой уважаемый читатель, не являешься профессиональным верстальщиком (иначе бы не читал это), поэтому лучше послушай, что здесь говорят и наматывай на ус, что бы потом не думать почему у тебя всё кривое и работает не так как хотелось.

Ниже будут приведены основные правила (частые ошибки во всяком случае типичные в вики среде) современной вёрстки. Понятное дело, что CMS MediaWiki и процесс редактирования с последующей проверкой парсера накладывает свои технические ограничения, поэтому будут озвучены самые озы.

Первое правило клуба — таблицы

Таблицами в web’е верстали на заре развития гипер разметки, когда всё было совсем печально. MediaWiki позволяет производить нормальную блочную вёрстку (блоками div). Таблицы изначально (на заре человеческой письменности, позже при создании GUI, и после при создании самой гипертекствой разметки) задумывались исключительно для текста. Поэтому в таблицах кроме текста лучше больше ничего не хранить. Не надо помещать в таблицы изображения, другие таблицы (для этого есть такие html атрибуты как colspan и rowspan) или блочные элементы.

Текстовые теги для визуализации и семантического веба

Уже давно в W3C было решено отказаться от html тегов для визуализации, для этого есть каскадные таблицы стилей — CSS (атрибут style в данном случае), а так же его диалекты вроде Sass, SCSS и LESS. HTML просто размечает данные, внешним видом занимается CSS. Не надо использовать такие html теги как big, small для визуализации текста. Для этого есть тег span и атрибут style в котором можно задать размер, начертание, семейство шрифтов и всё прочее для нужного выделенного участка текста. В свою очередь такие теги как strong в HTML5 выполняют семантическую роль. Они подчёркивают значимость текста в этом теге, визуальная составляющая просто прилагается по старой традиции и обратной совместимости. Именно по этому целевая статья всегда начинается со слова в этом теге. Это значит, что данное слово имеет высший приоритет перед всеми другими словами на странице, оно так и есть ведь вся страница посвящена именно этому определению. Если надо просто выделить слово жирным без акцента на его значимости для поискового робота, можно использовать тег b, хотя предпочтительнее так же для визуализации использовать стили, то есть тег span с атрибутом style в котором прописать CSS свойство text-weight:bold.

Семантические значения старых визуальных html тегов в семантическом стандарте HTML5 по официальным рекомендациям Консорциума Всемирной паутины

Тег	Для чего нужен
<b>	для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации
<strong>	как и раньше, помимо выделения текста жирным начертанием, означает повышенную значимость своего содержимого
<i>	содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски
<em>	означает эмфатическое ударение, эмоциональный акцент на, отмеченном этим тегом, отрывке текста. То есть когда в речи мы выделяем слова голосом
<small>	менее значимые, формальные, элементы
<s>	представляет информацию, которая утратила свою актуальность
<del>	означает изменения в самом web документе

При использовании того или иного тега в первую очередь руководствуйтесь этой таблицей значений.

Пользовательские классы и идентификаторы

Не надо прописывать html тегам свои пользовательские классы (class) и индивидуальные идентификаторы (id) кроме тех, что встроены в таблицу стилей MediaWiki по умолчанию вроде класса wikitable и прочих. Определить свои собственные стилевые классы вы нигде не сможете, стало быть толку от них нет. Lukomore целенаправленно и осознанно не добавляет в дополнительную общую (Common) таблицу стилей никакие пользовательские персонализационные CSS селекторы по понятным соображениям, там только переопределения стилей для общих тегов. В спецификации HTML, помимо явного подключения (JavaScript не считается и вообще в MediaWiki пользовательский js запрещён), нет никаких способов писать дополнительные таблицы стилей для отдельной страницы кроме как в специализированном теге style в теге head, к которому у пользователей в MediaWiki нет доступа, во всяком случае в базовой комплектации из коробки без расширений реализующих такой функционал. Расширений, а стало быть и инструментов, для подобных целей в Lukomore на данный момент нет и в будущем не предвидится.

Таким образом, если вы копируете в Лукоморье вики разметку из другого проекта то можете смело удалять все вышеупомянутые html атрибуты.

Исключением из данного правила может быть только использование встроенных в MediaWiki стилевых маркеров и классов для захвата блоков JavaScript скриптом для встроенного переключателя.