Как выглядит красивый HTML-код

Как выглядит красивый HTML-код

Крис Койер (Chris Coyier), автор CSS-Tricks, опубликовал замечательную схему того, как, по его мнению, должен выглядеть красивый и современный HTML-код. В своей статье он показывает пример, который представлен в трех вариантах: PNG-скриншот; оригинал в PSD-формате; текстовый вариант. Ниже я хочу привести свой свободный перевод комментариев ...

Комментарии (58)

  1. код красивый, но не оптимальный ;-)

  2. А что такое красивый код?

  3. Жаль только, что «костыли» для IE портят картину. Насчет , я думаю, тоже не все согласятся.
    А под Free From Styling, наверное, имеется в виду то, что страница будет отображена корректно вне зависимости от того, какие стили подключаются, например, можно же сделать несколько CSS, один для десктопа, один — для мобильных устройств типа iPhone, и при этом HTML менять не придется вовсе.

  4. Отличная статья, вроде бы все выполняю, кроме 1 файлового CSS. Уж здесь мнение разбегается.

  5. 1. HTML5.
    2. DOCTYPE
    Можно, но поддержка в браузерах ограничена. Но лично я — только за.

    3. Indentation (отступы) — в коде
    Нет. Код должен быть в одну строку.

    4. Charset (кодировка) — указывается
    Нет. Чарсет указывается в HTTP-заголовке сервером.

    5. Title (заголовок) — заголовок сайта прост и понятен.
    Это да. Причем сначала именно именно название страницы.

    6. CSS — используется только один файл стилей
    +100500 Только один файл.

    7. Body (тег ) — к нему добавлен идентификатор
    Не обязательно.

    8. JavaScript — jQuery
    Не обязательно. Могу поспорить, кто там самый красивый.

    9. File Paths (пути к файлам) —
    Полные пути к изображениям?.. Может быть и так.

    10. Image Attributes (параметры изображений) —
    +100500 Маст хэв.

    11. Main Content First (главный контент — в самом начале) —
    Да.

    12. Appropriate Descriptive Block-Level Elements (соответствующие описательные блочные элементы)
    Можно, но для IE придётся ставить довольно большой костыль.

    13. Hierarchy (иерархия) — используются теги заголовков …,
    Да.

    14. Appropriate Descriptive Tags (семантически правильные теги)
    Да.

    15. Common Content Included (подключение повторяемого содержимого)
    А как иначе-то? Никто, я думаю, не пишет отдельно два (три и т.д.) облака тегов. Оно всегда одно подключается на разных стр.

    16. Semantic Classes (семантические классы) —
    Да. Сам пользуюсь недавно, года 3, но не раз оценил удобство при разработке.

    17. Classes (классы) —
    Разумеется да.

    18. IDs (идентификаторы) — применяются только к какому-то одному элементу
    Разумеется да. Иначе быть не может. Это же ID. А валидность? А javascript?

    19. Dynamic Elements (динамические элементы)
    Непонятно, о чем идёт речь.

    20. Characters Encoded (символы закодированы) — если это специальные HTML-символы, то они закодированы.
    Бред. В utf-8 все символы можно писать текстом, как они есть, без извращений типа & # x00e4; или & # 0228;. К тому же такие символы не индексируются и занимают больше байт! :-)

    21. Free From Styling (независимость от стилей) —
    Да, сайт должен быть юзабельным с откл. стилями. Меня, к примеру, раздражает тёмный фон и белые буквы, я на таких сайтах сразу отключаю CSS.

    22. Comments (комментарии) — закомментированы те участки кода
    Только на стадии разработки. В production use никаких каментов и отступов, всё в одну строку.

    23. Valid (валидность) — код должен быть валидным
    +100500 Маст хэв.

    • 4. Charset (кодировка) — указывается
      Нет. Чарсет указывается в HTTP-заголовке сервером.

      Плохо, когда чарсет указывается сервером. Если вебмастер не является админом сервера, то настроить HTTP-заголовки он не может.

      • Знания и только знания. Настроить кодировку можно легко. Для некоторых тегов доступен атрибут charset, для php скриптов и иже с ними (и других) передача заголовка header, и многие сервера позволяют переопределить кодировку в своих настройках, документация)

  6. закомментированы те участки кода

    Думаю, лучше перевести как

    документированны те участки кода

  7. Согласен почти со всем. Вот читаешь, и понимаешь что так и поступаешь.
    Оспорю:
    1. JQuery -> mootools по красоте кода и возможностям ни на йоту не уступает. Да и пошустрее будет.
    2. Внешним источникам css/js предпочитать внутренние. Для быстрого же доступа к сайту использовать google cloud и т.п. (это даст больший прирост, чем включение jQuery, mootools из репозитория яндекса, гугла)
    Добавлю:
    1. Javascript -> подключение в конце документа перед закрытием body (быстрее будет).
    2. Минимальное использование количества подключаемых файлов (касается всего: js, css).
    3. Отложенная загрузка изображений (lazy load).

  8. Пиз*дешь и провокация. Он сам не знает что пишет этот Крис Ктотатам!!!