Стандартні HTML елементи та структура сайту

Загальні вимоги

Існують базові вимоги (стандарти), і спеціальні вимоги або пояснення, які повинен надати (“зібрати” під час спілкування з клієнтом або на основі аналогічних проєктів, або на основі отриманого раніше власного досвіду) Project Manager (PM) під час постановки завдання.

Слідами статті “Чистота і порядок – понад усе. Рекомендації до коду“.

Верстка має бути блоковою, таблиці можна використовувати тільки для надання табличних даних у контенті. Усі значки на кшталт копірайту, умляутів (німецькі літери з крапочками), куточки мають бути додані через спецсимволи (мнемоніки).
Відповідність макету – найголовніший пункт, інакше не можна буде прийняти роботу. Ще називають PixelPerfect, допускається зсув на 1-2 пікселі. У разі зсуву більше, відмінності можуть бути незначними, оскільки кількість пікселів сумується по сторінці, і елемент знизу може з’їхати на досить велику відстань. Відмінності є обґрунтованою відмовою від наданої роботи. Робота вважається невиконаною.
Заявлені вимоги до завдання, зазвичай це:
– кросбраузерність (список браузерів із версією “від”. Наприклад, вказується Internet Explorer 12+, Mozilla Firefox, Google Chrome, Apple Safari останніх версій. Іноді, до цього додається Opera)
– використання doctype (у 99% випадків це html5)
– проходження валідації на validator.w3.org
– використання css framework (bootstrap, skeleton, grid960 або ще що) чи ні
– препроцесорів (less, sass), якщо використовується

Пункти, що стосуються css фреймворку і препроцесорів, – це спеціальні параметри, без яких легко обходиться більшість проектів, і за їхнє використання платять окремі гроші. Якщо вимоги не пред’являються – запитайте, щоб не було сюрпризів і фраз наприкінці на кшталт “а я думав(ла), що ви професіонали”. Може, і професіонали, але не телепати .

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

Структура папок, файлів та їх найменування

Ніякої кирилиці, ні в назвах файлів, ні в папках, ні в коментарях у коді.
Звичайний набір файлів і папок має такий вигляд:

Файли в корені
index.html – головна сторінка (завжди index)
catogory.html – сторінка категорії
blog.html – сторінка блогу
item.html – сторінка товару
contact.html – сторінка контактів
about.html – сторінка про компанію
і далі за змістом
Папки та файли в них
img – для картинок
Картинки .png і .svg – для елементів дизайну, у них бітрейт кращий, jpg – для фото, продуктів, наприклад.
js – для скриптів
Розміщуємо скрипт для ініціалізацій, зазвичай називається main.js – у ньому ініціалізуємо всі слайдери та інші скрипти.
Бібліотеки скриптів, як і бібібіліотеку jquery, підключаємо через cdn – тобто, з сервера (за можливості).
Обов’язково перевіряємо версії бібліотек і скриптів, підключаємо тільки останні.
css – для стилів
styles.css – загальний файл стилів
media.css – файл із медіа запитами
reset.css – файл з обнуленням стандартних властивостей тегів

Приклад базового набору (заготовки) файлів/папок знаходиться тут. Якщо немає окремих вимог – використовуємо своє.

Найменування зображень
logо – назва для лого, тільки так.
Для фонових зображень додаємо bg-, для іконок ico-
Наприклад, bg-top.png або ico-fb.png
Якщо є можливість, то краще давати тематичні назви, якщо це зробити не можна, то іменуємо ico-01.png, ico-02.png, bg-box.png і в такому стилі.

Основна структура сторінки

Шапка (верхній колонтитул, він же хедер, header)
<header class=”header”>header</header>
Клас header додаємо завжди, ніколи не можна вішати клас просто на тег <header>, його можна використовувати в контенті, і застосувати для всього відразу
Контент (контентна частина, та частина, де розміщуються основний текст або елементи, форми)
приклад сторінки блогу
<div class=”content”>
    <section class=”blog”>
        <article class=”item”>article 1</article>
        <article class=”item”>article 2</article>
        <article class=”item”>article 3</article>
    </section>
</div>
Тобто, <div> це структурний тег, використовується для побудови структури, як і інших елементів. Для контенту можна використовувати <section>,
Футер (він же нижній колонтитул, footer)
<footer class=”footer”>footer</footer>

Найменування класів

header</span > – назва для хедера і тільки так
logo – назва для логотипу
login, login-block, auth-block, user-block так може називатися блок з авторизацією
menu, nav назва класу навігаційного меню
content – назва класу для загального контенера, в якому знаходиться вся контентна частина
container – назва контенера, який може використовуватися для органічення ширини, вирівнювання
block – загальний клас, другорядного елемента
box – клас для контейнера, часто для однотипних повторюваних елементів усередині одного блогу, як батьківського
footer – клас для футера, тільки так
socials – клас для блоку або списку, який містить соціальні іконки

Усі класи можуть повторюватися на сторінці безліч разів, якщо вказувати стилі щодо безпосереднього батька. Наприклад, якщо меню розташоване в хедері та футері, і вкажемо стилі для меню щодо хедера і футера, то цей стиль застосується тільки в одному місці, а назва класу буде кілька разів на сторінці. Так і потрібно чинити скрізь, щоб не ламати голову над унікальною назвою класу.

Основні елементи

Навігаційне меню / багаторівневе. Це найважливіший і найскладніший елемент будь-якого сайту.

<ul class=”menu”>
    <li class=”active”><a href=”#”>Home</a></li>
    <li>
        <a href=”#”>Products</a>
        <ul>
            <li class=”active”><a href=”#”>Category 1</a></li>
            <li><a href=”#”>Category 2</a></li>
            <li><a href=”#”>Category 3</a></li>
        </ul>
    </li>
    <li><a href=”#”>About</a></li>
    <li><a href=”#”>Contact</a></li>
</ul>

Тільки чистий список. Ніяких класів ні на <li>, ні на <a>, і також не можна додавати класи на вкладені <ul>, усі класи додаються відносно батьківського <ul>. Іноді краще (гнучкіше) розташувати меню в блоці з класом menu, і не вішати його на батьківський <ul>, оскільки залежно від CMS назва може відрізнятися і так буде універсальніше. Єдиний клас можна додавати тільки на <li> – це клас активного стану- active, ось у такому вигляді <li class=”active”>.
Зазвичай у пункту автивного стану така ж поведінка, як у посилання меню за наведенням, тому, якщо дизайнер цього не показав, то необхідно прописати активний пукнт такий самий, як і за наведенням.

Списки

Оскільки у нас використовується і має використовуватися reset.css, який обнуляє всі стандартні відступи та інші властивості, то всі списки <ul>, <ol> будуть обнулені, не буде ні булетів, ні цифр. Їх потрібно буде окремо прописувати щодо тематичної області (текстової) і тільки там, оскільки списки в нас є в хедері щонайменше, а часто є ще окреме навігаційне меню у футері.

Кнопки

Зазвичай, це тег із class=”btn”. При цьому, розрізняємо кнопки для форм і кнопки взагалі. Для форм використовують <input> та <button>, для всього іншого – тег <a>. Ось у такому вигляді <a href=”#” class=”btn”>Button</a>. Якщо кілька різних кнопок і вони схожі між собою, то потрібно робити гнучко, щоб можна було додавати додатковий клас, щоб змінювати розмір і/або колір кнопки <a href=”#” class=”btn small orange”>Button</a> – у такому вигляді.

Картинки

Картинки, які використовуються в контенті, обертаються в тег <figure>, якщо у картинки є підпис, то обертається в figcaprion
<figure>
<img src=”/images/img-01.jpg” alt=””>
<figcaption>title</figcaption>
</figure>

Пагінація (розбивка на сторінки)

Для поточної сторінки немає посилання, що логічно, її клікнути не можна. Для решти є посилання, перше й останнє посилання – вперед і назад, куточки вставляємо тільки як спецсимволи

Вас може зацікавити

Чому мій сусід робить сайт за $40, а ти за $800?

Порядок роботи над веб проєктом. Загальні рекомендації.

Стандартні HTML елементи та структура сайту

HTML5 CSS3 Pixelperfect верстка landing – частина 2

HTML5 CSS3 Pixelperfect верстка landing – частина 1