Вы здесь: Главная » HTML » Строчные (inline) теги в HTML

Строчные (inline) теги в HTML

Строчные (или линейные) элементы, которые в английском языке имеют название inline, используются в HTML для форматирования части текста внутри блочных элементов. В отличие от блочных тегов они занимают столько места, сколько в них находится текста. Для строчных элементов свойство display имеет значение inline.

Как правило, эти элементы предназначены для форматирования текста внутри них. Например, теги <strong> или <b> делают помещенный в них текст жирным, а теги <em> или <i> выделяют текст курсивом:

Теперь, когда ваш домен запущен и работает, ему нужно еще несколько дополнений. Чтобы начать работу с онлайн-разработкой, мы предлагаем вам скидку в 20$ для создания дизайна нового логотипа.

В Инспекторе свойств (клавиша F12) при выделении курсивного текста мы увидим, что для ряда тегов в таблице стилей браузера (user agent stylesheet) назначено свойство font-style: italic:

italic

В самом же тексте курсивное начертание применилось только к словам  "дизайна нового логотипа".

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

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

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

В Инспекторе свойств увидим такие правила для mark:

mark tag

Для того чтобы выделить цветом какой-либо текст, можно использовать тег <span>. Это строчный элемент-обертка для некоторого количества текста, который должен выделяться среди остального. Для <span>, как правило, нужно задать класс или, реже, id, и для этих селекторов записать форматирование.

Краткая биография Владимира Высоцкого

Высоцкий Владимир Семёнович, (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>, т.к. не настолько важным является наш текст:

Краткая биография Владимира Высоцкого

Высоцкий Владимир Семёнович, (1938-1980) русский поэт и актер

Родился 25 января 1938 г. в Москве в семье военного связиста.

В 1947—1949 гг. жил с отцом и его второй женой в городе Эберсвальде-Финов (Германия), затем вернулся в Москву.

Во время учёбы в школе Высоцкий занимался в драмкружке и хотел поступать в театральный институт, но по настоянию родителей сдал экзамены в Московский строительный институт имени В. В. Куйбышева, откуда вскоре ушёл. Летом 1956 г. поступил в Школу-студию имени В. И. Немировича-Данченко при МХАТе.

По окончании студии (1960 г.) работал в Московском драматическом театре имени А. С. Пушкина и в Московском театре миниатюр. Тогда же начал сниматься в кино.

В 1964 г. был принят в Московский театр драмы и комедии на Таганке, где проработал до конца жизни. Артист сыграл на сцене Таганки более 20 ролей, из которых наиболее известна роль Гамлета из одноимённой трагедии Шекспира.

Аббревиатуры, цитаты и определения

Обычно аббревиатуры используют на информационных сайтах типа Википедии. Для выделения аббревиатур существует специальный тег <abbr>, который сопровождается атрибутом title, поясняющим значение аббревиатуры. Например,

SQL - наиболее популярный язык запросов к базам данных

В этом примере слово SQL, помещенное в тег <abr>, подчеркнуто пунктирной линией. При наведении на него всплывает подсказка.

Для формирования цитаты можно использовать обычные кавычки или специальный тег <q> (от англ. quote), который формирует кавычки вокруг взятого в этот тег текста. Сравните:

"Высшее образование — не показатель ума, дорогие подарки — не признак любви. Опыт, внимание и поступки — вот что по-настоящему ценно." (О. Блум)

Ум богатеет от того, что он получает.
Сердце — от того, что оно отдает.
(Виктор Гюго)

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

Обратите внимание на тег <br>, использованный внутри <q>. Он происходит от англ. слова break и выполняет перенос текста, следующего за ним на другую строку.

Если необходимо выделить название статьи, журнала, фильма или какой-то работы, можно использовать тег <cite>, который делает текст курсивным:

В майском выпуске «Socionomist» в 2014 году Роберт Фолсом определил аналогичные характеристики в четырёх негативных периодах настроения в истории Америки.

Тег cite

Еще один вариант выделения курсивом предоставляет тег <dfn> (от англ. definition - определение), который, собственно, и предназначен для выделения в html-разметке каких-либо терминов и определений, например:

Хостер, хостинг-провайдер, или хостинговая компания — интернет компания, которая предоставляет услуги хостинга.

Вставка и удаление

Для того чтобы пометить текст, как удаленный, сейчас стоит использовать тег <del> (от англ. delete- удаление) , а тот текст, который добавили через некоторое время после создания статьи, можно помечать тегом <ins> (от англ. insert - вставка). В браузере текст внутри тега <del> отображается перечеркнутым, а внутри тега <ins> - подчеркнутым.

Курс доллара к январю 2016г. составил 22грн 24грн.

Верхний и нижний индексы

Достаточно редко бывают нужны теги, которые позволяют нам написать степень числа или химическую формулу. В этих случаях нужно воспользоваться элементами <sup> для верхнего индекса и <sub> -  для нижнего индекса. Например:

Этанол (этиловый спирт, метилкарбинол, винный спирт или алкоголь, часто в просторечии просто «спирт») — это одноатомный спирт с формулой C2H5OH.

Формулы сокращенного умножения в алгебре:
квадрат суммы: (a + b)2 = a2 + 2ab + b2
квадрат разности: (a - b)2 = a2 - 2ab + b2

Элементы для форматирования кода

К строчным элементам относятся такие, скажем прямо, нечасто используемые, как <var>, <samp>, <kbd> и <code> , которые необходимы для разметки документов с программным кодом.

Тег <var> (от англ. variable) выделяет текст курсивом и предназначен для разметки переменных.

Тег <samp> (от англ. sample) выводит текст, который будет результатом работы программы, моноширинным шрифтом.

Тег <kbd> (от англ. keyboard) предназначен для разметки символов, набранных с клавиатуры, в том числе различных сочетаний клавиш. В браузере отображается моноширинным шрифтом.

Тег <code> нужен для форматирования любого количества программного кода - от нескольких символов или слов до функций и классов. Для больших блоков кода его сочетают с тегом <pre> или превращают в блочный элемент, записав для него свойство display: block;. В браузере текст внутри этого тега выводится  моноширинным шрифтом.

Вы можете задать для этих элементов собственное форматирование, например, выделить их цветом текста или фона или жирным начертанием:

Переменные в языке JavaScript объявляются так:var pi=3.14;

Вычислите результат примера y=2x+3, если известно, что x=6.

В текстовом редакторе Brackets комментарии можно добавить, используя клавиши CTRL + /. Продублировать код на новую строку можно с помощью клавиш CTRL + D.

В языке JavaScript метод document.getElementByClassName('test') позволяет манипулировать набором элементов, имеющих класс 'test'.

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

Классификация элементов

На главной странице сайта http://htmlreference.io/ вы можете сразу увидеть, какие элементы относятся к линейным, а какие - к блочным. Там собраны все теги и размещены в алфавитном порядке (алфавит английский, разумеется).

htmlreference.io

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *