Вопрос про стилистику верстки. Как правильно верстать?

Question

[keche]

Есть например контейнер в нем логотип. Слева у лого картинка, справа текст. Как лучше сделать лого в одном блоке и картинку и текст. Или например создать div для лого, слева разместить div для картинки а справа div для текста.

Есть ли вообще какие то правила хорошего тона верстки и как правильно? Или не играет роли такой вопрос? Главное реализовать как можешь?

И как правильно по валидации или как лучше для SEO оптимизации под Яндекс и Google?

Answer 1

[Антон]

Все картинкой! Это же лого...
Допишешь текст в alt, title

Comments

[Justin Bieber]

в смысле допишешь, а как вывести альт или тайтл? где можно посмотреть на рабочий пример?

[Антон]

Justin Bieber: пример: < IMG SCR="attributes.png" title="Атрибуты" alt="Атрибуты" /> Не нужно, делать отдельно текст от лого, разве, если он не является частью логотипа. Просто берешь все картинкой и вставляешь, добавляешь описания в картинку, для SEO самое оно.

[Justin Bieber]

нихера не понял конечно, то что хочет автор, разве не совсем другое?

Answer 2

[Андрей Верх]

Без разницы. В данном случае, можно и просто бэкграундом картинку задать. От дополнительной картинки в логотипе, сайт в топ 10 не выйдет.

Правило одно - картинки выводить картинками, а элементы оформления - фоновыми изображениями.

Answer 3

[Gleb Gryadk.in]

Правила хорошего тона:

1. логотип - ссылкой на главную
   
2. не плодить сущностей без надобности
   

Как верстать - в зависимости от содержания, чем проще и короче код, тем лучше.

Answer 4

[Ankhena]

Логотип должен быть ссылкой на главную страницу сайта.
Поэтому:

Вариант 1:
Логотип, т.е. картинка с текстом это единое целое и текст в ней не должен быть текстом.
Значит в HTML это просто ссылка без анкора, у которой фон это картинка.

Вариант 2:
Если текст должен быть текстом.
Тоже самое, только в анкоре у ссылки нужны слова. Можно со спанами, если несколько слов или строк и они должны иметь разный вид.

Исхожу из идеи, что картинки в оформлении должны быть background'ами. С помощью img вставляю только картинки которые ими являются с семантической точки зрения.
И второе: городить поменьше тегов. Т.е. img оборачивать еще и в div (это если меня не слушать и вставлять логотип с помощью img) - это вообще лишнее действие для которого нет оснований.

Comments

[Андрей Хохлов]

Логотип - это не элемент оформления. Для него даже schema.org разметка существует. Так что вас слушать не надо :(

[Ankhena]

Андрей Хохлов: Хорошо, если он оформлен микроразметкой, пусть будет img. Это ж все равно не повод оборачивать отдельно картинку в div и текст в div, а потом еще в общий div.

[Андрей Хохлов]

Ankhena W: А еще многие cms предполагают возможность смены логотипа из админки, то есть микроразметка это не единственная причина. Обертки использовать - повод, если того требует ситуация. С логотипами конечно такое редко бывает, но вот недавно у меня был логотип - картинка + 2 текстовых блока с разным стилем и определенным позиционированием поверх этой картинки. Текст просили сделать именно текстом. Итого .logo>.logo__img+.logo__txt1+.logo__txt2 - и ни одна из оберток не лишняя
Стандартный лого вот таким миксином делаю:

mixin logo(data)
  if (data.schema)
    .logo(itemscope itemtype="http://schema.org/Organization")&attributes(attributes)
      a(href="home.html" itemprop="url").logo__link
        img(src=data.image.src width=data.image.w height=data.image.h alt=data.image.alt itemprop="logo").logo__image
  else
    .logo&attributes(attributes)
      a(href="home.html").logo__link
        img(src=data.image.src width=data.image.w height=data.image.h alt=data.image.alt itemprop="logo").logo__image

[Ankhena]

Андрей Хохлов:
Ваш пример не противоречит тому, что писала выше.

А я против давать возможность клиентам править дизайн из админки. А уж тем более отдельно выдранный логотип. :)
Ну т.е. как против.. Они, конечно, могут делать все что им заблагорассудится. Но всегда пытаюсь объяснить, что они не для этого оплачивали работу дизайнера, чтобы потом взять и все раскрасить "фломастерами".
Из визуальных редакторов в админках убираю выбор шрифта, цвета и т.д. Дизайнер делает несколько продуманных стилей для выделений важных моментов, их и можно выбирать в редакторе. Кроме этого клиенту остается жирность, курсив, заголовки, sup, sub. Если надо какое-то новое выделение, не предусмотренное в дизайне, делаем новый стиль.

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

[Андрей Хохлов]

Ankhena W: согласен с вами, это суровая реальность и это боль :(