Элементы HTML

Объекты и свойства

С самых первых занятий вы знакомились с языком HTML созданным для разметки документов веб-страниц. Язык этот состоит из большого количества элементов. Некоторые из них помогали вам оформлять материал для страницы курсового альбома. Что же такое элементы HTML?

Любой элемент HTML представляет собой, как и обычный объект — набор свойств. Каждое свойство состоит из двух частей. Имя свойства: связанное по смыслу с какой-то особенностью объекта и значение свойства, свойств без значений.

Каждое свойство обязательно имеет значение. Оно может быть текстом: слово, словосочетание, аббревиатура или числом с указанием единицы измерения.

По набору свойств и их значений мы можем отличать одни объекты от других или объединять их в группы с подобными. Например, как в детстве: Цветы на картине, фрукты и торт. Картину такую зовём…

Например, у элемента P только одних основных свойств больше 280. С увеличением мощностей компьютеров, развиваются браузеры. С ними совершенствуется и язык HTML. Добавляются новые элементы, у части старых меняются роли, другая чать удаляется и браузеры перестают их поддерживать. Добавляются и свойства описывающие элементы

Браузеры… Веб-страницы… Как же это связано с кодом, который мы пишем в документах HTML. Браузер создаёт веб-страницу так же, как вы пишите диктант. Он построчно читает код HTML и каждый его фрагмент либо выполняет, если это тег, либо отображает на веб-странице — текст, изображение и др.

Современным браузерам известны все современные элементы HTML и все их свойства. Для каждого из них у него имеется значение по умолчанию. Читая в коде открывающий тег очередного элемента, он сразу принимает набор всех его свойств, сравнивая с теми, которые записаны в атрибуте style или доступны из файла CSS, подключённому в элементе link по ссылке src.

Если для очередного свойства в правиле CSS значение указано, то применяется оно. Если нет — применяется значение по умолчанию, назначенное браузером.

У большинства элементов основной набор свойств совпадает. Браузер, прочитав открывающий тег очередного элемента и определив его место в структуре документа, перебирает все его свойства. Он применяет их значения к ещё не отображённому на экране тексту, как художник, стоя перед чистым холстом, смешивает краски на палитре.

Прочитав закрывающий тег, он убирает свою палитру, откладывая весь набор свойств текущего элемента и переходит к чтению следующего. Вся подготовка скрыта от глаз пользователя, но в результате на экране страница отобразится уже оформленной.

Все элементы браузер выводит на экран прямоугольными блоками. Исключением можно считать лишь единицы, которые не отображаются вовсе.

Рассмотрим некоторые из них. Почти у всех есть место для размещения контента. В нём располагается текст или изображения. Вокруг контента — 4 по́ля (padding), как у страницы школьной тетради. Каждое из них, следуя сверху по часовой стрелке, имеет своё названия.

  1. Верхнее padding-top?.
  2. Правое padding-right?.
  3. Нижнее padding-bottom?.
  4. Левое padding-left?.

Вокруг полей — 4 отдельные границы border-...?, после дефиса к ним, как и к именам полей, добавляются названия направлений. Это похоже на официальный документ оформленный в рамке под стеклом. И есть ещё 4 отдельных отступа margin-...? вокруг рамки, которые позволяют один элемент отодвинуть от другого. Их имена составляются так же, как для полей и границ.

Все перечисленные свойства есть у почти всех элементов HTML. Однако, у большинства из них значения по умолчанию padding-... и border-... равны нулю и они не отображаются на странице. Но чтобы содержимое элементов не слипалось с соседними некоторым по умолчанию установлены стандартные отступы margin-....

Значения свойств ширина, высота, поля, границы и отступы числовые — выражены числами. При каждом числе должны быть указаны единицы его измерения. Браузер должен знать в каком случае и какую линейку применить для разметки.

Единицы измерения делятся на два типа: абсолютные (статичные, постоянные) и относительные (динамичные, зависящие от размеров других элементов).

  • Пикселы px самая популярная абсолютная единица назначения экранных размеров. width500px. Её используют для указания точных размеров, позиционирования фрагментов на странице, расстояния между ними… Например, отступы для изображений, чтобы текст не прилипал к картинке.

  • Проценты % следующая, но уже относительная единица измерения. Заданный в процентах реальный размер меняется в зависимости от изменения размеров ближайшего предка. Можно, например, у элемента уменьшить размер шрифта: font-size80% для обозначения нижнего индекса. Часто проценты используют для динамического изменения размеров BODY резиновых и эластичных страниц, привязывая его к изменяемому размеру окна браузера width75%.

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

  • Эмы em ещё одна относительная единица измерения. 1em равен размеру шрифта заданному ближайшему предку. При изменении размера шрифта изменятся и размеры полей блока — pading.5em.

    Особенность эмов. Можно какому-либо элементу изменить, например, размер шрифта относительно базового в два раза font-size2em. Для всех его дочерних элементов реальный размер 1em будет увеличен в 2 раза относительно базового.

  • Автоматическое auto значение размера, браузер вычисляет самостоятельно. Но применять его можно только для ширины элемента и его отступов. Эти значения каждый блочный элемент имеет по умолчанию.

    Автоматическая ширина элемента стремится вытянуться от левой до правой границ контента родительского элемента, занимая всё выделенное для него пространство. А если размер полей, границ и отступов имеет ненулевое значение, то пространство распределяется и на них.

    Автоматическая высота — равна суммарной высоте всех строк (высота собственного контента). Требования к высоте элемента не столь жёсткие, так как за счёт прокрутки страницы она может быть любого размера и контент, время от времени, автором может меняться.

    Автоматические отступы сверху и снизу равны 0. Правый и левый — стремятся занять всё доступное пространство. А если назначить их одновременно, то элемент выровняется по горизонтальному центру родительского.

  • Ноль. Если какая-либо часть элемента, например, поля, границы или отступы не должны выводиться на экран, то значение размера нужно установить равным нулю width0. Имена размерных единиц, в этом случае, не добавляют. Если уж ноль, то неважно ноль чего.

Подробнее о единицах измерения читайте в справочнике ?

Создавая страницу альбома, вы использовали разные элементы. Размечали абзацы с разными ролями, текст в них выглядел большим многострочным блоком. Подобные элементы называются блочными. В строках абзацев выделяли отдельные слова и словосочетания. Такие элементы называются строчными.

Элементы блочные, строчные, но наборы свойств у них одинаковые. Далее на «Площадках Полигона» можно наглядно рассмотреть, как ведут себя блочные и строчные элементы на примере самостоятельного изменения значений некоторых свойств у экспериментальных (разноцветных) блоков.

Блочные элементы

Строение блочного элемента

У всех блочных элементов свойство display? имеет значение block. Самым ярким представителем среди блочных элементов можно считать обычный абзац. Текст, без которого не обходится ни одна страница, размечают тегами элемента P оформляя его внешний вид изменением значений конкретных свойств CSS.

Есть множество и других блочных элементов. Некоторые из них используют реже, а некоторые визуально сами не отображаются на экране. Их задача группировать другие блочные элементы в визуальные фрагменты страницы.

Экспериментируйте с настоящими блочными элементами. Чтобы понять их устройство пробуйте управлять их внешним видом. «Полигон. Площадка 2» предоставляет эту возможность. Состоит он из двух блоков.

  1. Код CSS, описывающий свойства визуального отображения экспериментальных элементов HTML на веб-странице. Код HTML прост. Каждый блочный элемент находится в BODY, который для него является родительским.
  2. Вы можете наглядно рассмотреть, как ведёт себя блочный элемент, изменяя в блоке CSS значения некоторых его свойств. Записывая изменённые числовые значения, добавляйте к ним без пробела названия единиц измерения.

  3. После ввода нового значения свойства нужно использовать клавиши Enter — применение изменённого значения или Tab — применение значения и переход к следующему свойству.
  4. Если после ввода значения поле окрасилось в красный цвет, то значение для данного свойства недопустимое или записано с ошибкой. Исправьте его или, чтобы начать эксперимент заново, воспользуйтесь кнопкой Сброс.
  5. Второй блок обозначает элемент HTML — рабочая область окна браузера, а в нём BODY — веб-страница, обозначенная пунктирной линией и текущими размерами ширины и высоты в левом верхнем углу HTML.
  6. Все изменения значений свойств сразу будут отображаться в экспериментальном модели браузера справа на веб-странице в BODY — выделенном пунктирной линией.

Заливка разных частей экспериментального элемента на странице Площадки 2 указывает:
  контент, поля  , границы   и отступы  .

Полигон. Площадка 2 display: block;

Все блочные элементы HTML представляют из себя контейнеры, в которых могут храниться другие элементы или контент, как правило это текст, но и не только. Блочные элементы занимают всю ширину своего родительского контейнера, создавая прямоугольный «блок» (отсюда и название). Среди блочных есть те, которые внутри могут содержать только блочные или контент со строчными элементами (о них ниже).

Если «Площадка» работает неправильно, сообщите руководителю: Что вы хотели?, Что сделали? и Что получилось?.

Браузер выделяет для каждого блочного элемента прямоугольную область на всю ширину на всю ширину width в родительском. Блоки на странице по умолчанию стремятся занять всю ширину контента. Они всегда начинаются с новой строки и заканчиваются так, что следующий за ними тоже начинается с новой строки. Далее особенности отдельных частей блока.

  • Ширина контента width...? по умолчанию равна auto. Браузер вычисляет её в пикселах, чтобы суммарная ширина всех горизонтальных частей элемента занимала все 100% выделенной для него родительской ширины.

  • Поля элемента padding...? отодвигают контент от границ элемента, каждое со своей стороны, чтобы буквы на странице не сливались с рамкой или буквами соседнего фрагмента, если отступы и границы отключены.

  • Границы элемента border...? или рамка. У границ можно менять форму линий border-style...? и их цвет border-color...?

    Внешние стороны линий границ явно указывают на полный или графический размер элемента — то каким мы его видим на экране. Границы, чаще всего, используют в оформительских целях, чтобы подчеркнуть обособленную роль фрагмента.

  • Полные или графические размеры элемента.

    Горизонтальный складывается из всех горизонтальных размеров частей элемента кроме отступов.

    border-left + padding-left + 
    width + 
    padding-right + border-right

    Вертикальный — из всех вертикальных размеров частей элемента кроме отступов.

    border-top + padding-top + 
    height + 
    padding-bottom + border-bottom

  • Отступы элемента margin...?. Их назначение отодвигать элемент от соседних или позиционировать относительно родительского. Их поведение на странице несколько отличается от других частей, поэтому в графический размер элемента они не включены.

    Значение auto устанавливают величину верхнего и нижнего отступов равную 0. Если полная ширина элемента меньше ширины контента родителя, то отдельно левому или правому отступам браузер выделит всё оставшееся свободное пространство.

    Можно значение auto установить и левому и правому отступам одновременно, браузер для них вычислит равные размеры свободного пространства и элемент поместит строго по вертикальному центру родительского.

Экспериментируйте. Узнаете, где находятся границы блока, с какой стороны от них поля, а с какой отступы. Увидите, что будет происходить с блоками, если существенно увеличивать или уменьшать значения их ширины, разных полей, границ и отступов. Какие свойства можно задавать в процентах и как изменяется блок с автоматическими размерами.

Не забывайте анализировать происходящее. Что получилось?. А если не получилось, то Почему?. Ищите ответы сами и задавайте вопросы.

Блочный элемент в потоке

Следующий ряд экспериментов спланируйте самостоятельно. У среднего абзаца все свойства имеют нулевые значения кроме ширины и высоты. Вытворяйте с ним всё что вздумается. Меняйте значения разных свойств, роли которых описаны выше. Оценивайте внешний вид абзаца.

Если отключить подсветку контента второго абзаца, то очень трудно будет определить где он кончается и начинается следующий. Ваша задача – оформить его так, чтобы он был заметен и удобен для чтения.

Для тонкой настройки текста в абзаце вам понадобятся дополнительные свойства.

  • Свойство line-height интерлинья́ж или межстрочный интервал?. Во многих шрифтах расстояние между строками абзацев весьма мало́, предлагая разработчику регулировать его по своим требованиям.

    В некоторых шрифтах интерлиньяж отсутствует настолько, что подстрочные элементы букв у, р, ф и др. из нижней строки почти касаются прописных букв и надстрочных элементов б, в, ё и др. Это усложняет чтение и посетитель сайта может отказаться и уйти на другой.

    Увеличение межстрочного интервала добавляет в текст воздуха, делая его лёгким и удобным для чтения. Чем меньше шрифт, тем важнее эта величина и её, при необходимости можно менять.

    Визуальное расстояние между базовыми линиями строк должно быть не менее 120%. Записывать значение свойства line-height... можно в любых доступных в CSS единицах измерения.

    • Можно в процентах line-height120%,
    • В эмах line-height1.2em,
    • В виде простого числа-множителя line-height1.2.
    • Можно и в абсолютных единицах, например, для шрифта font-size18px интерлиньяж должен быть line-height21px
  • Свойство letter-spacing? межсимвольный интервал, разрядка в словах. В некоторых шрифтах буквы в словах прижаты друг к другу достаточно плотно или наоборот разряжено. Это заметно в шрифтах с небольшим размером символов. Хочется их, для удобного чтения, чуть-чуть раздвинуть, а иногда и чуть-чуть сжать, чтобы фраза целиком поместилась в строку.

    Свойство word-spacing? межсловный интервал, разрядка в абзаце. Его уменьшение и увеличение помогает регулировать дыры и коридоры в абзаце.

    Подробнее о промежутках в между буквами и словами читайте в разделе Типографика.

Браузер «рисует» страницу сверху. Сначала выводит первый блок на всю ширину. Следующему блоку остаётся место только под первым, за ним идёт ещё один… Так и получается, что блоки, как коробки плотно складываются в штабель один под другим, только сверху вниз. Такое положение блоков называется поток.

Полигон. Площадка 2 display: block;

Основу структурирования материала веб-страницы составляет блочная модель CSS. Блоки представляют собой набор прямоугольников среди которых есть контент, поля, границы и отступы. Они подобно луковой чешуе наслаиваются друг на друга.

Отображая макет страницы, браузер анализирует логическую структуру кода HTML. Для каждого блока определяет, какие применить стили, каковы размеры каждой луковой чешуйки и как расположены блоки друг с другом рядом или внутри. Всё это существенно влияет на макет, задуманный разработчиком.

Разработчик планирует взаимное положение блоков на странице и описывает это создавая структуру кода HTML. Чтобы разобраться, как грамотно использовать стили CSS, он должен представлять какую структуру веб-страницы сформирует браузер, читая его код. Обе структуры напрямую связаны между собой. Именно поэтому так важно следить за структурными отступами записывая в код блочные элементы HTML.

С выходом версии языка HTML 5 контент разделён не на две группы, а на несколько категорий. И теперь разделение элементов на блочные и строчные заменено на их соответствие категориям. Это более сложная структура возникла с появлением новых значений свойства display. Подробности далее.

Если «Площадка» работает неправильно, сообщите руководителю: Что вы хотели?, Что сделали? и Что получилось?.

Полезные ссылки

Чтобы детальнее разобраться со свойствами используйте онлайн справочник CSS. На сайте находятся справочники и учебные курсы по различным веб-технологиям, а также руководства по вёрстке веб-страниц и разработке мобильных приложений. Влад Мержевич. Не забудьте ссылку положить в закладки браузера.

Вы действительно желаете досконально разобраться в современных технологиях Веб, и сделать сделать их своей профессией? То начните сбор собственной библиотеки из материалов этого сайта: MDN «Ресурсы для разработчиков, от разработчиков». Не все из них переведены на русский язык, но для будущих профессионалов это дополнительная практика.

Строчные элементы

У строчных элементов свойство display имеет значение inline. Самым примитивным примером строчного элемента служит обычный символ в тексте. Любой из них можно поместить в строчный элемент и, тем самым, получить возможность управлять его внешним видом. Но чаще строчными элементами размечают слова или словосочетания.

На экране строчные элементы, как и блочные, выглядят в виде прямоугольников. Иногда многострочных и не очень аккуратных. Но их сущности имеют два очень важных отличия.

  1. Первое отличие связано с шириной width и высотой height элемента.

    Строчный элемент отличается от блочного тем, что «не начинается всегда с новой строки» и «не занимает всю ширину родительского». Он может начинаться и заканчиваться в любом месте строки: в начале, в середине, в конце, даже захватывать несколько строк.

    В то же время ширина и высота родительского элемента может меняться вместе с шириной строк, и количеством слов в строках. А с ними могут меняться положения начала и конца строчного элемента.

    Ширина строчного элемента строго соответствует его контенту — тексту, помещённому в него, даже очень длинному.

    Высота строчного элемента всегда равна высоте одной строки, даже если текст занимает несколько строк. Поэтому как бы ни стараться, задавая значение свойству height, браузер это тоже проигнорирует.

    К строчным элементам не применимы свойства, связанные с размерами width и height.

    Эти свойства у них присутствуют, как и у других элементов, но браузер их игнорирует. Однако, по умолчанию размер шрифта строчного элемента такой же, как и у окружающего текста, а вместе с ним такое же расстояние между строками (это намёк).

  2. Второе можно рассматривать как вывод из наблюдений за первым. Оно напрямую связано с нерегулируемыми размерами ширины и высоты строчных элементов.

    Блочные элементы находиться в строчных не могут. Очевидно: нельзя абзац поместить в словосочетание.

    Внутри строчных элементов могут находиться только текст и другие строчные элементы.

Теперь, когда основные отличия строчных элементов стали известны, пора переходить к опытам и экспериментам. В управлении четвёртым элементом target4 оставлены только свойства, значения которых будут влиять на внешний вид строчного элемента. Познакомьтесь с ними.

Рамка добавлена, чтобы явно увидеть границы строчного элемента. Но важно понимать, что толщина линий влияет на графический размер элемента. В тоже время, она может мешать соседним символам без дополнительной настройки свойств других элементов.

Полигон. Площадка 2 display: inline;

Категория строчных элементов примерно соответствует категории текстового контента. Они часто располагаются в блочных элементах, реже в других строчных. Для каждого из них свой блочный или строчный элемент будет родительским. В ширину занимают столько места, сколько это необходимо для отображения своего содержимого. Они могут и не начинаются с новой строки, и им не требуется новой строки после каждого элемента. Тем самым поток блочных элементов сверху вниз на всю ширину не нарушается.

Если «Площадка» работает неправильно, сообщите руководителю: Что вы хотели?, Что сделали? и Что получилось?.

Увеличение вертикальных полей, границ и отступов влияют на графический размер элемента, но никак не влияют на его положение в потоке таких же строчных символов. Если не задавать цвет фона элемента, то ни поля, ни отступы с любыми значениями не будут видны. А вот границы… Пробуйте увеличивать ширину границ в 10 – 15 – 20 пикселов.

Если и имеется возможность у строчного элемента включить отображение границ, то пользоваться ими нужно с осторожностью.

Включая границы в строчных элементах не стоит увеличивать их ширину больше 1-2px. При необходимости, элементу можно добавлять поля с небольшой величиной для того, чтобы визуально отодвинуть границы от символов.

Следующая Площадка. Для пятого элемента target5 можно менять значения по умолчанию у всех все полей, границ и отступов. Здесь можно самостоятельно фантазировать. Рассматривать разные свойства с разными значениями. Решайте сами, какие настройки в будущих работах полезны, интересны или недопустимы.

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

Полигон. Площадка 2 display: inline;

Полигон демонстрирует ещё одну особенность вывода не экран текстовых строк и строчных элементов. Создаётся впечатление, что все строки стоят на лестнице. Самая первая вдалеке на верхней ступеньке, а остальные приближаются, как бы спускаясь по ним. Увеличенные верхние поле, граница и отступ элемента закрывают строки выше неё, так как элемент «перед предыдущими», а увеличенные нижние нет — он «сзади следующих». Блочные элементы ведут себя точно так же.

Если «Площадка» работает неправильно, сообщите руководителю: Что вы хотели?, Что сделали? и Что получилось?.

Полигон демонстрирует ещё одну особенность текстовых строк и строчных элементов. Установите полям, границам и отступам размер в 1em. Создаётся впечатление, что все строки стоят на лестнице. Самая первая вдалеке на верхней, а остальные приближаются, как бы спускаясь по ступенькам. Увеличенная верхняя граница закрывает верхние строки, так как она впереди предыдущих, а увеличенная нижняя нет — она сзади следующих.

В шестом примере target6 рассмотрим дизайнерское решение оформление текстовой ссылки с границей вместо подчёркивания. На странице примера разработчик в значении свойства font-family? указал шрифт Times New Roman, а его размер font-size ? равный 2em для наглядности.

Полигон. Площадка 2 display: inline;

Ондатра обедает.
А я дудочку, я дудочку возьму…
Если «Площадка» работает неправильно, сообщите руководителю: Что вы хотели?, Что сделали? и Что получилось?.

Однако, во многих случаях браузер «сам решает», например, какой по умолчанию будет ширина символов, какой оттенок синего цвета назначить ссылкам, как оформить линию подчёркивания и т. п. Откройте эту страницу в разных браузерах или посмотрите снимки экрана далее и сравните, как каждый из браузеров оформляет одинаковую фразу.

Отображение ссылки в браузере Firefox. Отображение ссылки в браузере Яндекс. Отображение ссылки в браузере Internet Explorer. Отображение ссылки в браузере Edge.

По умолчанию ссылки выделяются подчёркиванием. Свойству text-decoration? устанавливается значение underline. В Firefox, Internet Explorer и Edge подстрочные символы букв, а с ними и запятые, оказываются перечёркнуты линией, которая нарушает их типичную форму в выбранном шрифте.

Разработчики браузеров на базе Chromium учли это, и символы с подстрочными элементами не стали подчёркивать. Однако, в некоторых словах получается ещё хуже. В примере слово «дудочку» со столь странным подчёркиванием с натяжкой напоминает ссылку.

При создании страницы обязательно нужно просматривать её внешний вид в разных браузерах, как минимум, трёх типов: «Firefox», «Chromium++», «Internet Explorer 11» и по возможности «Edge».

Самое простое решение для задачи на площадке — откажитесь от подчёркивания. Включите нижнюю границу и нижним полем отодвиньте её на 1-2 пиксела от символов.

Подобных неэстетических проявлений на странице можно избежать. Научитесь их видеть. Блуждая по сайтам в интернете, подмечайте интересные и удачные решения в оформлении. Создайте отдельную папку под названием clipart.

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

В главном заголовке страницы H1 напишите подробно пример чего представлен на странице. В следующей строке добавьте абзац (подзаголовок), а нём ссылку на оригинал образца.

Одного кода HTML недостаточно. К нему нужно скопировать и все CSS правила относящиеся ко всем элементам фрагмента. Создайте папку css, а в ней файлы с правилами. Файлам CSS давайте имена соответствующие именам файлов HTML.

Увидеть и скопировать код HTML, правила CSS подключённые к элементам примера помогут «Инструменты Веб-разработки». Познакомьтесь с ними на странице «DOM» в статье «Объектная модель документа» DOM и на странице «Блочные элементы» в статье «CSSOM». Чтобы разобраться, как работают «Инструменты Веб-разработки», почитайте о них на официальном сайте: Firefox Инспектор страниц.

Комбинированные элементы

Значение свойства displayinline-block? очень удивительно. Его можно применить к любому элементу и к строчному и к блочному. А что из этого получится читайте на самой площадке и экспериментируйте с ней.

Сначала пробуйте применять свойства к элементам в текущем состоянии. Затем меняйте значения свойства display... на строчный: inline; блочный: block и строчно-блочный: inline-block. Наблюдайте за изменением свойств блоков и оценивайте, где их можно применить в своих проектах.

Элементу displayinline-block? доступно вертикальное выравнивание относительно остальных букв в строке. Попробуйте разобраться самостоятельно.

Полигон. Площадка 2 display: inline-block;

Строчно-блочный элемент удивительное значение свойства вывода блока на экран displayinline-block. Блок представляется в виде матрёшки. Снаружи он строчный блок и остаётся в строке среди остальных символов. Внутри же он превращается в блочный и можно изменять ширину, высоту и т. п. Но сам элемент HTML продолжает быть строчным со всеми ограничениями.

Для таких строчных блоков браузер создаёт строчный контейнер с минимальной высотой, определённой родительским элементом. Увеличенная высота строчного блока распирает межстрочную высоту всей строки. Распорка может оказаться и над базовой линией текста и под ней. Вместе с этим любой блок в строке имеет возможность свой контент выравнивать по вертикали относительно остальных символов в строке.

Если «Площадка» работает неправильно, сообщите руководителю: Что вы хотели?, Что сделали? и Что получилось?.

Вопросы на засыпку

Подумайте и ответьте

  1. Чем и почему отличаются элементы HTML?
    H2 от STRONG,
    ARTICLE от Q,
    OL от ABBR?
  2. Почему даже узкие блочные элементы не выстраиваются рядом?