Как отображается в браузере текст обернутый тегом
В этой главе мы снова будем работать с текстом, и в отличие от материала, изложенного во второй главе: "Редактируем текст" посмотрим на некоторые вещи под другим углом, а так же поговорим о ранее не вошедших в этот учебник тегах, с помощью которых так же можно форматировать текст на страницах сайта.
Дело в том что все теги предназначенные для работы с текстом можно разделить на две группы: "теги физического форматирования текста" и "теги логического форматирования текста"
Теперь по порядку..
Теги физического форматирования текста.
О тегах физического форматирования текста речь в этом учебнике шла ранее, поэтому повторятся, не стану, а просто перечислю их:
- всё это теги физического форматирования текста.
Почему их так назвали? Да все просто.. потому что данные теги способны тем или иным способом физически воздействовать на текст.. делать его жирным, курсивом, маленьким, большим.. и т. д. Заключив текст, в какой либо тег из вышеперечисленных, мы получаем ожидаемый результат, который описан в спецификации HTML и в различных браузерах отображается практически одинаково.
На всякий случай вновь покажу старый пример:
Научная статья.
Если разбавить дистиллированную воду Н 2 О сорока процентами этилового спирта С 2 Н 5 ОН то получится жидкость в 40 о более известную широкой публике под названием - водка.
Впервые данную пропорцию придлажил предложил Дмитрий Иванович МЕНДЕЛЕЕВ.
Распитие спиртных напитков вредит вашему здоровью.
Основная задача тегов физического форматирования текста это выполнение сугубо декоративных функций.
Однако если Вы изучали справочник HTML, то наверняка обратили внимание что выше перечисленные теги это далеко не все инструменты для работы с текстом! А если Вы изучали справочник скрупулезно и пристально, то наверное заметили что некоторые теги выполняют одни и те же действия над текстом..
Например, чем отличается тег от тега ? или какая разница между и ? ведь результат и там и там одинаков!
Так да не так.. отличия есть.. и они достаточно существенные.
Логическая разметка текста.
Прежде чем рассказывать о новых тегах расскажу, о том, что следует подразумевать под фразой: "логическая разметка документа".
Под логической разметкой документа, прежде всего, принято понимать разметку текста тегами направленную на удобство работы поисковых систем и других программ, которые работают с данным документом, а так же придавать тексту в документе некий смысл. Так вот программам абсолютно по барабану как выглядит Ваш документ, красивый он или нет, какой стиль шрифта и текста используется и.т.д. программы в первую очередь пытаются найти логику на Вашей страничке, что бы в дальнейшем использовать её по своему усмотрению, например для более релевантной поисковой выдачи или для автоматического составления содержания Вашего документа.
Теперь давайте опять вернемся к вопросу выше: "Чем отличается тег от тега ?" - казалось бы какая разница ведь текст и там и там будет отображаться курсивом .. всё дело в том что тег - (курсив) - является тегом физического форматирования текста и предназначен в первую очередь для людей, а тег (особенно важный текст) - является тегом логического формирования текста и предназначен для машин! А то, что текст, взятый в тег , обычно в браузерах отображается курсивом - это всего лишь, скажем так "мода" и придумка браузеров.
Спецификация HTML не говорит о том, что теги логического форматирования текста должны определённым образом отображаться браузерами, что вот, например тот же тег должен быть отображен именно курсивом и не как иначе, а говорит лишь о том, что такой текст должен отличатся от основного и особым образом выделятся в документе..
Так какие теги лучше использовать? Ну раз уж мы уже заочно познакомились с тегами и покажу пример, комментарии будут ниже..
Как создать сайт?
Для того, что бы самостоятельно создать сайт для начала в блокноте нужно написать следующие теги:
<html> - начало документа
<head> - начало головы
</head> - закрытие головы
<body> - начало тела
</body> - закрытие тела
</html> - конец документа
!DOCTYPE>
Теперь объясню, почему на страницах данного сайта, как и в примере выше, в некоторых случаях используются теги и , а в других случаях и .
Всё дело в том, что мне как создателю данного сайта очень хочется, чтобы люди набрав в том же гугле фразу: "Как создать сайт?" или "Самостоятельное создание сайта" видели в первых строчках поисковой выдачи гугла ссылку: "Как создать сайт?" и переходили по ней на главную страницу моего ресурса :) . Так вот пометив нужные мне куски текста с помощью тегов и , я тем самым даю понять гуглу что этот текст важный и что на него следует обратить особенное внимание! - конечно, это не залог успеха, тем более для столь популярных (высокочастотных) пользовательских запросов, но при прочих равных условиях, это большой плюс в глазах поисковых систем.
И противоположенный случай..
Как человек старающийся сделать сайт удобным для чтения и восприятия другими людьми, я выделяю некоторые участки текста курсивом (юмор, примечания и прочую отсебятину) и жирным шрифтом (изучаемые теги в примерах), но я не хочу, чтобы поисковые системы обращали сильное внимание на фразы типа: "начало головы" "закрытие тела" - так как сайт написан для начинающих веб-ремесленников, а не для начинающих патологоанатомов, поэтому размечаю такой текст тегами и - они дают нужный результат, собственно полужирный шрифт и курсив, но не являются "красной тряпкой" для программ.
Теги логического форматирования текста.
Разобравшись с сутью и предназначением логической разметки текста настало время познакомить Вас с тегами которые способны разбавить сухой текст неким смыслом.
Выделяет в тексте аббревиатуру. Браузерами обычно подчеркивается пунктирной линией.
Практически ко всем тегам применим атрибут title - всплывающая подсказка, так вот если Вы в тексте выделяете некую аббревиатуру, старайтесь давать к ней расшифровку, используя данный атрибут.
title="Cascading Style Sheets">CSS позволит Вам без труда изменить стиль любого тега логического форматирования текста!
Данный тег выделяет в тексте акроним. Акроним это почти то же самое что и аббревиатура, только образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.
Так же как и с аббревиатурой для расшифровки текста желательно использовать атрибут title .
Указывает автора документа и его адрес. Обычно отображается курсивом. Предназначен для поисковых систем для сбора информации об авторе его адресе и прочей информации владельца/цев сайта.
Выделяет в тексте цитату или сноску на другой документ. Обычно браузеры отображают её курсивом.
Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом.
Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым.
Напоминает теги физического форматирования и сокращённый - перечёркнутый текст.
Использование тега , более предпочтительно, так как помимо того, что он разбавляет текст логикой еще и заменяет собой теги и , которые помечены спецификацией 4.01 как нежелательные.
Выделяет текст как определение. Как правило, когда в тексте встречается новый термин, авторы выделяют его курсивом и дают его определение, собственно для этого и нужен тег
Акроним - аббревиатура, образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.
Выделяет новый текст в новой версии документа. Выделенный текст в большинстве браузеров станет подчёркнутым.
Противоположен по значению тегу с ним же в паре обычно он и используется.
Выделяет особенно важный фрагмент текста. Обычно отображается курсивом.
От английского keyboard - клавиатура. Указывает текст вводимый с клавиатуры, или для названия клавиш. Обычно отображается моноширинным шрифтом.
Выделяет в тексте цитату. В отличие от тега цитата обозначенная тегом автоматически берётся браузерами в кавычки.
Кстати, есть еще и тег физического форматирования текста данный тег тоже помечает текст как цитату и при этом выделяет его отступами и переносами строк от остального текста.
Такие вот различия..
Обозначает текст, который выводится на экран в результате работы какой-либо программы. Обычно браузерами отображается моноширинным шрифтом.
Выделяет особенно важный фрагмент текста. Обычно отображается полужирным.
Выделяет текст, как переменную в работе какой либо программы. Обычно браузерами отображается курсивом.
Ну вот собственно и все теги созданные для логической разметки текста. Примеры показывать не стану, думаю и так всё понятно, а вот несколько полезных советов по разметке текста в документе дам.
Полезные советы:
Стиль всех тегов как логического, так и физического форматирования текста, великолепно настраивается с помощью средств CSS! Мой Вам совет учите CSS, если до этого момента ещё незнакомы с ним. При использовании свойств CSS в работе с текстом Вы забудете про проблему кроссбраузерности т. е. Ваш текст будет отображаться во всех браузерах именно так как нужно Вам, а не так как вздумается браузеру. Кроме того СSS открывает куда более широкие возможности связанные как со стилем текста, так и с дизайном сайта в целом.
Старайтесь правильно размечать текст на страницах Вашего сайта.. а именно:
Для начала, разбейте весь Ваш текст на параграфы с помощью тега - это облегчит чтение текста как для людей так и для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять "голые" слова и предложения, не взятые в какой либо тег форматирования текста.
Соблюдайте значимость заголовков - т. е. допустим заголовок страницы берите в тег подзаголовки в тег еще менее значимые подзаголовочки в тег и т. д. В идеале на странице должен быть всего один заголовок , потом текст разбивается несколькими и далее по значимости заголовков.
Используйте теги логической разметки лишь там где они действительно необходимы т. е. не стоит например выделять аббревиатуру с помощью цитаты и наоборот.. на то она и логика что бы всё было логично!!
Используйте и в тех случаях, если Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте и .
Когда выучите CSS забудьте и выкиньте из головы тег и все его атрибуты!! Им уже давно никто не пользуется, ну за редким исключением конечно..
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
Описание
Тег предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Синтаксис
Закрывающий тег
Атрибуты
Аналог CSS
HTML5 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного текста
Примечание
Следует отметить, что теги и , также как и , несмотря на сходство результата, являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает курсивный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Статьи по теме
Статьи по теме
Заголовки разных уровней внутри текста Теги вида . оформляют заключенный в них текст в виде заголовка уровня n. Значения n могут изменяться от 1 до 6. Заголовок высшего уровня выводится наиболее крупным шрифтом. Теги , , . , могут иметь атрибут выравнивания ALIGN со значениями LEFT (по умолчанию), RIGHT и CENTER.
HTML позволяет создавать нумерованные (упорядоченные), маркированные ( неупорядоченные) списки, а также так называемые списки определений (используются редко). Фрагмент текста, представляющий собой список, заключается с теги:
В списке определений текст, заключенный между тегами
Допустимо задание вложенных списков.
-
имеет необязательные атрибуты :
TYPE = формат | формат нумерации; может иметь значения: 1 - арабские цифры (по умолчанию) A - прописные буквы a - строчные буквы I - большие римские цифры i - маленькие римские цифры |
START = значение | первый номер в списке (по умолчанию 1) |
-
имеет необязательный атрибут :
TYPE = формат | формат маркера; может иметь значения: disc - диск (по умолчанию) circle - окружность square - квадрат |
Заголовки разных уровней внутри текста
Теги вида . оформляют заключенный в них текст в виде заголовка уровня n. Значения n могут изменяться от 1 до 6. Заголовок высшего уровня выводится наиболее крупным шрифтом.
Теги , , . , могут иметь атрибут выравнивания ALIGN со значениями LEFT (по умолчанию), RIGHT и CENTER.
Современный сайт невозможно представить без текстов. Чтобы пользователи могли легко взаимодействовать с контентом, важно позаботиться о его форматировании. Использование html тегов позволяет оформить текст, выбрать шрифт и начертание, выделить заголовки – другими словами, сделать всё, чтобы информация стала наглядной и доступной.
Кроме заботы о читателе, разметка текста при помощи html тегов выполняет другую важную функцию. Теги влияют на оптимизацию сайта и помогают улучшить индексацию страницы поисковыми системами. Грамотное форматирование дает возможность поисковым роботам выделить ключевые слова, по которым нужно ранжировать страницу в поисковой выдаче.
Как обернуть текст в тег
Html теги – это своего рода контейнеры для текста. Они не имеют визуального отображения, но несут смысловую нагрузку, и указывают, как будет отображаться на странице сайта каждый текстовый фрагмент.
За вид текста в целом отвечает хтмл тег . Через его атрибуты face, size и color можно задать необходимый шрифт, его размер и цвет.
Как указать шрифт при помощи html тега
Эти атрибуты можно располагать в любом порядке и использовать по отдельности.
Тег шрифта
Размер шрифта можно изменить при помощи атрибута size. Указывается в виде цифры, по умолчанию применяется значение size =”3”.
При помощи html тегов можно задать любой из 3 типов шрифтов:
- С засечками (serif)
- Без засечек (san-serif)
- Моноширинный (monospaced)
Атрибут face задает необходимый шрифт, достаточно указать его название.
Приведем пример использования html тега шрифта:
Данное форматирование будет выглядеть на странице следующим образом:
Результат применения html тега с атрибутами face и size
Тег цвета в html
Задать цвет шрифта при помощи атрибута color можно тремя способами. Первый – указать RGB код цвета, второй – выбрать html код цвета, третий – просто написать его название. Посмотреть коды популярных цветов можно в специальных таблицах.
Названия и коды цветов для html
Воспользуемся способом указания цвета по его названию.
Тег заголовка
Заголовки – одни из важнейших элементов, которые формируют структуру web-страницы. Для создания логической последовательности текста, выделения названий разделов используются заголовки разных уровней. Они выделяются html тегами ,,… .
Как выглядят заголовки разных уровней
Важно учитывать, что заголовок с хтмл тегом может использоваться на каждой странице сайта только один раз. Он должен быть уникальным и содержать ключевые слова, соответствующие тематике страницы.
Размеры шрифта заголовков разных уровней:
Уровень заголовка | Размер шрифта в браузере | Верхний и нижний отступы |
2em | 0,67em | |
1,5em | 0,83em | |
1,17em | 1em | |
1em | 1,33em | |
0,83em | 1,67em | |
0,67em | 2,33em |
Тег текста по центру
Выравнивание производится при помощи атрибута align. Задавая для него значения left или right, можно установить выравнивание по левому или правому краю. Если параметр не задан, то по умолчанию выравнивание произойдет по левому краю.
Выбрав html тег align=»center», можно выровнять слово, предложение или абзац по центру.
Как выглядит выравнивание текста на веб-странице
Тег жирного текста
Полужирное начертание шрифта можно установить при помощи двух разных html тегов.
Тег визуально выделяет шрифт, при этом не создавая дополнительной смысловой нагрузки.
Тег относится к инструментам логической разметки. Он не только выделяет текст, но и указывает на его важность при ранжировании страницы. Еще он влияет на интонацию при голосовой озвучке страницы, показывая, что на выделенную информацию стоит обратить особое внимание.
Тег зачеркнутого текста
Тег используется для выделения удаленного фрагмента. Визуально перечеркивает текст.
Теги и также визуально делает шрифт перечеркнутым. Не несут дополнительной смысловой нагрузки.
Тег подчеркнутого текста
Тег выделяет фрагмент текста, подчеркивая его.
Тег также отвечает за создание подчеркнутого шрифта. Этот хтмл тег обычно используют для того, чтобы отметить изменения. Им выделяют новый текст, добавленный в документ.
Тег ссылки
Как оформить ссылку на сайте html тегами
Выводы
Html теги не отображаются на странице сайта, которую видят пользователи. Но их использование необходимо для создания правильной структуры страницы. Грамотное применение хтмл тегов положительно влияет на индексацию сайта и его продвижение в поисковой выдаче.
При оформлении заголовков на странице необходимо последовательно использовать html теги , ,…. Заголовок первого уровня может применяться на странице только один раз, и содержать подходящие по смыслу ключевые слова.
Непосредственно за шрифт, его цвет и размер отвечает html тег и его атрибуты.
HTML-текст представлен в спецификации элементами для форматирования и группировки текста. Данные элементы являются контейнерами для текста и не имеют визуального отображения.
Элементы для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family ).
Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри элемента .
HTML-элементы для текста
1. HTML-элементы для заголовков
Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Элементы . должны использоваться только для выделения заголовков нового раздела или подраздела.
При использовании заголовков необходимо учитывать их иерархию, т.е. за должен следовать и т.д. Также не рекомендуется вкладывать в заголовки другие элементы.
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня
1.1. ЭлементЗаголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Элемент должен быть уникальным для каждой страницы сайта.
Рекомендуется прописывать в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.
1.2. ЭлементПредставляет подзаголовки элемента . Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.
1.3. ЭлементПоказывает подзаголовки элемента . Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.
1.4. Элементы , ,Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
Для всех элементов доступны глобальные атрибуты.
2. Элементы для форматирования текста
2.1. ЭлементЗадаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.
2.2. ЭлементОтображает шрифт курсивом, придавая тексту значимость.
2.3. ЭлементОтображает шрифт курсивом.
2.4. ЭлементУменьшает размер шрифта на единицу по отношению к обычному тексту.
2.5. ЭлементЗадаёт полужирное начертание шрифта, относится к элементам логической разметки, указывая браузеру на важность текста.
2.6. ЭлементИспользуется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
2.7. ЭлементИспользуется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
2.8. ЭлементВыделяет текст в новой версии документа, подчёркивая его.
Для элемента доступны атрибуты cite и datetime .
2.9. ЭлементПеречёркивает текст. Используется для выделения текста, удаленного из документа.
Для элемента доступны атрибуты cite и datetime .
2.10. ЭлементПрименяется для выделения фрагментов текста в справочных целях, окрашивая блок символов желтым цветом.
3. Элементы для ввода «компьютерного» текста
3.1. ЭлементСлужит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.
3.2. ЭлементОтмечает фрагмент как вводимый пользователем с клавиатуры. Отображает текст моноширинным шрифтом.
3.3. ЭлементПрименяется для выделения результата, полученного в ходе выполнения программы. Отображает текст моноширинным шрифтом.
3.4. ЭлементВыделяет имена переменных, отображая текст курсивом.
3.5. ЭлементПозволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
4. Элементы для оформления цитат и определений
4.1. ЭлементПрименяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title , она появляется при наведении курсора мыши на текст.
4.2. ЭлементИспользуется для изменения текущего направления текста.
Для элемента доступен атрибут dir .
4.3. ЭлементВыделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для элемента доступен атрибут cite .
4.4. ЭлементИспользуется для выделения коротких цитат. Браузерами заключается в кавычки.
Для элемента доступен атрибут cite .
4.5. ЭлементПрименяется для выделения цитат, названий произведений, сносок на другие документы.
4.6. ЭлементПозволяет выделить текст как определение. Несмотря на наличие данного элемента, рекомендуется выделять текст силами CSS.
Для элемента доступен атрибут title .
5. Абзацы, средства переноса текста
5.1. ЭлементРазбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхнее и нижнее внешнее поле margin , равное 1em , при этом поля соседних абзацев «схлопываются».
5.2. ЭлементПереносит текст на следующую строку, создавая разрыв строки.
5.3. ЭлементИспользуется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.
Читайте также: