HTML5: старые теги нового назначения. Курсив на CSS: изменение начертания шрифта С помощью тега i можно

Курсивное начертание - один из самых популярных способов выделить фрагмент текста и придать ему определенную значимость. Он идеально подходит для цитат, сносок, названий и имен собственных. В HTML существует два специальных тега для отображения курсивного начертания. В CSS курсивом управляет свойство font-style.

Курсив или наклонный шрифт?

Отображение одного и того же шрифта в курсивном начертании может различаться.

На картинке - три блока текста, набранных одним и тем же шрифтом Playfair Display. Первый имеет обычное прямое начертание, а второй и третий - курсивное. Они открыты в одном и том же браузере Google Chrome, но выглядят совершенно по-разному.

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

Во втором блоке - как раз такой, обработанный браузером, вариант, а в третьем - оригинальный курсивный вариант шрифта Playfair Display, обладающий уникальным начертанием, больше похожий на рукописный. Браузер же просто наклоняет каждый символ текста на определенный угол, имитируя курсив.

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

HTML-курсив

Для курсивного отображения текста в HTML существует два специальных тега: i (от слова italic) и em. Начертание текстового фрагмента, заключенного в любой из этих дескрипторов, будет одинаковым.

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

Свойство font-style

В CSS курсивом управляет инструкция font-style. Она может принимать одно из трех базовых значений:

  • normal - шрифт обычного начертания;
  • italic - курсивное начертание;
  • oblique - наклонное начертание.

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

Если искомый шрифт браузером не обнаружен, то italic будет выглядеть точно так же, как и oblique.

В отличие от тега em, не придает выделенному фрагменту особой важности, оно скорее соответствует дескриптору i.

Примеры

Курсивным начертанием часто выделяются цитаты. Попробуем придать красивый вид.

Quote { font-style: italic; border-left: 5px solid purple; padding-left: 20px; }

Кроме декоративной рамки справа и отступов, для блока quote определено правило font-style со значением italic.

С его помощью устанавливается курсив в CSS.

Приветствую, Друзья.

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

Так вот, так как в голову ничего не приходило, о чем можно написать. Решил посмотреть статистику, что же интересует пользователей Рунета по вопросам HTML, WordPress, DLE и тому подобных тем. И знаете что? Есть еще о чем писать. На все вопросы, что я нашел, вроде бы и есть ответы, однако не всегда в понятной форме. Да и вообще стало интересно написать что-нибудь этакое.

Сегодня поговорим об HTML. А именно о том, как выделить текст жирным и курсивным начертанием, а также поговорим о выделении цветом.

Выделение текста жирным начертанием.

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

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

Пример кода:

жирный текст

Результат:

жирный текст

В этом случае мы просто выделили текст жирным начертанием и все.

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

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

Пример кода:

Результат:

Все довольно просто, не правда ли?

Выделение текста курсивом.

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

Чтобы выделить текст курсивом мы воспользуемся тегом . Этот элемент является парным и строчным, что говорит нам о том, что мы должны использовать, как открывающий тег так и закрывающий. А также должны использовать его внутри блочного элемента. И в данном случае наиболее подходящий блочный элемент — тег параграфа

Пример кода:

текст курсивом

Результат:

текст курсивом

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

Пример кода:

текст, на котором мы сделали акцент

Результат:

текст, на котором мы сделали акцент

И последнее о чем я хотел бы сегодня поговорить — это выделение текста цветом.

К сожалению тега, для выделения текста цветом в HTML мы не имеем. Но все же и в этом способе нет ничего сложного.

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

Но добавить недостаточно. Также необходимо указать параметр style , что позволит добавить CSS свойства необходимому тексту, указать само свойство (color), которое поможет задать определенный цвет. И наконец, указать значение для свойства color . Но может возникнуть вопрос: «Что указывать-то?» Указать необходимо HTML-код того цвета в который мы хотим «покрасить» текст. HTML-коды цветов можно найти .

Теперь чтобы было понятней рассмотрим пример.

Пример кода.

текст, который нужно выделить цветом

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

Результат:

текст, который нужно выделить цветом

Такими нехитрыми способами мы можем манипулировать текстом на нашей странице. Хочу также отметить, что все то, о чем мы только что говорили, работает и на WordPress и на DLE, ибо любой движок для вывода страниц использует HTML. Именно поэтому HTML можно назвать основой основ любого сайта, не важно, какая у Вас CMS.

Надеюсь, я все понятно объяснил.

Удачи, Друзья. Скоро… Будут интересные новости…

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

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

Правила и порядок написания тегов

Вы уже знаете, что такое открывающий и закрывающий теги. Если нет, то прочтите статью, приведенную в самом начале этого материала. Если коротко, то теги бывают двух видов: одиночные (например, перенос на новую строку
) и контейнерные (парными). Так вот, все теги форматирования текста являются парными . Это означает, что любой элемент имеет открывающий и закрывающий теги, а выделяемый фрагмент должен быть помещен между ними. Например, правильное выделение фразы будет выглядеть так: Выделенный фрагмент

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются ().

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

Выделенный фрагмент

или вот так:

Выделенный фрагмент

Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (), в зависимости от настроек. А теперь перейдем к самим тегам форматирования

Выделение текста жирным и курсивом — теги , , и

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

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

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

Текст в тегах strong Текст в тегах b

Ту же ситуацию мы можем наблюдать в случае с тегами выделения курсивом и . Попытайтесь найти отличия между двумя примерами:

Текст в тегах em

Текст в тегах I

А вот исходный код:

Текст в тегах em Текст в тегах I

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на . Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .

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

Теги выделения текста чертой — , и

Теперь рассмотрим несколько тегов, которые используют черту в оформлении текста. Самый известный вам из текстовых редакторов — тег или подчеркивание . Влияние на ранжирование этот тег не оказывает (насколько я знаю), а вот выделить какой-либо текст и заострить на нем внимание поможет. Пример использования данного тега я привел чуть выше.

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

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

Тег и атрибуты — параметры шрифта текста

Теперь рассмотрим тег, который не используется без атрибутов. С помощью его вы сможете задать параметры для определенного фрагмента текста. Вообще, сейчас предпочтительней использовать (каскадные таблицы стилей), т.к. с помощью них можно сильно сократить весь HTML код страницы. Итак, рассмотрим тот самый тег . Для него существует всего три атрибута:

  • face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
  • size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
  • color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

Так выглядит текст в теге с использованием каждого атрибута:

Этот текст имеет размер 6px 


Этот текст красного цвета


Этот текст имеет шрифт Arial


Этот текст красного цвета и размера 5px

А вот что вы увидите, после обработки написанного кода: 


Блочные элементы оформления текста — заголовки 
-
, абзац 


Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов 
, 
,..., 
. Вот как выглядят все заголовки в обработанном виде:




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


А теперь поговорим про тег выделения абзаца 
Функция данного тега заключается в отделении текста между от другого такого же текста пустой строкой. Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:




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




В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.


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


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

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

 
The frobonitor and barbinator components are fried.
 
И лидов (первый абзац статьи в журналистике)

 


 
Kittens "adopted" by pet rabbit


 
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.



 
В свою очередь  , как и раньше, означает повышенную значимость своего содержимого.
 vs 

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

 Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам». 

  же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)
Казнить нельзя, помиловать. 
Внимательно читайте договор!

«Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический
 элемент —  
.
Холивар о 

Раньше  был ни чем иным, как зачёркнутый текст. Теперь  
 представляет информацию, которая утратила свою актуальность. 

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

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

Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кроме  даже не являются невалидными. Кроме того, HTML5 разрабатывался с расчётом на обратную совместимость, это же относится и к новой семантике старых элементов. Радикально ничего не изменилось, а добавилась лишь семантическая перчинка.

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



Блок . Структура простейшей страницы


Страница сайта - это обычный текстовый файл с расширением .html
.
 Внутри этого файла и хранится текст HTML страницы вместе с тегами.
 Этот файл обязательно должен иметь следующие теги:
 тег 
, который должен содержать в себе текст всего сайта (все,
 что написано вне этого тега, браузером будет проигнорировано),
 а внутри него должны быть еще два тега:
 тег 
 для служебного содержимого страницы
 и тег 
 - для основного текста, который и виден на экране браузера.


В служебное содержимое, которое располагается внутри тега 
,
 входит много различных вещей, но пока нам нужны только две из них.
 Это тег 
, задающий название страницы,
 которое будет видно во вкладке браузера, и тег <meta>
,
 который задает кодировку страницы (она ставится в атрибуте <b>charset
</b> и обычно имеет значение <b>utf-8
</b>,
 подробнее об этом в видео, которое будет ниже на пару абзацев).</p>
<p>Кроме того, перед тегом <html>
 обычно пишется конструкция
 <b>doctype
</b>, которая указывает версию языка HTML, на которой сделан сайт.
 Актуальная сейчас версия языка имеет номер пять и доктайп для нее
 должен выглядеть так - <!DOCTYPE html>
.</p>
<p>Итак, давайте посмотрим на основную структуру страницы
 (чтобы запустить это пример в браузере - скопируйте его в текстовый файл с расширением
 <b>.html
</b> и откройте в браузере, если у вас проблемы с этим - посмотрите видео под примером):</p>
<p> <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Это заголовок тайтл
 
 
 Это основное содержимое страницы.
 

 
Как выглядит этот пример в браузере
 смотрите по данной ссылке .


Думаю, после того, как вы прочитали про основную структуру страницы,
 у вас по-прежнему остается некоторое недопонимание, как все это выглядит
 на практике.
 Поэтому я снял специальное видео,
 в котором покажу вам,
 как сделать вашу первую HTML страницу и запустить ее в браузере (в нем я также расскажу про title страницы,
 про кодировки, про оформление кода). Посмотрите его и только потом переходите к дальнейшему чтению:



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


Блок . Абзацы


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


Абзац создается с помощью тега 
Таким образом:


 

 
 
 Это заголовок тайтл
 
 
 
Это абзац.
 

 
Это еще один абзац.
 

 
И еще один абзац.
 

 

 

 
Это абзац.

 
Это еще один абзац.

 
И еще один абзац.


Блок . Заголовки h1, h2, h3, h4, h5, h6


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


Заголовки создаются
 с помощью тегов
 

,
 

,
 

,
 

,
 

,
 

.
 Они имеют разную степень важности. В заголовке h1
 следует располагать название
 всей HTML страницы
, в h2
 - название блоков
 страницы,
 в h3
 - название подблоков и так далее.


Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS,
 но об этом позже). Смотрите пример:


 

 
 
 Это заголовок тайтл
 
 
 
Заголовок h1

 
Заголовок h2

 
Заголовок h3

 
Заголовок h4

 
Заголовок h5

 
Заголовок h6

 
Это первый абзац.

 
Это второй абзац.

 
Это третий абзац.

 

 
Так код будет выглядеть в браузере:

 
Заголовок h1

 
Заголовок h2

 
Заголовок h3

 
Заголовок h4

 
Заголовок h5

 
Заголовок h6

 
Это первый абзац.

 
Это второй абзац.

 
Это третий абзац.


Блок . Жирный


Вы уже знаете, что заголовки по умолчанию жирные
. Однако, можно
 сделать жирным и обычный текст - достаточно взять его в тег 
.
 Смотрите пример:


 

 
 
 Это заголовок тайтл
 
 
 
Это обычный текст, а это жирный текст.
 

 

 
Так код будет выглядеть в браузере:

 
Это обычный текст, а это жирный
 текст.


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

 делает жирным отдельные кусочки текста.


Блок . Курсив


Кроме жирного можно сделать также и курсив
 с помощью тега 
:


 

 
 
 Это заголовок тайтл
 
 
 
Это обычный текст, а это курсивный текст.
 

 

 
Так код будет выглядеть в браузере:


Блок . Списки


Наряду с абзацами и заголовками существует еще один важный элемент страницы -
 это списки
. Такие элементы наверняка знакомы всем пользователям интернета.
 Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого
 пункта списка обычно стоит закрашенный кружок (он называется маркер
 списка).


Списки создаются с помощью тега 

                
                

                    
                    
 
                
 
				
				
				
				
    












    
	
    



        







            


        


        



    2024 wisemotors.ru. Как это работает. Железо. Майнинг. Криптовалюта.