2. Язык гипертекстовой разметки
2.4. Форматирование текстаДля форматирования текста HTML-документов предусмотрена целая группа тегов, которую можно условно разделить на теги логического и физического форматирования. Теги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тег <code>), цитата (тег <сitе>), аббревиатура (тег <abbr>) и т. д. Структурная разметке не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Теги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора документа). Для форматирования текста следует выбирать элементы, которые наиболее точно описать значение контента, т.е. логического форматирования. Если вам при этом не нравится, как выглядит контент, его следует изменить с помощью таблиц стилей. На базе логического форматирования можно гибко управлять представлением документа, а такая разметка позволяет машинам, например программным системам поиска и индексации, правильно анализировать контент и принимать решения об относительной важности элементов на странице. Теги логического форматирования текста.
Листинг 1. Пример логического форматирования текста.
<!DOCTYPE html>
Показать результат листинга 1 Теги физического форматирования текста.Теги физического форматирования включены в спецификацию HTML 5 и получили обновленные семантические определения, однако если вы хотите только изменить стиль шрифта, более подходящим решением будет применить таблицу стилей. Оставьте эти элементы для тех случаев, когда они семантически уместны.
Теги <sub> и <sup> удобно использовать для математических индексов. Теги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере. Листинг 2. Пример физического форматирования текста.
<!DOCTYPE html>
Показать результат листинга 2 Разделение на абзацы.
Любой текст имеет определенную структуру. Элементами такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др. Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши Enter. В HTML-документах символы перевода строки не приводят к образованию нового абзаца. HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Поскольку символы перевода строки оригинального документа игнорируются, то текст, отлично смотревшийся в окне редактора автора документа, может превратиться в неудобочитаемый текст в окне программы просмотра. Избежать этой неприятности позволяет применение специального тега разделения на абзацы <p>. Перед началом каждого абзаца текста следует поместить тег <р>, хотя закрывающий тег </p> не обязателен, все равно, его лучше использовать. Браузеры обычно отделяют абзацы друг от друга пустой строкой. Тег <р> может задаваться с атрибутом горизонтального выравнивания align, которые может принимать следующие значения:
По умолчанию выполняется выравнивание по левому краю. Перевод строки.При отображении текстовых документов в браузере место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифтов и размера окна просмотра. В отличие от тега абзаца <p> при использовании тега <br> не будет образована пустая строка. Для указания возможного места переноса можно использовать, так называемый, «мягкий» перевод строки, т.е. перевода строки будет выполнено только при необходимости. Для этого существует тег <wbr>, который так же, как и тег <br>, не нуждается в закрывающем теге. Заголовки внутри HTML-документа.Наряду с названием всего документа, на веб-странице могут использоваться заголовки для отдельных частей документа. Для разметки заголовков используются теги <h2>, <h3>, <h4>, <h5>, <h5> и <h6>. Эти теги требуют соответствующего закрывающего тега. Как правило, чем выше уровень заголовка, тем больше информации для читателя содержит этот раздел. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>,…,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него осуществляется вставка пустой строки. Содержимое заголовков оказывают сильное влияние на поисковые результаты, по этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком. Теги заголовков могут задаваться с атрибутом горизонтального выравнивания align, который может принимать следующие значения:
По умолчанию заголовки выравниваются по левому краю страницы. Горизонтальные линии.Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тег <hr> позволяет провести горизонтальную линию в окне браузера. Этот тег не является контейнером, поэтому не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Тег <hr> может иметь следующие атрибуты:
Пример: <hr aling="center" size="2" color="red">
Использование предварительно отформатированного текста.В HTML-документах для разбивки текста по абзацам и обеспечения при-нудительного перевода строки следует пользоваться специальными тегами. Однако бывают случаи, когда в HTML-документ необходимо включить текст, уже имеющий форматирование, выполненное традиционным способом при помощи символов перевода строки, необходимого количества пробелов, символов табуляции и т. д. Для решения таких задач предусмотрен специальный тег-контейнер <pre>, определяющий предварительно форматированный (преформатированный) текст. Текст, размеченный тегом <pre>, будет отображаться в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения всегда будет использоваться моноширинный шрифт. Текст внутри контейнера <pre> может содержать элементы форматирования уровня текста, кроме следующих: <img>, <object>, <small>, <sub> и <sup>. |
||
Текст, помеченный тегом <ins>, обычно отображается подчеркнутым.
В браузере такой текст, как правило, отображается моноширинным шрифтом.
Перенос строки может осуществляться только по символам-разделителям слов (например, пробелам). Иногда в документах требуется задать принудительный перевод строки, реализующийся независимо от параметров настроек браузера. Для этого служит тег принудительного перевода строки <br>, который не имеет соответствующего закрывающего тега. Включение тега <br> в текст документа обеспечит размещение последующего текста с начала новой строки.
Эти заголовки могут иметь шесть различных уровней и представляют собой фрагменты текста, которые выделяются на экране при отображении страницы браузером.
Недопустимо внутри преформатированного текста задавать элементы форматирования уровня блока, например, теги заголовков. Тег абзаца по логике вещей также не должен встречаться внутри преформатированного текста, однако если встречается, то будет реализовывать переход на новую строку (без образования пустой).Форматирование текста в HTML — теги оформления контента
В HTML текст форматируется с помощью тегов. Чтобы задать ему определённый стиль, надо поместить текст в соответствующий контейнер.
Все теги форматирования можно разделить на три группы:
1. Теги заголовков (h2-h6).
2. Теги оформления основного текста (<strong>, <sub>, <abbr>, <pre>, <code> и т. д.).
3.
Теги группировки (<p>, <hr>, <br>)
Теги заголовков
Превращают обычный текст в заголовок определённого уровня. Тег <h2> создаёт заголовок первого уровня — самый большой и главный (обычно название статьи на странице), <h6> отвечает за заголовок шестого уровня — самый маленький и незаметный. Эти теги важны как для пользователей, так и для поисковиков — заголовки с подзаголовками любят и те, и другие. Иерархию уровней необходимо соблюдать, то есть за <h2> должен идти <h3>, и никак не наоборот.
Чтобы понять, как это работает, впишите в html-файл следующий код:
<h2>Заголовок первого уровня</h2> <h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4> <h5>Заголовок четвёртого уровня</h5> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6>
Выглядеть в браузере это будет вот так:
Теги оформления основного текста
Позволяют форматировать на уровне символов.
Рассмотрим, что с помощью них можно делать.
Жирный шрифт
Нужен, чтобы акцентировать внимание на тексте. Для поисковиков тоже важен, им можно выделять ключевые слова.
Отвечают за жирное начертание теги <strong> и <b>.
Это <strong>жирный</strong> текст. И это <b>жирный</b> текст.
Верхний и нижний индексы
Могут использоваться в формулах, уравнениях, обозначении некоторых величин.
За создание нижних индексов отвечает тег <sub>, для верхних используется тег <sup>.
x<sub>1</sub>=32 м<sup>2</sup>
Уменьшение размера
Если нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег <small>
Обычный текст. <small>Уменьшенный текст.</small>
Подчёркивание
Этот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание.
Обычный текст. <s>Подчёркнутый текст.</s>
Зачёркивание
Зачеркнуть информацию можно, если она уже потеряла свою актуальность. Предназначен для этого тег <del>.
Это новая информация, а <del>это текст, который уже не нужен.</del>
Курсив
Нужен, чтобы акцентировать на тексте внимание, и может создаваться тегом <i> или <em>.
Первый <i>пример курсивного текста</i>, второй <em>пример курсивного текста</em>.
Ввод компьютерного текста
Бывает, что на веб-страницу нужно добавить исходный код программы и результаты её работы. Чтобы визуально разные части текста было легко друг от друга отличить, разработчики HTML и внедрили теги этой группы.
В контейнер <code> заключается код программы, при этом её переменные выделяются тегом <var>, а результат выполнения — <samp>.
Контейнер <kbd> содержит текст, который при работе с программой должен с клавиатуры вводить пользователь, а всё, что заключено в теги <pre>, сохраняет исходный формат, включая лишние пробелы и переносы строк.
Программный код будет выглядеть <code> таким образом </code>, переменные обозначаются так: <var>a, b, c</var>, вот <samp>результат выполнения программы <samp>, а это – <kbd> введённый пользователем текст</kbd>. Сохранение исходного форматирования <pre>отображается примерно так</pre>.
Цитаты и определения
Программный код будет выглядеть <code> таким образом </code>, переменные обозначаются так: <var>a, b, c</var>, вот <samp>результат выполнения программы<samp>, а это – <kbd>введённый пользователем текст</kbd>.
Сохранение исходного форматирования <pre> отображается примерно так </pre>.
<blockquote>Цитата в теге blockquote.</blockquote><cite>Цитата внутри контейнера cite.</cite><q>Короткая цитата с тегом q.</q><dfm>Выделенное определение.</dfm><abbr>Аббревиатура (НПО, ИП).</abbr>
Общий пример
Чтобы лучше понять, за что какой тег отвечает и как работает, посмотрите нижеследующий код и результат его выполнения.
<p><strong>Жирный</strong> текст можно сделать тегами <strong>strong</strong> и <b>b</b>. За <em>курсив</em> отвечают <em>em</em> и <i>i</i>. <p>Теги <sub>sub</sub> и <sup>sup</sup> используются для создания <sub>нижних</sub> (x<sub>1</sub>…x<sub>n</sub>) и <sup>верхних</sup> (4<sup>2</sup>=16) индексов.<del>Del</del> <del>зачёркивает</del>, <ins>ins</ins> — <ins>подчёркивает.</ins></p> <p>Теги <code>code</code>, <kbd>kbd</kbd>, <var>var</var> и <samp>samp</samp> используются редко и нужны для отображения листинга программ</p> <p> <abbr>abbr</abbr> нужен для обозначения аббревиатур (<abbr>HTML</abbr>). Теги blockquote, cite и q используются для оформления цитат (<q>Уж небо осенью дышало</q>)</p> <pre>Тег pre сохраняет изначальное форматирование текста, не удаляя пробелы и переносы строк.</pre></p>
Браузер интерпретирует этот код так:
Теги группировки
Нужны, чтобы текст не шёл одной сплошной строкой, а был разбит на логические составляющие.
- Внутри тегов <p></p> заключается абзац.
<p>Первый абзац</p> <p>Второй абзац</p>
- Тег <br> осуществляет переход на следующую строку внутри абзаца (отступа перед строкой не будет).
- <hr> позволяет нарисовать горизонтальную линию. Использовать его можно для более наглядного разделения текста. Атрибуты width, size, color, align и noshade задают ширину, толщину, цвет, выравнивание и отсутствие 3D-эффекта линии соответственно.
<p>Строка над линией. <hr width=”10” color=”#FE2E2E”>Строка под линией.</p>
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Тег Bold в HTML — Темы Scaler
Тег Bold в HTML
Тег Bold в HTML
Обзор
Создавая веб-страницу, мы часто хотим привлечь внимание читателя.
Мы можем сделать это, используя жирный шрифт. Чтобы сделать текст жирным, мы используем теги Bold (). Он известен как элемент Boldface. Он используется только для целей представления, а не для передачи какого-либо семантического сообщения.
Синтаксис
Текст, который должен быть выделен жирным шрифтом.
Атрибуты
Тег Bold в HTML поддерживает глобальные атрибуты, как и любой другой тег HTML. Некоторые глобальные атрибуты, которые поддерживает полужирный тег в HTML: —
| Атрибут | Описание |
|---|---|
| клавиша доступа | Элемент используется для активации или выделения сочетания клавиш. |
| autocapitalize | Используется для контроля того, используется ли ввод с заглавной буквы или нет. |
| автофокус | Используется для обозначения того, что элемент должен быть сфокусирован. |
| класс | Используется для присвоения имени класса элементу. |
| contenteditable | Используется, чтобы указать, может ли пользователь редактировать содержимое элемента. |
| contextmenu | Используется для указания контекстного меню для элемента. |
| data | Используется для хранения пользовательских данных, специфичных для страницы, для элемента. |
| dir | Используется для указания направления текста элемента. |
| перетаскиваемый | Используется для указания, можно ли перетаскивать элемент или нет. |
| dropzone | Используется для указания того, будут ли перетаскиваемые данные копироваться, перемещаться или связываться при перетаскивании. |
| hidden | Используется для обозначения того, что элемент еще не актуален или уже не актуален. |
| идентификатор | Используется для указания уникального идентификатора элемента и должен быть уникальным во всем документе. |
| lang | Используется для указания основного языка текстового содержимого элемента. |
| проверка орфографии | Используется для указания, может ли элемент проверяться на орфографические ошибки или нет. |
| стиль | Используется для указания встроенной информации о стиле для элемента. |
| tabindex | Используется для указания порядка табуляции элемента. |
| title | Содержит текст, представляющий справочную информацию, относящуюся к элементу, которому он принадлежит. |
| translate | Используется для указания, следует ли переводить текстовое содержимое элемента. |
Тег Bold в HTML в основном поддерживает все атрибуты событий, но некоторые атрибуты событий имеют определенные правила, которые могут применяться к конкретному тегу. Вот некоторые из атрибутов событий, которые поддерживает полужирный тег в HTML:0005
| Attributes | Attributes | Attributes | Attributes |
|---|---|---|---|
| onabort | ondragover | onloadeddata | onreset |
| onblur | ondragstart | onloadedmetadata | onresize |
| oncancel | ondrop | onloadstart | onscroll |
| oncanplay | ondurationchange | onmousedown | onsecuritypolicyviolation |
| oncanplaythrough | onemptied | onmouseenter | onseeked |
| onchange | onended | onmouseleave | onseeking |
| onclick | onerror | onmousemove | onselect |
| onclose | onfocus | onmouseout | onslotchange |
| oncontextmenu | onformdata | onmouseover | onstalled |
| oncopy | oninput | onmouseup | onsubmit |
| oncut | oninvalid | onpaste | onsuspend |
| ondrag | onkeydown | onpause | ontimeupdate |
| ondragend | onkeypress | onplay | ontoggle |
| ondragenter | onkeyup | onplaying | onvolumechange |
| ondragexit | onlanguagechange | onprogress | onwaiting |
| ondragleave | onload | onratechange | onwheel |
Как использовать тег
в HTML?? Тег Bold () в HTML используется для выделения текста жирным шрифтом.
Мы используем его, когда хотим что-то подчеркнуть и хотим привлечь внимание читателя. HTML предоставляет нам тег для форматирования и стиля текста.
- Мы используем выделенные жирным шрифтом теги в HTML для жирного выделения ключевых слов в отрывке или для создания контраста между заголовком и телом.
- Теги Strong очень похожи на теги Bold, мы обсудим их в следующей части.
- Мы можем использовать атрибуты класса с полужирными тегами. Затем мы можем стилизовать его, используя атрибуты класса и CSS, а также можем добавить семантическую информацию.
Разница между тегами HTML
и| Жирный тег | Строгий тег |
|---|---|
| Жирные теги () используются только для визуального выделения фрагмента текста в HTML. | Сильные теги () используются для форматирования текста в HTML и показывают важность определенной части текста, семантически выделяя ее. |
| Жирный тег предназначен для отображения текста жирным шрифтом, поэтому они используются для привлечения внимания читателя. | Сильные теги подчеркивают текст, а также выделяют его жирным шрифтом. Строгие теги помогают HTML понять, что важно. |
| Полужирные теги предпочтительнее, когда мы хотим выделить жирным только текст. | Применение сильных тегов прекрасно показано браузерами, созданными для слепых. Браузер может легко понять, какая часть важнее и на чем сделать акцент. Сильные теги предпочтительнее, когда мы хотим выделить определенную часть текста. |
Примеры
Пример 1: Простое использование тега
< b >Начнем с простого примера жирных тегов.
Пример
Темы масштабирования
Вывод
Пример 2: Разница между тегами
и Теперь давайте сравним теги обычного абзаца и жирного шрифта.
Пример
Это обычный абзац.
Это обычный абзац с тегом полужирный.
Вывод
Пример 3: Разница между тегами
иДавайте посмотрим на сравнение тегов и .
Пример
Здесь я использую тег strong, а здесь я использую тег жирный.
Вывод
CSS для выделения полужирного текста
Теперь давайте попробуем выделить жирный текст с помощью CSS.
Пример
Этот абзац выделен жирным шрифтом.
Вывод
Поддержка браузера
Полужирный тег в HTML поддерживается всеми современными браузерами. Некоторые браузеры, которые поддерживают полужирные теги: —
- Chrome (версия >=1)
- Firefox (версия >=1)
- Internet Explorer (версия >=2)
- Пограничный мобильный
- Опера
- Опера Мобайл
- Сафари Мобильный
- Самсунг Интернет
Некоторые связанные темы:
- Строгий тег < strong >
- Курсив Тег < I >
- Тег подчеркивания < u >
Заключение
- Жирный текст является важной частью форматирования.
Тег жирного шрифта в HTML используется для привлечения внимания читателя путем выделения текста жирным шрифтом. - Сильный тег используется для демонстрации его важности.
- Мы можем использовать эти методы для форматирования текста и выделения его жирным шрифтом:
- с использованием тега
- с использованием тега
- с использованием размера шрифта CSS
HTML: выделение содержимого тегами жирным шрифтом без инструкции
спросил
Изменено 2 года, 9 месяцев назад
Просмотрено 596 раз
Сегодня я пытался создать мини-сайт на основе персонажа из видеоигры и решил добавить несколько тегов, чтобы разделить содержимое на разные разделы.
Я решил разместить теги на каждой из четырех «способностей», которыми обладает персонаж, и внезапно текст внутри элементов абзаца внутри элементов div стал жирным. Я не верю, что сделал их смелыми сам, кто-нибудь знает, почему это произошло?
Я присвоил тегам div в элементе head атрибут font-weight со значением 400, чтобы решить эту проблему, однако я не думал, что это необходимо.
Я думаю, что упустил из виду что-то основное, и было бы неплохо взглянуть на мою работу другими глазами, чтобы заметить ошибку. Спасибо всем, кто может мне помочь, я публикую код ниже.
корпус {
цвет фона: фиолетовый;
цвет: персиковый;
}
картинка {
плыть налево;
}
п {
цвет: персиковый;
размер шрифта: 20px;
}
дел {
цвет: персиковый;
размер шрифта: 20px;
вес шрифта: 400;
}
h4 {
размер шрифта: 30px;
поле: 0px;
оформление текста: подчеркивание;
} Энигма
Enigma — герой из Dota 2.
Способности
<дел>
Малефис
Направляет силу Enigma на цель, заставляя ее получать урон и несколько раз оглушать ее.
Экземпляр запускается каждые 2 секунды.
