Я верстальщик. Веб-верстальщик

скачать книгу бесплатно


Пример использования парных тегов

Первым делом мы указываем доктайп, затем открываем html тег, в котором размещаем head внутри которого можно разместить title. Закрываем и тут же открываем body, в котором уже пишем весь код. В конце теги закрываются в порядке вложенности.

Маленький хак от Emmet

Возвращаясь к теме редакторов IDE можно упростить себе жизнь с плагином Emmet. Он позволяет вызвать шаблон-заготовку страницы html посредством следующих действий:

Пишем знак восклицания – !

Нажимаем таб

Получаем кусок кода, готовый к эксплуатации

Я такое часто применяю в редакторе Brackets.

Далее давайте разберем остальные теги.

<div> – Самый популярный тег, который используется для формирования страницы. Является блочным по-умолчанию. Т.е. растягивается по всей ширине занимаемого пространства и сразу понимает присвоенным значения. Например, если тегу a указать размеры, то он их не сможет понять до тех пор, пока вы в стилях не укажите ему другой display, например inline-block. Div это умеет делать сразу.

<h1>–<h6> – Тег заголовка [англ. heading – отсюда сокращение h], варьируется от уровня заголовка. H1 – самый важный и, соответственно, самый большой. А h6 уже меньше размера основного текста.

Заголовки жизненно необходимы для разделения текста на части, чтобы упростить чтение материала. Они также используются поисковыми роботами для определения содержимого страницы. Впрочем, и человек в первую очередь пробегается глазами по заголовкам и только потом читает сам текст (если читает).

Заголовок является блочным элементом.

На странице может быть не больше одного тега h1!

<p> – Данный тег используется для оформления текста в формате абзаца [англ. paragraph]. Чтобы абзац выглядел, как должен, а именно: быть единым целым, единицей текста, и иметь перенос текста в конце. Текст без обертки в параграф превращается в однородное полотно, которое трудно читать. Параграф не может быть обернут в тег ссылки.