Тег в HTML используется для выделения фрагмента текста курсивом.
HTML тег относится к тегам физического форматирования. Изменение начертания шрифта с помощью тега носит стилистический характер.
Сделать HTML текст курсивом можно также с помощью тега . При этом текст будет считаться, выделенным логически (по смыслу), "подчеркнутым".
Спецификация HTML5 рекомендует отдавать приоритет тегам логического форматирования: важные фрагменты текста - тег , акцентирование внимания - тег , подзаголовки - теги , подсветка текста - тег . Выделять текст курсивом с помощью тега следует только если характер выделения не соответствует ни одному тегу логического форматирования.
Все виды выделения текста описаны в статье: .
Синтаксис
текст выделенный курсивомОтображение в браузере
Пример использования в HTML коде
Простой текст, который может быть расположен на любом сайте. А вот текст выделенный курсивом{
Описание
Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
Синтаксис
ТекстЗакрывающий тег
Обязателен.
Атрибуты
Аналог CSS
Пример. Использование тега
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Примечание
Хотя использование тега не осуждается в HTML, применение стилей предоставляет больше возможностей по управлению начертанием текста.
Спецификация ?
✖
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры: Настольные Мобильные ?
Internet Explorer | Chrome | Opera | Safari | Firefox |
2 | 1 | 2 | 1 | 1 |
Android | Firefox Mobile | Opera Mobile | Safari Mobile |
1 | 1 | 6 | 1 |
Всем известно, что теги , , , являются презентационными, а следовательно, исходя из парадигмы «структура, представление, поведение» их использование не приветствуется. Куда более привычными представляются элементы , , . Так было на протяжении долгих лет практики разработки. Однако многое поменялось в семантике этих элементов с приходом HTML5 . Теперь у нас 4 новых тега со смыслом и каша в голове.
vs
Если раньше все учебники по вёрстке пестрили фразами вроде «используйте вместо », и это было наполовину верно, то сегодня такая привычка может сыграть злую семантическую шутку. А дело всё в том, что авторы HTML5 предлагают использовать для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования для разметки ключевых слов в документе
The frobonitor and barbinator components are fried.
И лидов (первый абзац статьи в журналистике)
Six abandoned kittens have found an unexpected new mother figure - a pet rabbit. Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.
Kittens "adopted" by pet rabbit
В свою очередь , как и раньше, означает повышенную значимость своего содержимого.
vs
Отныне содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. На мой взгляд, логично использовать там, где типографская традиция предполагает курсив (например, слова на иностранном языке, термины и др.)Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».
же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)
Казнить нельзя, помиловать.
Внимательно читайте договор!
«Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический элемент — .Холивар о
Раньше У нас также есть элемент
На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом
Новая семантика и старый доктайп
Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кромеСейчас мы с вами займемся изучением основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.
Блок . Структура простейшей страницы
Страница сайта - это обычный текстовый файл с расширением .html . Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег , который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег
для служебного содержимого страницы и тег - для основного текста, который и виден на экране браузера.В служебное содержимое, которое располагается внутри тега
, входит много различных вещей, но пока нам нужны только две из них. Это тегКроме того, перед тегом обычно пишется конструкция doctype , которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - .
Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере - скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим - посмотрите видео под примером):
Как выглядит этот пример в браузере смотрите по данной ссылке .
Думаю, после того, как вы прочитали про основную структуру страницы, у вас по-прежнему остается некоторое недопонимание, как все это выглядит на практике. Поэтому я снял специальное видео, в котором покажу вам, как сделать вашу первую HTML страницу и запустить ее в браузере (в нем я также расскажу про title страницы, про кодировки, про оформление кода). Посмотрите его и только потом переходите к дальнейшему чтению:
Ну, а теперь, научившись создавать простейшие страницы, мы перейдем к изучению полезных тегов, которые следует использовать внутри тега
. Это будут теги для абзацев, заголовков, списков, ссылок и других полезных вещей. Итак, приступим.Блок . Абзацы
Одним из основных элементов страницы являются абзацы . Их можно сравнить с абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).
Абзац создается с помощью тега
Таким образом:
Это абзац.
Это еще один абзац.
И еще один абзац.
Это абзац.
Это еще один абзац.
И еще один абзац.
Блок . Заголовки h1, h2, h3, h4, h5, h6
Кроме абзацев важное значение на странице имеют заголовки . Их также можно сравнить с заголовками из книги - каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.
Заголовки создаются с помощью тегов
,
,
,
,
,
.
Они имеют разную степень важности. В заголовке h1
следует располагать название
всей HTML страницы
, в h2
- название блоков
страницы,
в h3
- название подблоков и так далее.
,
,
,
.
Они имеют разную степень важности. В заголовке h1
следует располагать название
всей HTML страницы
, в h2
- название блоков
страницы,
в h3
- название подблоков и так далее.
,
.
Они имеют разную степень важности. В заголовке h1
следует располагать название
всей HTML страницы
, в h2
- название блоков
страницы,
в h3
- название подблоков и так далее.
Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:
Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
Это первый абзац.
Это второй абзац.
Это третий абзац.
Так код будет выглядеть в браузере:
Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
Это первый абзац.
Это второй абзац.
Это третий абзац.
Блок . Жирный
Вы уже знаете, что заголовки по умолчанию жирные . Однако, можно сделать жирным и обычный текст - достаточно взять его в тег . Смотрите пример:
Это обычный текст, а это жирный текст.
Так код будет выглядеть в браузере:
Это обычный текст, а это жирный текст.
следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.
Блок . Курсив
Кроме жирного можно сделать также и курсив с помощью тега :
Это обычный текст, а это курсивный текст.
Так код будет выглядеть в браузере:
Блок . Списки
Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки . Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).
Списки создаются с помощью тега
-
, внутри
которого обязательно должны идти теги
-
.
Тег ul
задает сам список, а в теги li
следует ложить пункты списка (то есть одному li
соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя.
Смотрите пример:
Это заголовок тайтл - Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
Так код будет выглядеть в браузере:
- Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
Списки, созданные через тег ul , называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег
-
, а пункты таких списков также создаются через теги
li
.
- Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
- Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
- normal - шрифт обычного начертания;
- italic - курсивное начертание;
- oblique - наклонное начертание.
Давайте сделаем упорядоченный список, используя тег ol :
Это заголовок тайтл Так код будет выглядеть в браузере:
Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место - и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).
Блок . Ссылки
Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другу. Если бы их не было - интернет был бы просто набором страниц, никак не связанных друг с другом.
Это заголовок тайтл Ссылка на сайт phphtml.net.Так код будет выглядеть в браузере:
Ссылки бывают абсолютные и относительные , кроме того, они могут вести как на ваш сайт, так и на чужой. Эти сложные моменты лучше показывать, а не описывать текстом, поэтому я снял для вас следующее видео. Посмотрите его и только потом переходите к дальнейшему чтению:
Блок . Картинки
Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег , имеющий обязательный атрибут src , в котором хранится путь к файлу картинки.
Как это работает, посмотрим на следующем примере:
Это заголовок тайтл Так код будет выглядеть в браузере:
Обратите внимание на то, что тег не требует закрывающего тега.
Блок . Ссылки в виде картинок
Ссылкой может быть не только текст, но и картинка - для этого достаточно тег вложить в тег , как это сделано в следующем примере. Нажмите на картинку - и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку - нажмите кнопку "назад" в браузере):
Это заголовок тайтл Так код будет выглядеть в браузере:
Блок . Разрыв строки
Вспомните, что будет, если сделать, к примеру, два абзаца рядом - в этом случае текст, который лежит в каждом из них, будет начинаться с новой строки.
Давайте убедимся в этом на следующем примере:
Это заголовок тайтл Это первый абзац.
Это второй абзац.
Так код будет выглядеть в браузере:
Это первый абзац.
Это второй абзац.
Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.
Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег
. Учтите, что этот тег особенный и не имеет закрывающего.Давайте посмотрим на его работу на следующем примере:
Это заголовок тайтл Это первая строка текста,
а это вторая.Так код будет выглядеть в браузере:
Это первая строка текста,
а это вторая.Блок . Комментарии HTML
Практически во всех языках программирования есть такое понятие как "комментарии".
Курсивное начертание - один из самых популярных способов выделить фрагмент текста и придать ему определенную значимость. Он идеально подходит для цитат, сносок, названий и имен собственных. В HTML существует два специальных тега для отображения курсивного начертания. В CSS курсивом управляет свойство font-style.
Курсив или наклонный шрифт?
Отображение одного и того же шрифта в курсивном начертании может различаться.
На картинке - три блока текста, набранных одним и тем же шрифтом Playfair Display. Первый имеет обычное прямое начертание, а второй и третий - курсивное. Они открыты в одном и том же браузере Google Chrome, но выглядят совершенно по-разному.
Дело в том, что некоторые шрифты имеют собственные курсивные наборы символов. Если браузер не имеет доступа к этому набору, но встречает текст, который должен быть отображен как курсивный, он попытается наклонить его своими силами.
Во втором блоке - как раз такой, обработанный браузером, вариант, а в третьем - оригинальный курсивный вариант шрифта Playfair Display, обладающий уникальным начертанием, больше похожий на рукописный. Браузер же просто наклоняет каждый символ текста на определенный угол, имитируя курсив.
Разбираясь, как сделать курсив в CSS или HTML, важно помнить, что в случае специфических шрифтов необходимо обеспечить браузеру доступ к их курсивным наборам. В ряде случаев результат работы браузерных алгоритмов наклона может быть неудовлетворительным.
HTML-курсив
Для курсивного отображения текста в HTML существует два специальных тега: i (от слова italic) и em. Начертание текстового фрагмента, заключенного в любой из этих дескрипторов, будет одинаковым.
Разница заключается в логическом выделении. Тег em указывает на особую значимость фрагмента. Это важно для поисковых роботов и скринридеров, которые будут выделять указанный текст с помощью интонации.
Свойство font-style
В CSS курсивом управляет инструкция font-style. Она может принимать одно из трех базовых значений:
На настоящий момент большинство современных браузеров обрабатывают значения oblique и italic одинаково, однако изначально предполагалось, что первое - это результат работы специальных браузеров алгоритмов, наклоняющих каждый символ вправо.
Если искомый шрифт браузером не обнаружен, то italic будет выглядеть точно так же, как и oblique.
В отличие от тега em, не придает выделенному фрагменту особой важности, оно скорее соответствует дескриптору i.
Примеры
Курсивным начертанием часто выделяются цитаты. Попробуем придать красивый вид.
Quote { font-style: italic; border-left: 5px solid purple; padding-left: 20px; }
Кроме декоративной рамки справа и отступов, для блока quote определено правило font-style со значением italic.
С его помощью устанавливается курсив в CSS.