0:00
В этом видео я расскажу вам про некоторые текстовые элементы.
Итак, текстовые элементы в отличие от нетекстовых — они не создают
разрыва до и после себя.
Поэтому их можно использовать внутри текста,
и не будет создан перенос до и после.
Элемент предназначен для акцентирования внимания в тексте.
К примеру, у нас есть некоторый кусок текста,
и мы хотим обратить внимание на его часть.
В данном случае слово cats.
Мы оборачиваем это слово в элемент.
И в браузере этот кусок выглядит курсивным.
Но как я говорил в предыдущих видео, не нужно использовать элементы, если они
не несут никакого логического смысла, для того чтобы он как-то красиво отображался.
Элемент strong предназначен для обозначения важной информации.
То есть если элемент для акцентирования внимания,
то strong сообщает пользователю, что это важная информация.
В данном случае мы слово «внимание»,
на которое нужно обратить внимание, оборачиваем в элемент strong.
И по умолчанию в браузерах он может быть жирным.
Элемент mark помечает текст как выделенный.
У нас есть кусок текста, и мы хотим часть текста как-то выделить.
Мы оборачиваем в элемент mark,
и по умолчанию в браузерах он закрасит фон в желтый цвет.
Элемент small предназначен для различной уточняющей информации.
К примеру, у нас есть некоторый текст, который говорит о скидках,
но, как правило, у всех скидок есть какие-то условия.
И мы можем это условие обернуть в элемент small.
В браузере этот текст будет выглядеть меньше.
Элемент quote предназначен для выделения цитат или прямой речи внутри текста.
То есть если элемент block quote, о котором я говорил в предыдущих видео,
он создает разрывы до и после себя,
то элемент q можно использовать прямо внутри текста.
Ну вот пример: у нас есть текст,
и мы хотим часть текста обозначить, что это цитата.
И по умолчанию браузер обернет этот текст в кавычки.
При помощи элемента ruby можно добавить аннотацию к тексту.
Например, у нас текст написан на английском,
мы можем добавить ему транскрипцию, или же текст написан на китайском,
и мы можем добавить к нему перевод.
И в браузере этот текст,
он будет находиться выше, чем основной контент.
В данном случае транскрипция находится над буквами,
и перевод находится над всем словом.
При помощи элемента sample output можно обозначить текст,
который был результатом работы какой-то программы.
При помощи элемента keyboard можно обозначить текст,
который был набран с клавиатуры или же для обозначения клавиш.
Например, у нас есть текст, и в нем встречаются названия клавиш.
Мы оборачиваем их в элемент keyboard.
А результат вывода программы мы оборачиваем в элемент sample.
В браузере текст, который находился внутри keyboard или sample,
он становится моноширинным, то есть ширина каждого символа равна другому символу.
При помощи элемента code можно обозначать
куски программного кода, но здесь важно помнить,
что элемент code не сохраняет все переносы так, как это делает элемент pre.
Поэтому, как правило, эти два элемента работают вместе.
Сначала создается элемент pre, а далее внутрь вкладывается элемент code,
внутри которого уже и пишется сам программный код.
Ну вот, в данном случае переносы не сохранились,
потому что отсутствует элемент pre.
Элементы superscript и subscript обозначают верхний индекс и нижний
индекс соответственно.
Например, для написания формул, если используется какая-то степень,
можно эту степень обернуть в элемент sup.
Если же это химическая формула,
то можно обернуть элементы для нижнего индекса в элемент sub.
И выглядит это вот так в браузере: то есть текст уходит
выше и становится чуть меньше.
Или ниже и становится чуть меньше соответственно.
При помощи элемента break line можно устанавливать переводы в том месте,
где находится этот элемент.
Например, у нас есть стихотворение, и чтобы добавить принудительные переносы,
можно воспользоваться элементом br, установить его в том месте,
где нужен перенос.
Я бы не рекомендовал использовать элемент br для отделения параграфов.
Для этого есть специальный элемент p, который определяет параграф.
Элемент br используют только в том случае,
если нужен какой-то принудительный перенос.
Ну и вот так это выглядит в браузере: перенос случился в том месте,
где установлен элемент br.
При помощи элемента wbr — word break opportunity —
можно указывать браузеру место, где возможен перенос.
Например, у нас есть очень длинное слово,
и браузер по умолчанию не будет его переносить.
При помощи элемента wbr можно указать,
где можно делать переносы, если слово не влазит в элемент.
Разберем несколько примеров.
В первом примере не расставлены элементы wbr,
поэтому слово очень длинное и вылезло за пределы элемента.
Во втором случае и в третьем этот элемент уже расставлен,
и при уменьшении размеров элемента перенос происходит ровно в том месте,
где установлен этот элемент.
Элемент span по аналогии с элементом div является универсальным.
Если же не нашлось такого текстового элемента, который подходит по смыслу,
можно использовать элемент span, например, для какого-то визуального эффекта.
Мы хотим окрасить букву в красный цвет.
Мы можем обернуть эту букву в элемент span и задать ей какие-то отдельные стили.
Смысловой нагрузки этот элемент в данном случае не несет,
а только лишь раскрашивает букву.
Ну и вот так это выглядит в браузере.
На этой неделе вы узнали, откуда взялся HTML, как работает компания W3C сегодня,
и также я вам рассказал про основные HTML-элементы,
и как создать списки и таблицы.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
