Строчные (или линейные) элементы, которые в английском языке имеют название inline, используются в HTML для форматирования части текста внутри блочных элементов. В отличие от блочных тегов они занимают столько места, сколько в них находится текста. Для строчных элементов свойство display имеет значение inline.
Теги <strong> и <b>, <em> и <i>
Как правило, эти элементы предназначены для форматирования текста внутри них. Например, теги <strong> или <b> делают помещенный в них текст жирным, а теги <em> или <i> выделяют текст курсивом:
|
1 2 3 |
<p>Теперь, когда ваш домен запущен и работает, ему нужно еще несколько дополнений. Чтобы начать работу с онлайн-разработкой, мы предлагаем вам <strong>скидку в 20$</strong> для создания <em>дизайна нового логотипа</em>.</p> |
Теперь, когда ваш домен запущен и работает, ему нужно еще несколько дополнений. Чтобы начать работу с онлайн-разработкой, мы предлагаем вам скидку в 20$ для создания дизайна нового логотипа.
В Инспекторе свойств (клавиша F12) при выделении курсивного текста мы увидим, что для ряда тегов в таблице стилей браузера (user agent stylesheet) назначено свойство font-style: italic:
В самом же тексте курсивное начертание применилось только к словам "дизайна нового логотипа".
Т.е. линейные теги, как правило не формируют структуру документа, в отличие от блочных. Они нужны для целей форматирования и выделения фрагментов текста внутри блочных элементов.
Тег <mark>
Например, тег <mark> может быть использован для выделения текста, на который следует обратить внимание. Причем, выделение происходит по умолчанию желтым цветом:
|
1 2 |
<p>Уважаемые пешеходы, обратите внимание, что во время гололеда да еще при плохой видимости любой <mark>водитель не может быстро затормозить</mark> . </p> |
Уважаемые пешеходы, обратите внимание, что во время гололеда да еще при плохой видимости любой водитель не может быстро затормозить .
В Инспекторе свойств увидим такие правила для mark:
Тег <span>
Для того чтобы выделить цветом какой-либо текст, можно использовать тег <span>. Это строчный элемент-обертка для некоторого количества текста, который должен выделяться среди остального. Для <span>, как правило, нужно задать класс или, реже, id, и для этих селекторов записать форматирование.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style> .year { font-weight: bold; color: dodgerblue; } .where { font-style: italic; color: darkcyan; } </style> <h1>Краткая биография Владимира Высоцкого</h1> <p>Высоцкий Владимир Семёнович, (1938-1980) русский поэт и актер</p> <p>Родился <span class="year">25 января 1938 г.</span> <span class="where">в Москве</span> в семье военного связиста.</p> <p>В <span class="year">1947—1949 гг.</span> жил с отцом и его второй женой <span class="where">в городе Эберсвальде-Финов (Германия)</span>, затем вернулся в Москву.</p> <p>Во время учёбы в школе Высоцкий занимался в драмкружке и хотел поступать в театральный институт, но по настоянию родителей сдал экзамены <span class="where">в Московский строительный институт имени В. В. Куйбышева</span>, откуда вскоре ушёл. <span class="year">Летом 1956 г.</span> поступил в <span class="where">Школу-студию имени В. И. Немировича-Данченко при МХАТе</span>.</p> <p>По окончании студии (<span class="year">1960 г.</span>) работал в <span class="where">Московском драматическом театре имени А. С. Пушкина </span>и <span class="where">в Московском театре миниатюр</span>. Тогда же начал сниматься в кино.</p> <p>В <span class="year">1964 г.</span> был принят в <span class="where">Московский театр драмы и комедии на Таганке</span>, где проработал до конца жизни. Артист сыграл на сцене Таганки более 20 ролей, из которых наиболее известна роль Гамлета из одноимённой трагедии Шекспира.</p> ... |
Краткая биография Владимира Высоцкого
Высоцкий Владимир Семёнович, (1938-1980) русский поэт и актер
Родился 25 января 1938 г. в Москве в семье военного связиста.
В 1947—1949 гг. жил с отцом и его второй женой в городе Эберсвальде-Финов (Германия), затем вернулся в Москву.
Во время учёбы в школе Высоцкий занимался в драмкружке и хотел поступать в театральный институт, но по настоянию родителей сдал экзамены в Московский строительный институт имени В. В. Куйбышева, откуда вскоре ушёл. Летом 1956 г. поступил в Школу-студию имени В. И. Немировича-Данченко при МХАТе.
По окончании студии (1960 г.) работал в Московском драматическом театре имени А. С. Пушкина и в Московском театре миниатюр. Тогда же начал сниматься в кино.
В 1964 г. был принят в Московский театр драмы и комедии на Таганке, где проработал до конца жизни. Артист сыграл на сцене Таганки более 20 ролей, из которых наиболее известна роль Гамлета из одноимённой трагедии Шекспира.
В 1960—1961 гг. появились первые песни Высоцкого. За свою жизнь он создал их около тысячи. Официально не признанные, минуя радио,телевидение, печать, благодаря магнитофонным лентам песни Высоцкого становились известны всем.
Много песен и баллад предназначалось для кинофильмов. В 1966 г. Высоцкий снялся в картине «Вертикаль» и написал для неё пять песен. Всего он сыграл в 30 художественных фильмах. Последние годы жизни Высоцкого были драматичны. При всенародной популярности он не мог добиться публикации своих стихов, выхода пластинок; тяжело переживал травлю, развязанную в прессе. От перенапряжения болел, в 1979 г. перенёс клиническую смерть.
Умер 25 июля 1980 г. в Москве, похоронен на Ваганьковском кладбище. Только после смерти был издан первый сборник его стихов «Нерв» (1981 г.).
В 1987 г. за роль капитана МУРа Глеба Жеглова в пятисерийной телевизионной ленте режиссёра С. С. Говорухина «Место встречи изменить нельзя» ему была посмертно присуждена Государственная премия СССР.
Источник текстаЕсли присмотреться к тому форматированию, которое выполняет каждый из span, то помимо изменения цвета, можно еще отметить, что <span class="year"> делает текст жирным, а <span class="where"> отображает текст курсивом. на самом деле можно заменить в первом случае <span> тегами <b> или <strong>, а во втором - тегами <i> или <em>. Стоит только еще учитывать, что <strong> и <em> - это теги логического форматирования, которые подразумевают усиление или акцент на тексте, помещенном внутри них. Поэтому используем <b> и <i>, т.к. не настолько важным является наш текст:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<head> <style> .year { color: blueviolet; } .where { color: dodgerblue; } </style> </head> <body> <h1>Краткая биография Владимира Высоцкого</h1> <p>Высоцкий Владимир Семёнович, (1938-1980) русский поэт и актер</p> <p>Родился <b class="year1">25 января 1938 г.</b> <i class="where1">в Москве</i> в семье военного связиста.</p> <p>В <b class="year1">1947—1949 гг.</b> жил с отцом и его второй женой <i class="where1">в городе Эберсвальде-Финов (Германия)</i>, затем вернулся в Москву.</p> <p>Во время учёбы в школе Высоцкий занимался в драмкружке и хотел поступать в театральный институт, но по настоянию родителей сдал экзамены <i class="where1">в Московский строительный институт имени В. В. Куйбышева</i>, откуда вскоре ушёл. <b class="year1">Летом 1956 г.</b> поступил в <i class="where1">Школу-студию имени В. И. Немировича-Данченко при МХАТе</i>.</p> <p>По окончании студии (<b class="year1">1960 г.</b>) работал в <i class="where1">Московском драматическом театре имени А. С. Пушкина </i>и <i class="where1">в Московском театре миниатюр</i>. Тогда же начал сниматься в кино.</p> <p>В <b class="year1">1964 г.</b> был принят в <i class="where1">Московский театр драмы и комедии на Таганке</i>, где проработал до конца жизни. Артист сыграл на сцене Таганки более 20 ролей, из которых наиболее известна роль Гамлета из одноимённой трагедии Шекспира.</p> ... </body> |
Краткая биография Владимира Высоцкого
Высоцкий Владимир Семёнович, (1938-1980) русский поэт и актер
Родился 25 января 1938 г. в Москве в семье военного связиста.
В 1947—1949 гг. жил с отцом и его второй женой в городе Эберсвальде-Финов (Германия), затем вернулся в Москву.
Во время учёбы в школе Высоцкий занимался в драмкружке и хотел поступать в театральный институт, но по настоянию родителей сдал экзамены в Московский строительный институт имени В. В. Куйбышева, откуда вскоре ушёл. Летом 1956 г. поступил в Школу-студию имени В. И. Немировича-Данченко при МХАТе.
По окончании студии (1960 г.) работал в Московском драматическом театре имени А. С. Пушкина и в Московском театре миниатюр. Тогда же начал сниматься в кино.
В 1964 г. был принят в Московский театр драмы и комедии на Таганке, где проработал до конца жизни. Артист сыграл на сцене Таганки более 20 ролей, из которых наиболее известна роль Гамлета из одноимённой трагедии Шекспира.
Аббревиатуры, цитаты и определения
Обычно аббревиатуры используют на информационных сайтах типа Википедии. Для выделения аббревиатур существует специальный тег <abbr>, который сопровождается атрибутом title, поясняющим значение аббревиатуры. Например,
|
1 2 |
<p><abbr title="Structured Query Language">SQL</abbr> - наиболее популярный язык запросов к базам данных</p> |
SQL - наиболее популярный язык запросов к базам данных
В этом примере слово SQL, помещенное в тег <abr>, подчеркнуто пунктирной линией. При наведении на него всплывает подсказка.
Для формирования цитаты можно использовать обычные кавычки или специальный тег <q> (от англ. quote), который формирует кавычки вокруг взятого в этот тег текста. Сравните:
|
1 2 3 4 |
<p>"Высшее образование — не показатель ума, дорогие подарки — не признак любви. Опыт, внимание и поступки — вот что по-настоящему ценно." (О. Блум)</p> <p><q cite="http://frazy.su/citaty-o-zhizni">Ум богатеет от того, что он получает.<br> Сердце — от того, что оно отдает.</q> (Виктор Гюго)</p> |
"Высшее образование — не показатель ума, дорогие подарки — не признак любви. Опыт, внимание и поступки — вот что по-настоящему ценно." (О. Блум)
Ум богатеет от того, что он получает.
(Виктор Гюго)
Сердце — от того, что оно отдает.
В обоих случаях текст цитаты взят в кавычки. Но во втором эта цитата еще и выделена соответствующим тегом, а также в атрибуте cite можно указать URL сайта, с которого была взята эта цитата. Несколько информативней, не так ли?
Обратите внимание на тег <br>, использованный внутри <q>. Он происходит от англ. слова break и выполняет перенос текста, следующего за ним на другую строку.
Если необходимо выделить название статьи, журнала, фильма или какой-то работы, можно использовать тег <cite>, который делает текст курсивным:
|
1 2 3 |
<p><cite>В майском выпуске «Socionomist»</cite> в 2014 году Роберт Фолсом определил аналогичные характеристики в четырёх негативных периодах настроения в истории Америки.</p> |
В майском выпуске «Socionomist» в 2014 году Роберт Фолсом определил аналогичные характеристики в четырёх негативных периодах настроения в истории Америки.
Еще один вариант выделения курсивом предоставляет тег <dfn> (от англ. definition - определение), который, собственно, и предназначен для выделения в html-разметке каких-либо терминов и определений, например:
|
1 2 3 4 5 6 7 8 9 |
<style> dfn { color: #1bad0f; font-weight: bold; letter-spacing: 1px; } </style> <dfn>Хостер</dfn>, <dfn>хостинг-провайдер</dfn>, или <dfn>хостинговая компания</dfn> — интернет компания, которая предоставляет услуги хостинга. |
Вставка и удаление (теги <del> и <ins>)
Для того чтобы пометить текст, как удаленный, сейчас стоит использовать тег <del> (от англ. delete- удаление) , а тот текст, который добавили через некоторое время после создания статьи, можно помечать тегом <ins> (от англ. insert - вставка). В браузере текст внутри тега <del> отображается перечеркнутым, а внутри тега <ins> - подчеркнутым.
|
1 |
<p>Курс доллара к январю 2016г. составил <del>22грн</del> <ins>24грн</ins>.</p> |
Верхний и нижний индексы (теги <sup> и <sub>)
Достаточно редко бывают нужны теги, которые позволяют нам написать степень числа или химическую формулу. В этих случаях нужно воспользоваться элементами <sup> для верхнего индекса и <sub> - для нижнего индекса. Например:
|
1 2 3 4 5 6 7 8 |
<p><dfn>Этанол</dfn> (этиловый спирт, метилкарбинол, винный спирт или алкоголь, часто в просторечии просто «спирт») — это одноатомный спирт с формулой C<sub>2</sub>H<sub>5</sub>OH.</p> <p><strong>Формулы сокращенного умножения в алгебре</strong>:<br> квадрат суммы: (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup><br> квадрат разности: (a - b)<sup>2</sup> = a<sup>2</sup> - 2ab + b<sup>2</sup> </p> |
Этанол (этиловый спирт, метилкарбинол, винный спирт или алкоголь, часто в просторечии просто «спирт») — это одноатомный спирт с формулой C2H5OH.
Формулы сокращенного умножения в алгебре:
квадрат суммы: (a + b)2 = a2 + 2ab + b2
квадрат разности: (a - b)2 = a2 - 2ab + b2
Элементы для форматирования кода (теги <var>, <samp>, <kbd>, <code>)
К строчным элементам относятся такие, скажем прямо, нечасто используемые, как <var>, <samp>, <kbd> и <code> , которые необходимы для разметки документов с программным кодом.
Тег <var> (от англ. variable) выделяет текст курсивом и предназначен для разметки переменных.
Тег <samp> (от англ. sample) выводит текст, который будет результатом работы программы, моноширинным шрифтом.
Тег <kbd> (от англ. keyboard) предназначен для разметки символов, набранных с клавиатуры, в том числе различных сочетаний клавиш. В браузере отображается моноширинным шрифтом.
Тег <code> нужен для форматирования любого количества программного кода - от нескольких символов или слов до функций и классов. Для больших блоков кода его сочетают с тегом <pre> или превращают в блочный элемент, записав для него свойство display: block;. В браузере текст внутри этого тега выводится моноширинным шрифтом.
Вы можете задать для этих элементов собственное форматирование, например, выделить их цветом текста или фона или жирным начертанием:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> kbd, var {color: grey; font-weight: bold; } samp {color: #f90; font-size: 1.2em;} code {background-color: pink; color: #900; } </style> <p>Переменные в языке JavaScript объявляются так: <var>var pi=3.14;</var></p> <p>Вычислите результат примера <samp>y=2x+3</samp>, если известно, что <samp>x=6</samp>.</p> <p>В текстовом редакторе Brackets комментарии можно добавить, используя клавиши <kbd>CTRL + /</kbd>. Продублировать код на новую строку можно с помощью клавиш <kbd>CTRL + D</kbd>.</p> <p>В языке JavaScript метод <code>document.getElementByClassName('test')</code> позволяет манипулировать набором элементов, имеющих класс 'test'.</p> |
Переменные в языке JavaScript объявляются так:var pi=3.14;
Вычислите результат примера y=2x+3, если известно, что x=6.
В текстовом редакторе Brackets комментарии можно добавить, используя клавиши CTRL + /. Продублировать код на новую строку можно с помощью клавиш CTRL + D.
В языке JavaScript метод document.getElementByClassName('test') позволяет манипулировать набором элементов, имеющих класс 'test'.
К строчным тегам также относятся практически все элементы форм, ссылки и изображения. Но они требуют отдельных статей для рассмотрения всех особенностей этих линейных элементов.
Классификация элементов
На главной странице сайта https://htmlreference.io/ вы можете сразу увидеть, какие элементы относятся к линейным, а какие - к блочным. Там собраны все теги и размещены в алфавитном порядке (алфавит английский, разумеется).
