Стандартные 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 — файл с обнулением стандартных свойств тегов

Пример базового набора (заготовки — HTML шаблон) файлов/папок находиться тут. Если нет отдельных требований — используем свое.

Наименование изображений
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 — название для хедера и только так
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">. Обычно у пункта автивного состояние такое же поведение, как у ссылки меню по наведению, поэтому, если дизайнер этого не показал, то необходимо прописать активный пукнт такой же, как и по наведению.
Пример реализации выпадающего навигационного меню на HTML/CSS.

Списки

Так как у нас используется и должен использоваться 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>

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

<ul class="pagin"> <li class="prev"><a href="#"><</a></li> <li><a href="#">1</a></li> <li><span>2</span></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li class="next"><a href="#">></a></li> </ul>

Для текущей страницы нет ссылки, что логично, ее кликнуть нельзя. Для остальных есть ссылка, первая и последняя ссылка — вперед и назад, уголки вставляем только как спецсимволы

Вас также может заинтересовать