RSS

Прокоментируй статью, хотя бы пару слов!

Комментарии:

  • #1

    Bars

    06.05.2012 02:13:14

    Думаю, семантическая верстка будет не только популярнее, вроде как это было с «версткой div`ами против верстки таблицами», но и стоить дороже.
    По себе знаю точно, что пока всякие новшества, которые использует Гугол или Яша, кто-то изучает и думает: «А надо ли переделывать/доделывать, это же геморно» – я делаю. От этого раньше них пожинаю плоды. От этого что-то лучше. Хотя, стал я таким совсем недавно. 

  • #2

    Bars

    06.05.2012 02:14:44

    И, да, есть предложение отправлять статьи на проверку орфографии перед публикацией :) 

  • #3avatar

    Елена Лунная

    06.05.2012 06:46:02

    Bars:
    Несколько замечаний

    • Я ни разу не слышала чтобы дивная вёрстка стоила дороже табличной. Заказчикам на это обычно плевать, главное требование - кроссбраузерность в разумных пределах. Верстать дивами важно для самого верстальщика, например если вы посмотрите предыдущую статью про вёрстку рамки - люди предложили пару способов вёрстки сложной рамки используя 1 html элемент, понятно что 1 html элемент в 10 раз проще использовать чем таблицу из 9 ячеек скажем. Также у меня есть пример вёрстки дивами где верстальщик только на одно меню использовал 500 (!) элементов (на вёрстку всей страницы у него ушло 3800 элементов).
    • Статья абсолютно не о том, надо ли переделывать вёрстку для семантики или нет. Статья о том, чтобы делать это правильно. Если вы все дивы замените на <section> - вёрстка ведь семантичной не станет.
    Я бы с удовольствием отправляла статьи на проверку орфографии и пунктуации, но у меня нет знакомых редакторов. И я не знаю сколько это будет стоить.

  • #4

    Bars

    08.05.2012 15:27:06

    • Это года 3 назад было. Наткнулся на заказчика на фри-ланс.ру. Заказчиком оказался самопровозглашенный СЕО-шник. (На div`ную верстку я тогда не хотел переходить.) Сделал ему все от корки до корки: дизайн, сразу же сверстал (таблицей) и начинку сделал. Так вот он через пол-месяца обратился ко мне же, чтоб я ему переверстал дивами. Я понимаю, это, возможно и единичный случай странности, но все же.
      Бывало, на том же ресурсе частенько встречались срочные заказы: "нужна верстка. За блочную - бонус" :)
    • Я и не говорю, что надо бездумно div`ы заменять на section ) Ясно, что надо с пониманием и знанием к этому подойти. К примеру, schema.org/ImageObject немного помогла привлечь трафик на фото-хостинг с Я.

  • #5avatar

    Елена Лунная

    09.05.2012 10:04:44

    Ну, а как вы используете семантическую вёрстку и как бы вы сверстали пример из статьи?

  • #6avatar

    SelenIT

    13.05.2012 17:32:30

    Елена, спасибо за тему и разбор!

    Лично я очень давно стал подозревать, что семантика в вебе практически настолько завязана на поисковики, что на самом деле <a href="http://www.acronymfinder.com/Search-Engine-%28SE%29.html">SE</a>-<a href="http://religion.historic.ru/books/item/f00/s00/z0000000/st046.shtml">мантика</a> :). Но как раз "гуру" типа тех же "докторов" в один голос утверждают, что она в первую очередь "про доступность" (напр. чуть ли не единственный критерий оборачивания группы ссылок в nav — нужна ли этим ссылкам функция «Skip navigation»)...

    Для себя я пока сделал такие выводы:

    • в спорных случаях семантически нейтральный элемент (те же div и span, реже p) лучше (как минимум, меньшее зло) чем суперсемантичный, но употребленный не по назначению;
    • семантика должна определяться тем, чем является информация для пользователя, а не для программного движка сайта;
    • неплохой тест на семантичность — понятность логики страницы при дефолтных браузерных стилях. Если что-то в них (напр. маркеры списка) не помогает интуитивному пониманию структуры, а мешает — скорее всего, элемент использован не по назначению.
    Например, я не так давно осознал, что «хлебные крошки» нельзя размечать одноранговым списком — у него семантика «от другой задачи».

    Что касается новых структурных элементов, в них я понимаю логику разве что этого самого «целиком переносимого в какой-то другой контекст без ущерба смыслу» ананасного Зойд... в смысле, артикула, ну и того же nav. А header/footer, которые ни на outline не влияют, ни друг от друга толком не отличаются — по-моему, вообще вкусовщина какая-то (хотя аналогию с печатными колонтитулами, на мой взгляд, провести можно).

  • #7avatar

    Елена Лунная

    13.05.2012 20:40:35

    Ну, раз уж мы говорим о семантике, давайте поговорим и о хлебных крошках. Вопрос как оформлять хлебные крошки: одноранговым или нумерованым списком, строкой, или xml-деревом - очень интересный. Я не удержалась и прочитала все 4 страницы обсуждений. Вариант представления крошек как xml дерева списков (!) прям вообще такой... неожиданный. Клёво короче. Я считаю что когда люди собираются и что-то обсуждают это всегда позитивно. Однако всю идеологическую начинку, всю семантику и всю индексируемость поисковиками в данном случае превосходит фундаментальный принцип программирования - Принцип KISS.
    Если вы читали мою статью, то знает что я советую только одно правило, относящееся к семантике: если нужны хлебные крошки - делайте, если есть возможность не делать хлебные крошки - не делайте.

  • #8avatar

    SelenIT

    14.05.2012 16:06:07

    Вопрос «делать или не делать» чаще зависит скорее от дизайнера, имхо... хотя в главном я согласен :). Насчет KISS-принципа — тоже: именно потому, что одноранговый список абсолютно ничего не добавляет ни в семантику, ни в функциональность «крошек» (ни человеку, ни машине), но вносит лишнюю разметку — то и нечего этот список там городить, просто "потому что принято" (а-ля карго-культ). Если интересны многостраничные обсуждения, я еще и на xpoint-е всласть похоливорил на эту тему :). Хотя тут я упомянул «крошки» чисто для примера.

    Насчет каталога, мои «имхи» таковы:

    1) горизонтальное меню ссылок на разные страницы сайта
    [i][/i]<nav> уровня страницы.
    2) весь блок шапки страницы содержащий...
    <div> (связь элементов чисто визуальная), для корзины имхо уместен <aside> уровня страницы.
    3) блок содержащий поисковые фильтры — является самой важной навигацией по каталогу
    По смыслу подходит <header> раздела товаров — «a group of introductory or navigational aids».
    4) блок одного фильтра
    Надо смотреть, как фильтр устроен. Вариант с<fieldset> логичен. Была мысль, что тут-то может быть уместен <menu> (в стиле второго примера из спецификации:).
    5) блок содержащий товары
    <div>. Секция (<section>) с товарами, на мой взгляд, включает в себя не только сам блок с товарами, но и те самые «navigational aids» (блок фильтров и постраничку).
    6) блок одного товара
    <article> (в идеале с чем-то таким внутри).
    7) постраничную навигацию
    <header> или <footer> (на выбор, они почти полностью взаимозаменяемы) секции с товарами.
    8) подвал страницы.
    <footer> всего документа.

    На истину в последней инстанции не претендую, но моё текущее понимание задумки HTML5 подсказывает именно такой вариант...

  • #9

    17.05.2012 03:17:21

    Кстати, в <aside> этого топика, по-моему, вполне пойдет вот такая давнишняя картинка :)


Чтобы оставить комментарий нужно войти или зарегистрироваться (Регистрируйтесь за 5 секунд, без подтверждения email и т.п.).
Либо волшебно используйте ваш логин в Google, Яндекс, рамблер или ЖЖ чтобы войти через Open_ID
Подпишитесь на статьи через RSS

15 самых популярных статей: