Яким має бути код HTML/CSS
RUUA
Головна » ПОСЛУГИ » HTML-верстання » Вимоги до HTML-верстання

Вимоги до HTML-верстання

Загальні вимоги до HTML-верстання (зокрема для CMS TYPO3)

  1. HTML перевіряється на валідацію у відповідності до заданої версії HTML.
  2. CSS перевіряється на валідацію у відповідності до заданої версії CSS.
  3. Верстання тільки шарами. Таблиці допускаються тільки в контенті або їх використання має бути аргументоване.
  4. Не повинно бути зайвих CSS класів і закоментованих ділянок коду.
  5. Використання зрозумілих (логічних) назв для класів. Наприклад: не використовувати ".oshibka" або ".green", повинно бути ".error".
  6. Кодування файлів - UTF-8.
  7. Усі специфічні символи (äöüßÄÖÜ) а також лапки, амперсанд, дужки та апостроф мають бути перекодовані в HTML Entity Name.
  8. Усі тэги <img> мають властивість "alt".
  9. Усі вказані нижче браузери повинні на 100% 1:1 повторювати PSD -шаблон. Аж до пікселя. Усі відмінності обов'язково мають бути обгрунтовані.
  10. Меню зроблені через списки <ul>
  11. Усі унікальні елементи (header, footer, content, etc) повинні мати ідентифікатор id замість class.
  12. Усі елементи мають бути обгорнуті в <div>. Наприклад, має бути <div id=”header”><div id=”logo”><img /></div><div>…</div></div> замість <div id=”header”><img class=”logo” /><div>…</div></div>.
  13. Мають бути передбачені і протестовані довгі назви пунктів меню.
  14. Зміна розмірів вікна браузеру не повинна призводити до некоректного відображення сайту. Те ж саме відносно збільшення і зменшення шрифтів.
  15. Використання JavaScript має бути зведене до мінімуму.
  16. Використовуйте усі стандартні HTML теги. Замість <div> можна використовувати:
    • h1, h2, h3 і т.д.
    • ul, ol, dl
    • strong, em
    • cite
    • abbr, acronym, code
    • fieldset, legend, label
    • caption, thead, tbody, tfoot
  17. Для зображень по можливості використовуйте GIF/PNG з 8-бітовим альфаканалом замість PNG-24.
  18. Для гнучких макетів обов'язково мають бути встановлені максимальна і мінімальна ширина.
  19. Обов'язково прописувати cursor:pointer для кнопок зроблених за допомогою зображень.
  20. Для форм при назві поля обов'язково використовувати label із заповненим атрибутом for.
  21. Для нестандартних шрифтів використовувати технологію Cufon (якщо не обумовлене інше).
  22. Колір фону для body задавати обов'язково.
  23. Для JavaScript використовувати бібліотеки jQuery.
  24. Для однорядкових елементів (меню і так далі) обов'язково задавати властивість white-space:nowrap.
  25. Для випадних меню при обробці кліка вказувати href='javascript: void(0)' замість href=”#”.
  26. Футер завжди має бути притиснутий до низу (якщо не обумовлене інше).

Усі CSS файли повинні дотримуватися наступної структури:

  1. Спочатку загальні CSS властивості: шрифти, заголовки і оформлення посилань.
  2. Далі основні частини сторінки в тому порядку, як вони розташовані на сторінці. Наприклад: logo, main content, sub content, main navigation, sub navigation, footer.
  3. Потім описи загальних елементів, що зустрічаються на сторінки в різних місцях. Наприклад: borders, form styles, кнопки.
  4. Для опису стилю використовувати найближчий унікальний елемент: #logo a замість #header a (мається на увазі структура #header #logo a).

Стандарти

  1. Валідність: XHTML 1.0 Transitional і CSS 2.1 специфікацій.
  2. Підтримка браузерів: Firefox 11+, Internet Explorer 7+, Safari 3+ Опціонально: Chrome 9+, Opera 11+, Internet Explorer 6

Коментарі

Коментарі обов'язкові і по можливості англійською мовою.

Кожен файл повинен мати початковий коментар:

/*------------------------------------------------------
Version: {version_number}
Author: {autor}
E-mail: {email}
------------------------------------------------------*/

Також має бути коментована кожна секція. Наприклад:

/* 1. Обнулення CSS */
/* 2. Типові елементи */
/*   2.1. Залоговки h1,h2,h3 */
/*   2.2. Посилання */
/*   2.3. Списки */
/*   2.4. Елементи форм */
/* 3. HEADER (Шапка) */
/* 4. CONTENT (Вміст) */
/* 5. COLUMNS (Зправа та зліва) */
/* 6. FOOTER (Підвал) */