Теги форматирования текста в html

Текстовые поля

Последнее обновление: 08.04.2016

Однострочное текстовое поле создается с помощью элемента input, когда его атрибут имеет значение :


<input type="text" name="login" />

С помощью ряда дополнительных атрибутов можно настроить текстовое поле:

  • dirname: устанавливает направление текста

  • maxlength: максимально допустимое количество символов в текстовом поле

  • pattern: определяет шаблон, которому должен соответствовать вводимый текст

  • placeholder: устанавливает текст, который по умолчанию отображается в текстовом поле

  • readonly: делает текстовом поле доступным только для чтения

  • required: указывает, что текстовое поле обязательно должно иметь значение

  • size: устанавливает ширину текстового поля в видимых символах

  • value: устанавливает значение по умолчанию в текстовом поле

Применим некоторые атрибуты:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Текстовые поля в HTML5</title>
	</head>
	<body>
		<form>
			<p><input type="text" name="userName" placeholder="Введите имя" size="18" /></p>
			<p><input type="text" name="userPhone" placeholder="Введите номер телефона" size="18" maxlength="11" /></p>
			<p>
				<button type="submit">Отправить</button> 
				<button type="reset">Отмена</button>
			</p>
		</form>
	</body>
</html>

В этом примере во втором текстовом поле сразу устанавливаются атрибуты и . При этом size — то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.

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

В то время как значение представляет введенный в поле текст по умолчанию:

<p><input type="text" name="userName" value="Том" /></p>
<p><input type="text" name="userPhone" placeholder="Номер телефона" /></p>

Атрибуты и делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с disabled текстовое поле затеняется:

<p><input type="text" name="userName" value="Том" readonly /></p>
<p><input type="text" name="userPhone" value="+12345678901" disabled /></p>

Среди атрибутов текстового поля также следует отметить такой атрибут как list. Он содержит ссылку на элемент datalist, который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Текстовые поля в HTML5</title>
	</head>
	<body>
		<form>
			<p><input list="phonesList" type="text" name="model" placeholder="Введите модель" /></p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
		<datalist id="phonesList">
			<option value="iPhone 6S" label="54000"/>
			<option value="Lumia 950">35000</option>
			<option value="Nexus 5X"/>
		</datalist>
	</body>
</html>

Атрибут текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.

Поле поиска

Для создания полей поиска предназначен элемент input с атрибутом . Формально он представляет собой простое текстовое поле:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Поиск в HTML5</title>
	</head>
	<body>
	<form>
		<input type="search" name="term" />
		<input type="submit" value="Поиск" />
	</form>
	</body>
</html>

Поле ввода пароля

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

<form>
	<p><input type="text" name="login" /></p>
	<p><input type="password" name="password" /></p>
	<input type="submit" value="Авторизация" />
</form>

НазадВперед

Форматирование

Тег Описание Chrome Firefox Opera Safari IExplorer Edge
<acronym> Не поддерживается в HTML5. Определяет акроним. Используйте вместо данного элемента <abbr>. Да Да Да Да Да Да
<abbr> Определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковиков. Да Да Да Да Да Да
<address> Определяет контактную информацию (автор / владелец) документа или статьи. Да Да Да Да Да Да
<b> Определяет жирное начертание текста. Да Да Да Да Да Да
<bdi> Изолирует фрагмент текста, который отформатирован в другом направлении, то есть позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью. Да Да Да Да Нет Нет
<bdo> Используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например — арабский). Да Да Да Да Да Да
<big> Не поддерживается в HTML5.Шрифт, который отображается большего размера. Используйте CSS вместо данного элемента. Да Да Да Да Да Да
<blockquote> Определяет блочную цитату (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа Да Да Да Да Да Да
<center> Не поддерживается в HTML5.Определяет текст, который выровнен по центру. Используйте CSS вместо данного элемента. Да Да Да Да Да Да
<cite> Предназначен для выделения названия произведений (по умолчанию — курсивом). Да Да Да Да Да Да
<code> Предназначен для выделения части компьютерного кода (по умолчанию представлен моноширинным шрифтом). Да Да Да Да Да Да
<del> Перечёркнутый (удалённый) текст Да Да Да Да Да Да
<dfn> Используется, когда в документе упоминается новый термин или слово (первое и поясняемое употребление). По умолчанию, оно выделяется курсивом. Да Да Да Да Да Да
<em> Экспрессивно-эмоциональное выделение текста Да Да Да Да Да Да
<font> Не поддерживается в HTML5.Определяет цвет, размер и шрифт для текста. Используйте CSS вместо данного элемента. Да Да Да Да Да Да
<i> Курсивное начертание текста Да Да Да Да Да Да
<ins> Подчёркнутый текст, вставленный в документ. Да Да Да Да Да Да
<kbd> Вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре. Да Да Да Да Да Да
<mark> Выделенный/подсвеченный текст. 6.0 4.0 11.1 5.0 9.0 12.0
<meter> Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение. 8.0 6.0 11.0 6.0 Нет 13.0
<pre> Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк Да Да Да Да Да Да
<progress> Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена. 8.0 16.0 11.0 6.0 10.0 12.0
<q> Используется для выделения коротких цитат (строчная цитата). Да Да Да Да Да Да
<rp> Определяет, что отображать браузеру, который не поддерживает тег <ruby> 5.0 38.0 15.0 5.0 5.5 12.0
<rt> Помещает полезный текст фуриганы в составе элемента <ruby> 5.0 38.0 15.0 5.0 5.5 12.0
<ruby> Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана). 5.0 38.0 15.0 5.0 5.5 12.0
<s> Определяет текст, который больше не является правильным или актуальным. Да Да Да Да Да Да
<samp> Результат вывода компьютерной программы или скрипта. Да Да Да Да Да Да
<small> Шрифт, который отображается меньшим размером(мелкий/юридический шрифт). Да Да Да Да Да Да
<strike> Не поддерживается в HTML5. Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s> Да Да Да Да Да Да
<strong> Текст, которому придают особое значение (важный текст). Да Да Да Да Да Да
<sub> Текст с нижним индексом. Да Да Да Да Да Да
<sup> Текст с верхним индексом. Да Да Да Да Да Да
<time> Тег временной разметки (семантическая разметка). 6.0 4.0 11.1 5.0 9.0 12.0
<tt> Не поддерживается в HTML5. Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента. Да Да Да Да Да Да
<u> Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке. Да Да Да Да Да Да
<var> Математические/переменные величины. Да Да Да Да Да 12.0
<wbr> Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL). 1.0 3.0 11.7 4.0 Нет Да

Нельзя использовать сокращенные атрибуты тегов

Сокращенным называется атрибут без присвоенного значения. В примере 3.9 приведена форма с использованием таких атрибутов.

Пример 3.9. Ошибка при использовании атрибутов

XHTML 1.0IECrOpSaFx

«Пустое значение», как еще называется подобная ошибка, легко исправляется, если присвоить атрибуту значение, совпадающее с названием. В табл. 3.2 приведены некоторые атрибуты и как они записываются в HTML и XHTML.

Табл 3.2. Сопоставление атрибутов в HTML и XHTML
HTML XHTML
checked checked=»checked»
compact compact=»compact»
disabled disabled=»disabled»
ismap ismap=»ismap»
multiple multiple=»multiple»
nohref nohref=»nohref»
noresize noresize=»noresize»
noshade noshade=»noshade»
nowrap nowrap=»nowrap»
readonly readonly=»readonly»
selected selected=»selected»

В примере 3.10 показано корректное использование вышеприведенной формы.

Пример 3.10. Правильное использование атрибутов

XHTML 1.0IECrOpSaFx

Тег

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

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

Тег <title> является одним из наиболее важных тегов на странице. Рассмотрим небольшой список рекомендаций, которых нужно придерживаться для написания оптимизированного заголовка для поисковых систем:

  • Длина заголовка не должна превышать 70 символов, включая пробелы.
  • Самые важные ключевые слова нужно располагать первыми в заголовке, т.е. поисковые системы будут определять ценность ключевых слов по их очередности в заголовке: первое будет считаться наиболее важным, последнее — наименее.
  • Для разделения ключевых слов или фраз лучше использовать вертикальную черту «|». Знаки пунктуации, подчеркивания и другие символы разделители желательно не использовать или использовать в тех случаях, когда ключевое слово или фразу без них написать нельзя.
  • Старайтесь исключить из заголовка разные частицы речи (например: и, если, но, потом и т.д.).
  • Можно включить в заголовок название сайта или фирмы, если название является частью ключей фразы, или если это бренд, видя который, пользователи будут заходить именно на ваш сайт.
  • Не дублируйте текст тега <title>, заголовок должен быть уникальным для каждой страницы сайта.
  • Заголовок должен быть актуален для страницы, он должен описывать то, что в данный момент представлено на странице, например его можно написать так:
<title>Тема страницы|Ключевые слова|Название компании или сайта</title>
<!-- или так -->
<title>Ключевые слова|О нас|Название компании или сайта</title>

Сохранение авторского форматирования

Скрыть рекламу в статье

Разделы на этой странице:

Сохранение авторского форматирования

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

Что же делать, если нужно вставить в HTML?документ текст, в котором важно сохранить хотя бы разрывы строк в определенных автором местах, например текст какой?то программы? Рассмотрим пример 3.4

Пример 3.4. Страница с текстом программы (оригинал)

<TITLE>Текст программы (оригинал)</TITLE>


<BODY>

function fact(int num):int

if (num>0)

return fact(num–1)*num;

else

return 1;

end if

end function

</BODY>

При обработке приведенного кода браузер покажет весь текст, расположенный в элементе BODY, в одну строку так, как показано на рис. 3.4.

Рис. 3.4. Страница с текстом программы (оригинал)

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

Для принудительного перехода на следующую строку в нужных местах текста можно использовать элемент BR, который задается одиночным тегом <BR>. Именно этот тег и использовался для повышения наглядности предыдущих примеров. Тег <BR> можно вставлять в любом месте текста, в данном случае (пример 3.5) этот тег логично вставить в конце каждой строки программы.

Пример 3.5. Использование разрывов строк

<TITLE>Текст программы (с разрывами строк)</TITLE>

<BODY>

function fact(int num):int<BR>

if (num>0)<BR>

return fact(num–1)*num;<BR>

else <BR>

return 1;<BR>

end if <BR>

end function<BR>

</BODY>

Результат обработки этого варианта HTML?кода приведен на рис. 3.5.


Рис. 3.5. Использование разрывов строк

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

Для обычного текста использования <BR> вполне хватает. Однако в данном примере рассматривается программа, а не обычный текст. Чтобы полностью сохранить исходное форматирование текста (с учетом всех отступов), можно применить элемент PRE. Этот элемент задается парными тегами <PRE> и </PRE>. Браузер учитывает все символы, которые встречаются в тексте HTML?документа, и выводит их на экран. Пример 3.6 иллюстрирует использование элемента PRE для сохранения оригинального форматирования текста.

Пример 3.6. Страница с текстом программы (использование PRE)

<TITLE>Текст программы (PRE)</TITLE>

<BODY>

<PRE>

function fact(int num):int

if (num>0)

return fact(num–1)*num;

else

return 1;

end if

end function

</PRE>

</BODY>

Результат обработки кода примера 3.6 приведен на рис. 3.6.

Рис. 3.6. Текст с полным сохранением форматирования

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

Оглавление книги

Должна соблюдаться правильная вложенность тегов

XHTML критично относится к ошибкам следующего типа: некорректная вложенность одного тега в другой и расположение тега в несоответствующем контейнере.

Правильная вложенность тегов

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

Пример 3.7. Ошибка с положением тегов

XHTML 1.0IECrOpSaFx

В данном примере закрывающий тег </b> предшествует тегу </i>, хотя должно быть наоборот, что и приводит к ошибке. Стоит поменять теги местами, как код становится корректным.

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

Иерархия тегов

Все теги имеют строгую иерархическую систему в том смысле, что каждый тег должен находиться внутри другого тега и никак иначе. На условной вершине находится корневой элемент <html>, а все остальные теги могут содержать внутри себя другие теги, которые называются дочерними. Соответственно дочерние теги располагаются в родительском элементе.

Необходимо знать систему подчиненности тегов и следовать ей при написании кода XHTML. В примере 3.8 показана базовая структура документа.

Пример 3.8. Структура документа

XHTML 1.0IECrOpSaFx

В данном примере вначале приводится тег <html>, внутри которого располагаются теги <head> и <body>. Внутри раздела <head> хранится заголовок документа (<title>) и кодировка страницы (<meta>).

Требуется закрывать все теги

В HTML теги делятся на две категории — парные теги, называемые еще контейнерами и одинарные теги. Парные теги состоят из открывающего и закрывающего тега, причем в некоторых случаях закрывающий тег можно опустить. В XHTML закрывающий тег требуется всегда и везде. В примере 3.4 показан код с ошибкой, из-за того, что отсутствует тег </p>.

Пример 3.4. Нет закрывающего тега


XHTML 1.0IECrOpSaFx

Некоторые разработчики игнорируют закрывающие теги </li>, </p>, </td>, но в XHTML их отсутствие считается ошибкой. В примере 3.5 показано корректное использование списков.

Пример 3.5. Добавление списка

XHTML 1.0IECrOpSaFx

В данном примере каждому открывающему тегу соответствует его закрывающий тег.

Элемент <!DOCTYPE> не является частью XHTML-документа, поэтому для него закрывающего тега не требуется.

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

Пример 3.6. Добавление изображения

XHTML 1.0IECrOpSaFx

В данном примере обратите внимание на обязательный пробел, который предшествует конструкции />. В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе

В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе.

Табл 3.1. Сопоставление HTML и XHTML-тегов
HTML-тег XHTML-тег
<br> <br />
<hr> <hr />
<input> <input />
<img> <img />
<meta> <meta />

Заполнение мета-тега DESCRIPRION

Тег DESCRIPTION – это менее важный тег чем TITLE, т.к. в сниппете он может участвовать только частично или вообще не участвовать. Иными словами, поисковая система сама решает использовать его в спиппете целиком, взять текст в сниппет из контента страницы (наиболее релевантного запросу пользователя), либо вообще скомбинировать часть мета-тега с текстом со страницы. Если в карточке товара нет вообще никакого описания – это конечно очень плохо, но есть вероятность, что в этом случае в сниппет попадет именно дескрипшн.

Данный тег – это краткое описание страницы. Рекомендуемая длина описания 150-200 символов. Также можно включать туда ключевые слова, которые были использованы в теге TITLE, можно перечислять характеристики и свойства товара, коды производителей и пр. Но перекачивать ключевыми словами не нужно, все должно быть в меру и написано в первую очередь для пользователя.

Тут нужно понимать один очень важный нюанс, который, к сожалению, не понимает даже ряд seo-специалистов, особенно самоучек. Это то, что мета-тег DESCRIPTION не оказывает прямого влияния на ранжирование. Не нужно, как раньше это любили, по несколько раз указывать то или иное ключевое слово в дескрипшине, якобы это повлияет на результаты выдачи. Это было актуально очень давно, сейчас это не работает. Гугл еще в далеком 2009 году об этом сказал прямо в этом документе. Документ на английском, но если перевести дословно, то там следующее:

Тег дескрипшн может только очень-очень косвенно влиять на ранжирование. Например, через кликабельность по сниппету. Чем он более «привлекателен» для пользователя, тем больше может быть кликабельность по нему, что в конечном итоге может оказывать влияние на поведенческие факторы на странице, причем как в лучшую, так и в худшую сторону. Но это буквально тысячные доли процента, т.к. не забывайте о том, что в большом количестве случаев поисковики используют в сниппете наиболее подходящий контент со страницы, а не только тег DESCRIPTION. Да и для молодых сайтов это вообще не актуально, т.к. если ваш сайт занимает место на 50 странице, то пользователь до туда вообще не дойдет, а соответственно и не кликнет по-вашему сниппету.

Кстати говоря, мета-теги TITLE и DESCRIPRION используются по умолчанию как заголовок и описание при шаринге в социальные сети. Конечно, если нет специально микроразметки для социальных сетей.

Форматирование текста

Последнее обновление: 21.04.2016

text-transform

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

  • : делает первую букву слова заглавной

  • : все слово переводится в верхний регистр

  • : все слово переводится в нижний регистр

  • : регистр символов слова никак не изменяется

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
		
        <style>
			p.lowercase {text-transform: lowercase;}
			p.uppercase {text-transform: uppercase;}
			p.capitalize { text-transform: capitalize;}
        </style>
    </head>
    <body>
	<div>
		<p class="capitalize">Текст использует значение capitalize</p>
		<p class="lowercase">Текст использует значение lowercase</p>
		<p class="uppercase">Текст использует значение uppercase</p>
	</div>
    </body>
</html>

Свойство text-decoration

Свойство text-decoration позволяет добавить к тексту некоторые дополнительные эффекты. Это свойство может принимать следующие значения:

  • : подчеркивает текст

  • : надчеркивает текст, проводит верхнюю линию

  • : зачеркивает текст

  • : к тексту не применяется декорирование

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
		
        <style>
			p.under {
				text-decoration: underline;
			}
			p.over {
				text-decoration: overline;
			}
			p.line {
				text-decoration: line-through;
			}
			p.mixed {
				text-decoration: underline line-through;
			}
			a.none {
				text-decoration: none;
			}
        </style>
    </head>
    <body>
	<div>
		<p class="under">Это подчеркнутый текст.</p>
		<p class="over">Это надчеркнутый текст</p>
		<p class="line">Это зачеркнутый текст</p>
		<p class="mixed">Это подчеркнутый и зачеркнутый текст</p>
		<p>Не подчеркнутая <a href="index.php" class="none">ссылка<a></p>
	</div>
    </body>
</html>

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

p.mixed { text-decoration: underline line-through; }

Межсимвольный интервал

Два свойства CSS позволяют управлять интервалом между символами и словами текста. Для межсимвольного интервала применяется атрибут letter-spacing, а для интервала между словами — word-spacing:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
		
        <style>
			p.smallLetterSpace {
				letter-spacing: -1px;
			}
			p.bigLetterSpace {
				letter-spacing: 1px;
			}
			p.smallWordSpace{
				word-spacing: -1px;
			}
			p.bigWordSpace{
				word-spacing: 1px;
			}
        </style>
    </head>
    <body>
	<div>
		<h3>Обычный текст</h3>
		<p>Над ним не было ничего уже, кроме неба...</p>
		<h3>letter-spacing: -1px;</h3>
		<p class="smallLetterSpace">Над ним не было ничего уже, кроме неба...</p>
		<h3>letter-spacing: 1px;</h3>
		<p class="bigLetterSpace">Над ним не было ничего уже, кроме неба...</p>
		<h3>word-spacing: -1px</h3>
		<p class="smallWordSpace">Над ним не было ничего уже, кроме неба...</p>
		<h3>word-spacing: 1px</h3>
		<p class="bigWordSpace">Над ним не было ничего уже, кроме неба...</p>
	</div>
    </body>
</html>

text-shadow

С помощью свойства text-shadow можно создать тени для текста. Для этого свойства необходимо задать четыре значения: горизонтальное смещение тени относительно текста, вертикальное смещение тени относительно текста, степень размытости тени и цвет отбрасываемой тени. Например:

h1{
	text-shadow: 5px 4px 3px #999;
}

В данном случае горизонтальное смещение тени относительно букв составляет 5 пикселей, а вертикальное смещение вниз — 4 пикселя. Степень размытости — 3 пикселя, и для тени используется цвет #999.

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

h1{
	text-shadow: -5px -4px 3px #999;
}

НазадВперед

Browser compatibility

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support Yes Edge Full support 12 Firefox Full support 1 Notes IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

Usage notes

  • Use the for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance).
  • Do not confuse the element with the , , or elements. The element represents text of certain importance, puts some emphasis on the text and the element represents text of certain relevance. The element doesn’t convey such special semantic information; use it only when no others fit.
  • Similarly, do not mark titles and headings using the element. For this purpose, use the to tags. Further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold.
  • It is a good practice to use the attribute on the element in order to convey additional semantic information as needed (for example for the first sentence in a paragraph). This makes it easier to manage multiple use cases of if your stylistic needs change, without the need to change all of its uses in the HTML.
  • Historically, the element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the element has been changed.
  • If there is no semantic purpose to using the element, you should use the CSS property with the value instead in order to make text bold.

С этим читают