fkn+antitotal

Мы уже давно пользуемся атрибутами: href задаёт адрес ссылки, src — путь к картинке, alt — её описание.

Атрибуты id и class особенные: они ничего не меняют на странице сами по себе, а дают элементам имена — по этим именам их потом находят CSS и JavaScript. Отсюда и название урока: это мост из HTML в CSS.

В уроке #12 в подвале страницы мы написали © и пообещали объяснить. Настал черёд спецсимволов — мнемоник.

Зачем они нужны

Во-первых, некоторые символы заняты самим HTML: если написать в тексте <, браузер решит, что начинается тег, и «съест» кусок текста. Во-вторых, часть символов не набрать с клавиатуры: ©, —, неразрывный пробел.

В уроке #11 мы верстали страницу коробками div и обещали рассказать про их осмысленные аналоги. Семантические теги — такие же блочные контейнеры, но их названия говорят браузеру, программам для незрячих и поисковикам, какую роль играет блок.

Типичная страница

Схематично страницу с семантическими тегами изображают так:

Все теги, которые мы разобрали, что-то значили: <p> — абзац, <ul> — список, <img> — картинка.
А <div> и <span> — контейнеры без смысла и без собственного вида. Их задача — группировать содержимое, чтобы потом оформить его через CSS. Но сначала — ключевое понятие, которое объясняет разницу между ними.

Блочные и строчные элементы

Элементы делятся на два типа поведения:

В уроке #9 мы перечисляли данные списком. Но если у каждого пункта есть несколько характеристик — товар и цена, день и занятие, — удобнее таблица.

Сразу важное правило: таблицы предназначены для табличных данных, а не для вёрстки страницы — расположение блоков на странице будем задавать через CSS в будущих уроках.

Списки — один из самых частых способов оформить перечисление: пункты меню, шаги инструкции, список покупок. Вы уже видели список в уроке #8 — там через него были перечислены форматы изображений. Теперь разберём, как он устроен.

Маркированный список: ul

<ul> (unordered list — неупорядоченный список) содержит пункты <li> (list item). Порядок не важен:

Изображения делают страницу живой. За них отвечает одиночный тег <img> — как <br> и <hr> из урока #5, закрывающего у него нет. Обязательных атрибута два: src и alt.

Ссылки — то, ради чего появился HTML: буквы HT в его названии означают HyperText, «гипертекст», то есть текст со ссылками.
Мы уже видели тег <a> в уроке #2, когда разбирали атрибуты, — теперь изучим его подробно.

Тег a и атрибут href

Ссылку создаёт парный тег <a> (anchor — «якорь»). Адрес страницы задаёт атрибут href, а текст между тегами видит пользователь — обычно он синий и подчёркнутый:

В уроке #5 мы научились делить текст на заголовки и абзацы. Теперь научимся выделять отдельные слова внутри текста. Все теги этого урока парные и живут внутри абзаца — вспомните вложенность тегов из урока #2.

Жирный: strong и b

<strong> отмечает важный текст, а <b> (bold) делает текст жирным без указания важности. На экране выглядят одинаково:

Скелет документа и служебная информация разобраны — переходим к содержимому, то есть к тому, что находится в <body> (см. урок #3). Самые частые элементы любой страницы — заголовки и абзацы: вы уже встречали их в примерах, теперь разберём подробно.

Заголовки: h1–h6

HTML предлагает шесть уровней заголовков: от <h1> (самый важный и крупный) до <h6> (самый мелкий):