Стандартные 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 — название для хедера и только так
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