Текст является важность частью сайтов, умение правильно его оформить очень важная составляющая при его создании. Использование правильных тегов для текста позволит не только улучшить его визуальное отображение, но также значительно повлияет на оптимизацию страницы для поисковых систем.
В данной статье перечислены только те теги, которые рекомендованы для использования актуальной спецификацией html5.
Структура
p — абзац. Блочный тег, разделяет текст на отдельные абзацы, в конце добавляется отступ
Форматирование
b — визуально выделяет текст жирным начертанием
strong — отображает текст жирным начертанием, логически указывает на важность текста. Может быть использован для выделения ключевых слов для оптимизации поиска
i — задает курсивное начертание текста
em — задает курсивное начертание текста, логически указывает на важность текста
u — подчеркивает текст снизу
pre — сохраняет форматирование текста (не удаляет пробелы и переносы строк)
HTML тэги, которые ты видишь впервые!
sup — текст отображается как верхний индекс
sub — текст отображается как нижний индекс
small — уменьшает текст на условную единицу
address — внутри указывается адрес (физический адрес, телефон, почта), обычно отображается курсивным шрифтом
mark — отображает текст как выделенный
abbr — оборачивает аббревиатуру (сокращение), в атрибуте title указывается ее расшифровка, которая показывается при наведении
kbd — отображает название клавиш или текст набранный пользователем, обычно отображается моноширинным шрифтом
dfn — внутри пишется название нового термина, далее идет его пояснение, обычно отображается курсивным шрифтом
ins — выделяет новый текст, который был добавлен при обновлении содержания, обычно отображается как подчеркнутый текст
del — выделяет старый текст, который был удален при обновлении содержания, обычно отображается как зачеркнутый текст
Цитаты
q — отображает текст как цитату, обрамляет его кавычками
blockquote — отображает текст как цитату. По сравнению с тегом используется для длинных цитат, оформляется отступами
cite — выделяет цитату на материал из другого источника, обычно отображается курсивным шрифтом
Списки
ul — маркированный список. Каждый элемент списка оборачивается тегами li
ol — нумерованный список. Каждый элемент списка оборачивается тегами li
dl — список терминов. Внутри используются теги: dt — название термина, dd — описание термина
Отображение кода
code — оборачивает программный код, обычно отображается моноширинным шрифтом, не учитывает переносы строк и дополнительные пробелы
var — оборачивает переменную из программного кода, обычно отображается моноширинным шрифтом
samp — оборачивает текст, которые является результатом вывода скрипта или программы, обычно отображается моноширинным шрифтом
Другие теги
span — строчный тег. Сам по себе не имеет никакого логического или визуального смысла. Часто используется внутри абзаца (
html теги для форматирования текста. html5 работа с текстом. HTML5 для начинающих. Урок#5
) для выделения части текста. Если часть текста нужно стилизовать по другому, ее можно обернуть в span, указать класс и в css добавить нужные стили
br — переносит текст на новую строку
wbr — указывает где можно сделать перенос слова
hr — вставляет горизонтальную полосу
bdo — задает направление текста, в атрибуте dir указывается направление: rtl — справа на лево, ltr — слева направо
bdi — запрещает изменение направления текста, по аналогии с bdo направление указывается в атрибуте dir, по умолчанию значение auto
Обсуждение ( 0 )
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
Источник: htmlbase.ru
HTML теги для текста
В интернете мы то и дело ищем какую-нибудь информацию, чаще всего это текст и поэтому не случайно всех больше HTML тегов предусмотрено именно для форматирования текста. Давайте познакомимся с наиболее часто используемыми HTML тегами для текста.
HTML заголовки у текста
Заголовки представлены шестью тегами от h1 до h6. Самый важный заголовок на странице — это h1 и как правило, на странице он один. Значимость заголовка падает по мере возрастания цифры на конце и выражается это в визуальном уменьшении размера и жирности шрифта.
Самый большой заголовок
Просто большой заголовок
Средний заголовок
Средне-маленький заголовок
Маленький заголовок
Самый маленький заголовок
Тег абзаца в HTML
Пальма первенства среди текстовых тегов в HTML безусловно принадлежит тегу абзаца . Размещенный текст в абзаце автоматически имеет характерный отступ слева у первого предложения. Если вас не устраивает дефолтное расстояние между абзацами текста, то отрегулировать его можно с помощью свойства margin в CSS стилях.
Простой абзац с текстом.
Существует целых три тега для указания авторства цитаты:
Тег address в HTML
Тег address нужен для хранения информации об авторе. Данный тег больше предназначен для семантической разметки, чтобы поисковым системам удобнее было собирать информацию об авторах. В реальной жизни, это малоиспользуемый тег. Ведь легко можно обойтись без него, заменив на теги абзаца и курсивного начертания.
Онлайн обучение на тему «Как создать свой сайт».
Михаил Русаков, программист и автор видеокурсов
Тег цитаты q
Тег используется для выделения в тексте цитат. Цитата заключенная внутри этого тега автоматически пропишется курсивом и в кавычках.
Михаил считает, что:Что создать сайт может практически любой человек.
Тег blockquote
Тег применяют для цитат, состоящих из нескольких предложений и вместо указания автора можно использовать атрибут cite, указывающий на источник цитаты.
Создать свой сайт не просто и не сложно. Все зависит от силы желания и от того сколько труда и времени вы готовы в это дело вкладывать.
HTML тег time
Тег time служит для обозначения времени или даты и указывается в двух вариантах:
непосредственно между между тегами
внутри атрибута datetime сообщается время для поисковых машин, на странице сама дата не отображается.
Выделение текста жирным
Для выделения текста жирным предназначены два тега, которые отображаются одинаково. Разница в том, что выделяет текст жирным для привлечения к нему внимания. А тег указывает на важность выделенного текста в документе.
Просто жирный текст
Внимание! Важный жирный текст
Наклонный текст
Теги и хоть и выводят на экраны одинаковый результат, но разница между ними все же есть. Использовать нужно для семантического акцента части текста, а тег — для оформления внешнего вида.
Наклонный текст
Акцентный наклонный текст
Зачеркнутый текст
Оба тега представляют информацию в виде зачеркнутого текста. Тег в отличие от несет смысловую нагрузку, как удаленного текста из документа. Тег перечеркивает текст в чисто оформительских целях, но все-таки наводить красоту лучше в CSS стилях.
Зачеркнутый текст
Важный зачеркнутый текст
Старая цена: 3756 руб.
Новая цена: всего 1200 руб.
Увеличение и уменьшение текста
Теги и визуально увеличивают или уменьшают текст по сравнению с остальным. Использовать эти теги стоит, как семантические, для выделения мелким шрифтом сносок или поправок. Задавать размер шрифта нужно через CSS.
Верхний и нижний индекс
Тег отображается в виде нижнего индекса. Оба тега предназначены для написания каких-нибудь формул.
H2O
Тег отображается в виде верхнего индекса.
X2 = 4
Некоторые текстовые теги не были представлены в рамках этой статьи, предлагаю вам заглянуть в мою раннюю статью на тему HTML тегов для текста.
Создано 02.03.2020 10:22:30
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Источник: myrusakov.ru
HTML форматирование текста
Вид текста на экране зависит от того, какие HTML теги были использованы для его форматирования. Теги форматирования делятся на две категории: теги физической разметки, которые отвечают за стилевое оформление (жирное начертание, курсив, шрифт и т.д.) текста, и теги логической разметки, которые несут смысловую нагрузку (например, дают понять поисковым системам по каким словам необходимо ранжировать веб-страницу).
Рассмотрим подробно теги форматирования и объясним нюансы их применения.
Теги —
Теги — используются для структурирования HTML заголовков. В HTML используются 6 уровней заголовков, от до . используется для обозначения самого важного, а наименее важного заголовков.
Пример
Результат
Теги и
Пример
Результат
Теги и
Пример
html> html> body> p>Это обычный абзац p> p>Важный фрагмент текста выделяется em>курсивным начертанием em> p> body> html>
Результат
Тег
Пример
Результат
Как вы заметили, все пробелы и переносы строк сохранены в браузере.
Тег
Пример
Результат
Тег
Пример
html> html> head> title>Использование тега SMALL title> head> body> p>Процентная ставка всего 10%* p> small>* — в день small> / body> html>
Результат
Тег и
Пример
Результат
Пример
Результат
Содержимое обоих тегов браузеры отображают как перечеркнутый текст. Несмотря на внешнюю схожесть, теги не могут заменять друг друга.
Тег и
Тег используется для определения части текста, которая была добавлена в документ. Содержимое тега в браузере отображается как подчеркнутый текст.
Пример
Результат
Пример
Результат
Теги и
Пример
Результат
Тег
Пример
Результат
Теги
,
и
Пример
Результат
Пример
Результат
Пример
Источник: ru.w3docs.com