Простые правила разметки
Разметка страницы может быть непростым занятием, особенно поначалу. Какой тег выбрать? Какой класс добавить? Какой должна быть разметка, чтобы стили одного элемента не поломали другой?
На все эти случаи есть простые правила, следуя которым вы сможете писать легко писать чистый, хорошо структурированный HTML-код, который будет удобно читать и приятно поддерживать.
Используйте HTML-тэги по смыслу
Элементы для основной раскладки
- header — шапка страницы или блока.
- footer — подвал страницы или блока.
- main — главная смысловая часть страницы.
- section — разделы внутри основного контента.
- article — отдельная статья, пост или комментарий.
- nav — навигация, ссылки для перемещения по сайту.
- aside — боковая колонка, дополнительный контент не входящий в main .
Элементы для содержимого
- h1-h6 — заголовки. Обычно h1 — это название сайта. Заголовки нужно использовать в порядке иерархии, это важно для доступности.
- ul и ol — списки, в них удобно размещать любые перечисляемые элементы.
- button — кнопка, например, элемент управления или кнопка для отправки формы.
Для элементов без особой смысловой нагрузки можно использовать div или span .
Для разметки страницы нельзя использовать теги, предназначенные для оформления текста: например, b и i . У них есть собственные стили, которые со временем может понадобиться переопределить или сбросить — проще сразу выбрать элемент, у которого нет стилей по умолчанию. Тег p уместно использовать для блоков текста, но для других случаев лучше выбрать div .
Это далеко не все теги, которые существуют: вот здесь есть удобный список тегов, сгруппированных по смыслу, с комментариями и примерами кода.
Не знаете с какой стороны взяться за дело? Начните со статьи Первые шаги.
1.2. HTML-элементы
HTML-элементы — основа языка HTML. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя элемента.
Все HTML-элементы делятся на пять типов:
- пустые элементы — , ,
, , ,
,
, , , , , , , , ;
- элементы с неформатированным текстом — , ;
- элементы, выводящие неформатированный текст — , ;
- элементы из другого пространства имён — MathML и SVG;
- обычные элементы — все остальные элементы.
В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие элементы исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.
Полный список HTML-элементов
| Элемент | Описание | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Используется для добавления комментариев. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Создаёт гипертекстовые ссылки. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title . | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь элемента . | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Загружает звуковой контент на веб-страницу. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Выделяет текст как цитату, применяется для описания больших цитат. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Представляет тело документа (содержимое, не относящееся к метаданным документа). | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Перенос текста на новую строку. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Создает интерактивную кнопку. Элемент может содержать текст или изображение. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Добавляет подпись к таблице. Вставляется сразу после открывающего тега
Таблица-шпаргалка с элементамиДля удобства пользования я сгруппировала HTML-элементы по тематическим разделам, добавив значения свойства display . Чтобы перейти к таблице, кликните по рисунку. HTML тег HTML тег недавно введен в HTML5. Он используется для группировки логически связанного контента и создания разделов страницы (блок новостей, контактная информация и т.д.). Тег часто используют при создании “посадочных страниц” (landing page) для разделения страницы на логические блоки. Тег может быть вложен в тег , разделяя содержащийся в нем контент на логические блоки. При этом необходимо, чтобы в теге и вложенном в него теге были использованы заголовки — . Допускается также использование заголовка в каждом разделе, определенном тегом . Тег может вкладываться в тег , если необходимо сформировать тематические блоки в разделе. При этом на элементы также распространяется правило размещения заголовков, о котором говорится выше. Тег может также быть вложен в другой тег, но при этом иерархия заголовков не должна нарушаться. Не используйте тег в качестве универсального контейнера для создания структуры страницы; для этих целей используется тег . СинтаксисСодержимое элемента заключается между открывающим ( ) тегами. Закрывающий тег обязателен. ПримерРезультат
АтрибутыКак добавить стиль к тегу ?Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
Цвет текста внутри тега :
Стили форматирования текста для тега :
Другие свойства для тега :
Поддержка браузераHTML разметка текста
Существует ещё 7 HTML5 тегов, которые можно использовать для создания различных блоков. Они используются реже, поэтому мы не будем их рассматривать. Разметка страницыКогда мы познакомились с основными тегами-контейнерами, давайте приступим к созданию простого HTML каркаса. Откройте ваш HTML документ и запишите туда все стандартные теги, по типу < html >, < head >, < body >и < meta >. Создание нашего макета будет проходить в 3 этапа:
Для начала необходимо создать шапку для нашей страницы. Создаем тег < header >, а в нем располагаем заголовок(будет использоваться вместо логотипа) и список с пунктами меню. Создадим главный блок страницы. Это будет тег-контейнер < section >, в котором будет располагаться список преимуществ товара и кнопка перелистывания. Далее приступаем к созданию основных блоков. Для них будем использовать теги . Первый блок обернем в тег < article >, так как в нем будет располагаться публикация с информацией о продукте. Второй блок будет содержать в себе прайс-лист и кнопку. Внутри создаем 3 блока < div >, в которых создаем списки с информацией. Ниже располагаем кнопку. Далее идет создание футера страницы Теперь расположим подвал страницы, в котором будет находиться контактная информация и кнопки социальных сетей. Создаем тег и записываем основную контактную информацию. Кроме контактов, нам необходимо разместить информацию о копирайте. Заключение
У нас получилась простая HTML страница из нескольких блоков, которая не имеет особой привлекательности, пока что. В следующих статьях мы сделаем стилизацию всех этих блоков. Если хотите, можете самостоятельно исследовать HTML-документ. Можете добавить туда какие-либо блоки или заменить информацию, по вашему усмотрению. Главное, не меняйте общую структуру документа, он нам ещё понадобится. А если у вас возникли трудности с размещением элементов или записью HTML кода, то можете скачать наши исходники. Удачи в изучении! |
