Как сделать слово курсивом в html

Работа с текстом. Курсив и полужирный шрифт.

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

Если нам, например, нужно выделить какое-то слово полужирным шрифтом, в HTML есть специальный тэг, который за это отвечает и этот тэг называется :

Текст, который должен быть выделен полужирным шрифтом

strong — переводится с английского языка как «усиленный». Это парный тэг и в зоне его действия находится тот текст, который должен быть выделен полужирным шрифтом.

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

Текст, который должен быть выделен курсивным шрифтом

Это тоже парный тэг.

Попробуйте разместить какой-либо текст на вашей веб-странице в эти тэги и посмотреть какой эффект от этого произойдет в браузере.

Дмитрий Ченгаев ��
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
2022-03-24

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

HTML: Начертание текста

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

Жирное начертание

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

Code Basics — курсы по программированию.





 

Code Basics — курсы по программированию.

HTML — язык разметки гипертекста





 

HTML — язык разметки гипертекста

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

• — простое выделение текста. Его можно использовать в любом месте для визуального выделения текста. Никакой смысловой нагрузки этот тег не несёт
• — логическое выделение важного участка текста. Этот тег несёт смысловую нагрузку и размечает именно важную часть. Его не следует применять на всех участках подряд

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

Курсивное выделение

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

Code Basics — бесплатные курсы по программированию
 

Code Basics — бесплатные курсы по программированию

В этом примере были размечены две части текста:

• Тегом было размечено название портала Code Basics. Тег предназначен для визуального выделение текста курсивом и не несёт смысловой нагрузки
• Тегом была выделена фраза «бесплатные курсы». Это логический акцент на бесплатности курсов, который был придан предложению. Курсов много, а бесплатных нет, поэтому стоит добавить акцент на эту часть предложения

Задание

Добавьте в редактор фразу

Hexlet — hands-on programming courses

в которой слово «courses» сделайте жирным начертанием (физическая разметка), и выделите сочетание «programming» курсивом (логическая разметка). Не забудьте обернуть фразу в параграф

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

• Теги для визуального выделения короче, чем для смыслового. Это поможет запомнить, когда использовать и , а когда и
• В практике вместо и используют стилизацию с помощью CSS

Определения

• Семантика — Смысловое значение. В контексте HTML — смысловой выбор разметки для участка информации

Курсив и полужирный или сильный и подчеркивание (Italic & Bold or Strong & Emphasize)

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

• Элемент был для курсивного текста, теперь он также используется для альтернативного текста, такого как иностранные слова, технические термины или встроенные инструкции
• Элемент
• был для акцента, теперь он используется для слов или предложений, которые вы произносите по-другому
• Наконец, элемент для чего-то с сильным акцентом, он представляет важность

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

 A foreign word, smuk, means beautiful in Danish 
 
The phrase semantinc meaning might be keywords in this document
 
Alternate accentuation? Use the em, not the italic element.
 
If you want to write semantic code it is important that you understand the differences! 

Пример

В следующем примере отрывок из «МакБет» Шекпира, используется для указания направления сцены, тогда как элемент используется, чтобы указать, к какому персонажу относится строка:

Входят Макбет и Банко

Макбет Страшней и ярче дня ещё не видел.

Банко Далеко ли до Форреса? Кто это?
Как жалок вид их и как дик наряд!
Они так отличаются от прочих жильцов земли, и все ж они на ней!
Кто вы такие? Вы живые твари?
Вас можно спрашивать? Как будто да.
Вы поняли меня и приложили
Сухие пальцы к высохшим губам.
Вы — женщины, но бороды на лицах
Как будто говорят нам о другом.

Макбет Кто вы, ответьте, если речь дана вам!

Первая ведьма Хвала тебе, Макбет, гламисский тан!

Вторая ведьма — Хвала тебе, Макбет, кавдорский тан!

Третья ведьма Хвала Макбету, королю в грядущем!

Использование элементов и the в этом действительно создает одну проблему — что если вы вдруг решите, что хотите, чтобы он выглядел по-другому? Вот где CSS-стилизация пригодится. Добавляя атрибут class к каждому или , вы можете использовать семантические свойства элементов, но при этом иметь полный контроль над их внешним видом. Класс направления сцены может быть сокращен до stg-direc, а класс символов может быть сокращен до char, и тогда разметка будет выглядеть следующим образом:

 
Enter MACBETH and BANQUO MACBETH So foul and fair a day I have not seen. BANQUOHow far is't call'd to Forres? What are these …
 

Чему вы научилсиь

• Если вы не используете CSS для стилизации своих элементов, содержание в и элементы будут выглядеть одинаково
• Если вы не используете CSS для стилизации своих элементов, содержание в и элементы будут выглядеть одинаково
• следует отдать предпочтение элементам и , в отличие от lt;i> и
• Эти элементы не должны использоваться для цитирования и извлечения цитат, вместо этого вы должны использовать и
• Вы можете использовать классы в сочетании с этими элементами, что дает вам возможность изменить внешний вид элементов и тем самым использовать элементы семантически, а не визуально

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!

HTML Жирный и курсив

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

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

Этот второй вариант, безусловно, больше соответствует принципу разделения контента и графики , согласно которому теги не должны определять внешний вид текста.

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

Итак, давайте попробуем понять, как использовать различные теги:

ТЕГ	ОПИСАНИЕ
	Жирный текст. Приписывает текст для выделения важности. Это помогает тематизировать страницу, а также может использоваться для стратегий SEO, а также в заголовках для обозначения наиболее важной части заголовка
	Устанавливает жирное начертание шрифта. Предлагает стилистическое различие по отношению к остальной части контента, не придавая особой важности тексту ( примечание: жирный он или нет, не имеет значения).
	Браузеры отображают такой текст курсивным начертанием. Подобно , он служит для представления текста или предложения, которое имеет большее значение по отнощению к другому тексту.
	Устанавливает курсивное начертание шрифта. Он служит для представления текста, который выражает тон, настроение или что-то, что отличается от остального содержимого, без добавления дополнительных значений или важности.

В конечном счете, выразительная способность «strong» и «em» улучшена, а также «i» и «b», когда-то освобожденные от определений курсива и жирного шрифта . Что касается стилей, они теперь полностью ограничены CSS.