Это текст с меньшими буквами.

Это текст с большими буквами.

Пример: уменьшенный и увеличенный шрифт

• Попробуй сам »

Это обычный текст.

Это текст с меньшими буквами.

Это текст с большими буквами.

HTML тег

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

HTML тег

Тег используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в исправленном тексте документа были сделаны. Браузеры обычно помечают текст в контейнере как перечеркнутый .

HTML тег

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

HTML тег

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

HTML тег

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

Перевод строк и горизонтальные линии

Тег
(перевод строк)

Как вы уже видели раньше, тег

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

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

Тег

---

(горизонтальная линия)

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

Пример: перевод строк и горизонтальные линии

• Попробуй сам »

Эти строки отделены друг от друга с помощью абзаца (p):

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

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

Это линия:

Эти строки отделены друг от друга с помощью тега br:
Наша Таня громко плачет
Уронила в речку мячик

HTML-код с тегами , , , _{, ^:}

В тексте есть слово: удача.

Слово беда было удалено из текста.

Слово победа было добавлено в текст.

Формула воды: Н₂O.

Скорость ветра: 20м³/сек.

Пример: форматирование текста

• Попробуй сам »

В тексте есть слово: удача. Слово беда было удалено из текста. Слово было добавлено в текст. Формула воды: Н 2 O. Скорость ветра: 20м 3 /сек.

В тексте есть слово: удача.

Слово беда было удалено из текста.

Слово победа было добавлено в текст.

Формула воды: Н₂O.

Скорость ветра: 20м³/сек.

Задачи

Итоговое задание

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

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

Семантически сильное слово

• Реши сам »

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

Ты должен стать профессионалом своего дела

Ты должен стать профессионалом своего дела

Акцент на слове

• Реши сам »

Сделайте акцент на слове "полный". При этом визуально это слово должно отображаться курсивом.

HTML Beautifier & Formatter

Load URL Load URL

HTML Formatter

Enter your messy, minified, or obfuscated HTML into the field above to have it cleaned up and made pretty. The editor above also contains helpful line numbers and syntax highlighting. There are many option to tailor the beautifier to your personal formatting tastes.

When do you use HTML Viewer, HTML Formatter, HTML Formatter

Often when writing HTML your indentation, spacing, and other formatting can become a bit disorganized. It is also common for multiple developers to work on a single project who have different formatting techniques. This tool is helpful for making the formatting of a file consistent. It is also common for HTML to be minified or obfuscated. You can use this tool to make that code look pretty and readable so it is easier to edit.

Examples

The minified HTML below:

• Javascript Minify
• CSS Minify
• CSS Beautify
• Javascript Beautify
• HTML Beautify
• Perl Beautify
• PHP Beautify
• GO Beautify
• Ruby Beautify
• SQL Beautify
• XML Beautify

• Javascript Minify
• CSS Minify
• CSS Beautify
• Javascript Beautify
• HTML Beautify
• Perl Beautify
• PHP Beautify
• GO Beautify
• Ruby Beautify
• SQL Beautify
• XML Beautify

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

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

Для установки выравнивания текста обычно используется тег абзаца

С атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега