Содержание

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

К тегам форматирования текста в HTML можно отнести теги изменяющие отображение выделенного фрагмента.

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

<strong> — важный фрагмент текста, жирный;
<em> — акцентирование внимания, курсив;
<mark> — подсвеченный участок текста;
<b> — жирный шрифт;
<i> — курсив, наклонный шрифт;
<s> — зачеркнутый текст;
<small> — текст меньшего размера;
<sup> — верхний индекс;
<sub> — нижний индекс;
<pre> — предварительно отформатированный текст;
<dfn> — термин;
<h2> — <h6> — заголовки;
<q> — короткая внутристрочная цитата;
<blockquote> — цитата;
<cite> — сноска на название материала;
<code> — программный код;
<samp> — результат вывода компьютерной программы;
<kbd> — клавиатурный ввод;
<var> — переменная компьютерной программы.

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

Теги выделения фрагментов текста

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

<strong>Важный фрагмент текста</strong>

Тег <em> используется для акцентирования внимания, «подчеркивания» фрагмента текста. Браузеры обычно отображают текст внутри тега <em> курсивом. <em> — тег логического выделения.

<em>Акцентированный фрагмент</em>

Тег <mark> используется для подсветки фрагмента текста.

<mark>Подсвеченный фрагмент</mark>

Тег <b> используется для написания текста жирным шрифтом. Тег физического форматирования, не придает выделенным участком логический вес. Используйте тег <b> только если характер выделения не подходит под другой тег форматирования текста по смыслу.

<b>Текст жирным шрифтом</b>

Тег <i> используется для написания текста курсивом. Используйте тег <i> только если характер выделения не подходит под другой тег форматирования текста по смыслу.

<i>Текст курсивом</i>

Тег <s> используется для указания некорректности, неактуальности выделенного фрагмента. Текст внутри тега <s> выводится перечеркнутым.

<s>Перечеркнутый текст</s>

Тег <small> используется для написания текста шрифтом меньшего размера.

<small>Текст меньшего размера</small>

Тег <sub> используется для создания текста нижнего индекса.

<sub>Текст нижнего индекса</sub>

Тег <sup> используется для создания текста верхнего индекса.

<sup>Текст верхнего индекса</sup>

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

<pre>Предварительно отформатированный текст</pre>

Теги устанавливающие суть содержимого

Теги <h2> — <h6> указывают, что содержимое является заголовком (подзаголовком). <h2> — заголовок наиболее высокого уровня, <h6> — наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.

<h2>Заголовок</h2>

Тег <dfn> указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега <dfn> курсивом.

<dfn>Термин</dfn>

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

<q>Короткая цитата</q>

Тег <blockquote> указывает, что содержимое является цитатой. Содержимое тега выводится в отдельном блоке.

<blockquote>Цитата</blockquote>

Тег <cite> указывает, что содержимое является названием материала. Браузеры обычно отображают текст внутри <cite> курсивом.

<cite>Название материала</cite>

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

<code>Код компьютерной программы</code>

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

<samp>Результат вывода компьютерной программы</samp>

Тег <kbd> указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега <kbd> моноширинным шрифтом.

<kbd>Клавиатурный ввод</kbd>

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

<var>Переменная компьютерной программы</var>

guruweba.com

Основные HTML теги форматирования текста

Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! В этой статье речь пойдет о тегах форматирования текста. Яркими примерами являются выделение текста жирным или курсивом. Также мы рассмотрим влияние некоторых тегов на внутреннюю оптимизацию сайта и правила их написания. Про то, что такое теги и атрибуты вы можете прочитать в приведенной статье. Кстати, вы можете встретить подобные элементы оформления текста вы можете во многих текстовых редакторах, например в Ворде.

Теги разделяются на 2 вида: блочные и строчные. При использовании первых, вы сможете изменить содержание части текста (строки, отдельные фрагменты или же слова), а вторые являются структурой HTML-документа. Теги форматирования, которые мы рассмотрим в этой статье, преимущественно строчные.

Правила и порядок написания тегов


Вы уже знаете, что такое открывающий и закрывающий теги. Если нет, то прочтите статью, приведенную в самом начале этого материала. Если коротко, то теги бывают двух видов: одиночные (например, перенос на новую строку ) и контейнерные (парными). Так вот, все теги форматирования текста являются
парными
. Это означает, что любой элемент имеет открывающий и закрывающий теги, а выделяемый фрагмент должен быть помещен между ними. Например, правильное выделение фразы будет выглядеть так:
<strong> Выделенный фрагмент </strong>

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются (что такое RSS лента и новостная рассылка).

Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом <strong>). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:

<strong><em> Выделенный фрагмент</em></strong>

или вот так:

<strong><em> Выделенный фрагмент</em></strong>

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

Выделение текста жирным и курсивом — теги <strong>, <B>, <em> и <I>


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

Рассмотрим для начала выделение текста жирным. Для этого действия используется два тега — <strong> и <B>. Разницы во внешнем виде нет. Хотя, учитывая то, что любой браузер может интерпретировать каждый элемент по-своему, вы сможете увидеть какие-либо отличия. Вот как выглядит текст в тегах <strong> и <B> в уже обработанном браузером виде:

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

<strong>Текст в тегах strong </strong>
<b>Текст в тегах b </b>

Ту же ситуацию мы можем наблюдать в случае с тегами выделения курсивом <em> и <I>. Попытайтесь найти отличия между двумя примерами:

Текст в тегах em

Текст в тегах I

А вот исходный код:

<em>Текст в тегах em </em>
<i>Текст в тегах I </i>

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег <strong> если есть <B>? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги <strong> и <em> влияют на внутреннюю оптимизацию сайта. Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге <strong>, и столько же и курсива в теге <em>.

Если же вы хотите просто выделить в тексте какой-либо момент, то используйте тег <B> или <I>. Вообще, я думаю, что поисковики тоже рассматривают текст в этих тегах как более важный, но на внутреннюю оптимизацию они все-таки оказывают меньшее влияние, нежели <strong> и <em>.

Теги выделения текста чертой — <u>, <s> и <strike>


Теперь рассмотрим несколько тегов, которые используют черту в оформлении текста. Самый известный вам из текстовых редакторов — тег <u> или подчеркивание. Влияние на ранжирование этот тег не оказывает (насколько я знаю), а вот выделить какой-либо текст и заострить на нем внимание поможет. Пример использования данного тега я привел чуть выше.

Еще два схожих по назначению тега — <s> и <strike>. Оба выполняют функцию зачеркивания текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.

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

Тег <font> и атрибуты — параметры шрифта текста

Теперь рассмотрим тег, который не используется без атрибутов. С помощью его вы сможете задать параметры для определенного фрагмента текста. Вообще, сейчас предпочтительней использовать CSS (каскадные таблицы стилей), т.к. с помощью них можно сильно сократить весь HTML код страницы. Итак, рассмотрим тот самый тег <font>. Для него существует всего три атрибута:

  • face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
  • size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
  • color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

Так выглядит текст в теге <font> с использованием каждого атрибута:

</pre>
<span>Этот текст имеет размер 6px</span>
<pre></pre>
<span>Этот текст красного цвета</span>
<pre></pre>
<span>Этот текст имеет шрифт Arial</span>
<pre></pre>
<span>Этот текст красного цвета и размера 5px</span>
<pre>

А вот что вы увидите, после обработки написанного кода:

Блочные элементы оформления текста — заголовки <h2>-<h6>, абзац <p>

Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов <h2>, <h3>,…, <h6>. Вот как выглядят все заголовки в обработанном виде:

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

А теперь поговорим про тег выделения абзаца <p>. Функция данного тега заключается в отделении текста между <p> и </p> от другого такого же текста пустой строкой. Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:

В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):

В итоге мы  получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.

Вот и подошла к концу статья про теги форматирования документа. Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором. До скорых встреч на страницах блога MonetaVInternete.ru!

monetavinternete.ru

Логическое и физическое форматирование текста.

Глава 14

В этой главе мы снова будем работать с текстом, и в отличие от материала, изложенного во второй главе: «Редактируем текст» посмотрим на некоторые вещи под другим углом, а так же поговорим о ранее не вошедших в этот учебник тегах, с помощью которых так же можно форматировать текст на страницах сайта.

Дело в том что все теги предназначенные для работы с текстом можно разделить на две группы: «теги физического форматирования текста» и «теги логического форматирования текста»

Теперь по порядку..

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

<b>, <i>, <u>, <strike>, <s>, <tt>, <small>, <big>, <sup>, <sub>, <p>, <font>, <pre>…

— всё это теги физического форматирования текста.

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

На всякий случай вновь покажу старый пример:

<html>
<head>
<title>Стили текста</title>
</head>
<body>
<big><b><u>Научная статья.</u></b></big>
<br>
<br>
Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>— водка.</i>
<br>
Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ.</tt>
<br>
<br>
<br>
<small>Распитие спиртных напитков вредит вашему здоровью.</small>
</body>
</html>

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

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

Например, чем отличается тег <em> от тега <i>? или какая разница между <b> и <strong>? ведь результат и там и там одинаков!

Так да не так.. отличия есть.. и они достаточно существенные!!..

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

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

Теперь давайте опять вернемся к вопросу выше: «Чем отличается тег <em> от тега <i>?» — казалось бы какая разница ведь текст и там и там будет отображаться курсивом .. всё дело в том что тег <i> — (курсив) — является тегом физического форматирования текста и предназначен в первую очередь для людей, а тег <em> (особенно важный текст) — является тегом логического формирования текста и предназначен для машин! А то, что текст, взятый в тег <em>, обычно в браузерах отображается курсивом — это всего лишь, скажем так «мода» и придумка браузеров.

Спецификация HTML не говорит о том, что теги логического форматирования текста должны определённым образом отображаться браузерами, что вот, например тот же тег <em> должен быть отображен именно курсивом и не как иначе, а говорит лишь о том, что такой текст должен отличатся от основного и особым образом выделятся в документе..

Так какие теги лучше использовать? Ну раз уж мы уже заочно познакомились с тегами <em> и <strong> покажу пример, комментарии будут ниже..

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Как создать сайт</title>
</head>
<body>
<p><strong>Как создать сайт?</strong></p>
<p>Для того, что бы <em>самостоятельно создать сайт</em> для начала в блокноте нужно написать следующие теги:</p>
<b>&lt;html&gt;</b> — <i>начало документа</i><br>
<b>&lt;head&gt;</b> — <i>начало головы</i><br>
<b>&lt;/head&gt;</b> — <i>закрытие головы</i><br>
<b>&lt;body&gt;</b> — <i>начало тела</i><br>
<b>&lt;/body&gt;</b> — <i>закрытие тела</i><br>
<b>&lt;/html&gt;</b> — <i>конец документа</i><br>
</body>
</html>

Теперь объясню, почему на страницах данного сайта, как и в примере выше, в некоторых случаях используются теги <em> и <strong>, а в других случаях <b> и <i>.

Всё дело в том, что мне как создателю данного сайта очень хочется, чтобы люди набрав в том же гугле фразу: «Как создать сайт?» или «Самостоятельное создание сайта» видели в первых строчках поисковой выдачи гугла ссылку: «Как создать сайт?» и переходили по ней на главную страницу моего ресурса 🙂 . Так вот пометив нужные мне куски текста с помощью тегов <em> и <strong>, я тем самым даю понять гуглу что этот текст важный и что на него следует обратить особенное внимание! — конечно, это не залог успеха, тем более для столь популярных (высокочастотных) пользовательских запросов, но при прочих равных условиях, это большой плюс в глазах поисковых систем.

И противоположенный случай..

Как человек старающийся сделать сайт удобным для чтения и восприятия другими людьми, я выделяю некоторые участки текста курсивом (юмор, примечания и прочую отсебятину) и жирным шрифтом (изучаемые теги в примерах), но я не хочу, чтобы поисковые системы обращали сильное внимание на фразы типа: «начало головы» «закрытие тела» — так как сайт написан для начинающих веб-ремесленников, а не для начинающих патологоанатомов, поэтому размечаю такой текст тегами <b> и <i> — они дают нужный результат, собственно полужирный шрифт и курсив, но не являются «красной тряпкой» для программ.

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

Буду перечислять..

Тег <abbr>

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

<abbr>CSS</abbr>

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

<abbr title=»Cascading Style Sheets»>CSS</abbr> позволит Вам без труда изменить стиль любого тега логического форматирования текста!

Тег <acronym>

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

Вступай в <acronym title=»коммунистический союз молодёжи»>комсомол</acronym>!!

Так же как и с аббревиатурой для расшифровки текста желательно использовать атрибут title.

Тег <address>

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

<address>Вася Пупкин г. Урюпинск Макаронная фабрика 2010г.</address>

Тег <cite>

Выделяет в тексте цитату или сноску на другой документ. Обычно браузеры отображают её курсивом.

Как сказал Остап Бендер <cite>Лед тронулся! господа присяжные заседатели!</cite>

Тег <code>

Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом.

<code>function()</code> — так обозначается функция в PHP

Тег <del>

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

Напоминает теги физического форматирования <strike> и сокращённый <s> — перечёркнутый текст.

Использование тега <del>, более предпочтительно, так как помимо того, что он разбавляет текст логикой еще и заменяет собой теги <strike> и <s>, которые помечены спецификацией 4.01 как нежелательные.

<del>Старая цена 1000р.</del> — Новая 999 р.!!!

Тег <dfn>

Выделяет текст как определение. Как правило, когда в тексте встречается новый термин, авторы выделяют его курсивом и дают его определение, собственно для этого и нужен тег <dfn>

<dfn>Акроним</dfn> — аббревиатура, образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.

Тег <ins>

Выделяет новый текст в новой версии документа. Выделенный текст в большинстве браузеров станет подчёркнутым.

Противоположен по значению тегу <del> с ним же в паре обычно он и используется.

<del>Старая цена 1000р.</del> — <ins>Новая 999 р.</ins>!!!

Тег <em>

Выделяет особенно важный фрагмент текста. Обычно отображается курсивом.

<em>Как создать сайт?</em> — узнай на Вебремесло.ру!!

Тег <kbd>

От английского keyboard — клавиатура. Указывает текст вводимый с клавиатуры, или для названия клавиш. Обычно отображается моноширинным шрифтом.

Нажмите <kbd>Ctrl + Z</kbd> для того чтобы отменить последнее действие.

Тег <q>

Выделяет в тексте цитату. В отличие от тега <cite> цитата обозначенная тегом <q> автоматически берётся браузерами в кавычки.

Как сказал Остап Бендер <q>Лед тронулся! господа присяжные заседатели!</q>

Кстати, есть еще и тег физического форматирования текста <blockquote> данный тег тоже помечает текст как цитату и при этом выделяет его отступами и переносами строк от остального текста.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Цитаты</title>
</head>
<body>
<p>Эта цитата создана с помощью тега <strong>логического</strong> форматирования текста <code><b>&lt;q&gt;</b></code>: <q>Лед тронулся! господа присяжные заседатели..</q> — браузеры автоматически берут такую цитату в кавычки. Кстати выходя за рамки темы, видом кавычек легко управлять с помощью <abbr title=»Cascading Style Sheets»>CSS</abbr> псевдокласса <code>lang</code> и его значения <code>quotes</code> — кавычки.</p>
<p>Эта цитата создана с помощью тега <strong>логического</strong> форматирования текста <code><b>&lt;cite&gt;</b></code>: <cite>Лед тронулся! господа присяжные заседатели.. <a href=»#»>Остап Бендер. 12 стульев.</a></cite> — обычно браузерами она отображается курсивом. Второе призвание такого вида цитаты это выполнение роли сноски на другой документ.</p>
<p>А эта цитата создана с помощью тега <strong>физического</strong> форматирования текста <code><b>&lt;blockquote&gt;</b></code>: <blockquote>Лед тронулся! господа присяжные заседатели..</blockquote> — в основном тексте она выделяется отступами и переносами строк, как правило, такой цитатой помечают длинные куски текста взятые из других источников.</p>
</body>
</html>

Такие вот различия..

Тег <samp>

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

В процессе решения задачи 2+2 программа выдаст ответ: <samp>4</samp>

Тег <strong>

Выделяет особенно важный фрагмент текста. Обычно отображается полужирным.

<strong>Как создать сайт?</strong> — узнай на Вебремесло.ру!!

Тег <var>

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

Данная функция использует переменную <var>$count</var>

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

  • Стиль всех тегов как логического, так и физического форматирования текста, великолепно настраивается с помощью средств CSS! Мой Вам совет учите CSS, если до этого момента ещё незнакомы с ним. При использовании свойств CSS в работе с текстом Вы забудете про проблему кроссбраузерности т. е. Ваш текст будет отображаться во всех браузерах именно так как нужно Вам, а не так как вздумается браузеру. Кроме того СSS открывает куда более широкие возможности связанные как со стилем текста, так и с дизайном сайта в целом.

  • Старайтесь правильно размечать текст на страницах Вашего сайта.. а именно:

    Для начала, разбейте весь Ваш текст на параграфы с помощью тега <p> — это облегчит чтение текста как для людей так и для программ, кроме того, позволит Вам в дальнейшем, легко управлять текстом с помощью CSS. Вообще старайтесь не оставлять «голые» слова и предложения, не взятые в какой либо тег форматирования текста.

    Соблюдайте значимость заголовков <h2>-<h6> т. е. допустим заголовок страницы берите в тег <h2> подзаголовки в тег <h3> еще менее значимые подзаголовочки в тег <h4> и т. д. В идеале на странице должен быть всего один заголовок <h2>, потом текст разбивается несколькими <h3> и далее по значимости заголовков.

    Используйте теги логической разметки лишь там где они действительно необходимы т. е. не стоит например выделять аббревиатуру с помощью цитаты и наоборот.. на то она и логика что бы всё было логично!!

    Используйте <em> и <strong> в тех случаях, если Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте <b> и <i>.

  • Когда выучите CSS забудьте и выкиньте из головы тег <font> и все его атрибуты!! Им уже давно никто не пользуется, ну за редким исключением конечно..



www.webremeslo.ru

Текст в html

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.

Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.

Строчные элементы обрамляются тегами <span>…</span>.

Для обрамления элементов блочного типа используется пара <div>…</div>.

Браузеры обрамляют div-блоки разрывами строки.

Блок <div> не может располагаться внутри блока <span>.

Пример
<!DOCTYPE html>
<html>
<head>
    <title>Блоки</title>
    <meta charset="Windows-1251">
</head>
<body>
<div>Первый блок текста</div>
<div>Второй блок текста.</div>
</body>
</html>

Основные теги форматирования текста

<p>…</p>Абзац.
<h2>…</h2>Заголовок первого уровня.
<h3>…</h3>Заголовок второго уровня.
<h6>…</h6>Заголовок шестого уровня.
<br>Переход на новую строку.
<q>…</q>Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes.
<hr>Горизонтальная разделительная линия.
<pre>…</pre>Текст фиксированной ширины с сохранением всех пробелов и переносов.
Пример
<!DOCTYPE html>
<html>
<head>
    <title>Заголовки и абзацы</title>
    <meta charset="Windows-1251">
</head>
<body>
<h2>Заголовок<br>первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>
<h5>Заголовок четвертого уровня</h5>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
<hr>
<p>Тест абзаца</p>
</body>
</html>

Создайте текстовый файл, как в примере. Сохраните его с расширением html.

Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.

Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать Notepad++ или PhpStorm.

Выделение в тексте

<b>…</b>Полужирный шрифт.
<i>…</i>Курсив.
<ins>…</ins>Подчеркнутый текст.
<del>…</del>Перечеркнутый текст.
<sup>…</sup>Надстрочный текст.
<sub>…</sub>Подстрочный текст.
Пример
<b>Текст может быть полужирным</b>. <i>Текст может быть курсивом.</i><br>
<ins>Текст можно подчеркнуть.</ins> <del>Текст можно зачеркнуть.</del><br>
Текст может быть <sup>надстрочным</sup>. Текст может быть <sub>подстрочным</sub>.

РЕЗУЛЬТАТ:

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

Цитаты, переменные, адреса

<address>…
</address>
Служит для предоставления автором документа контактной информации, чтобы желающие могли связаться с автором материала. Обычно отображается курсивом. Блочный элемент.
<blockquote>…
</blockquote>
Выделение цитат. Блочный элемент.
<cite>…</cite>Выделение цитат. Обычно отображается курсивом.
<code>…</code>Вывод текста шрифтом фиксированной ширины. Применяется, как правило, для вывода небольшого куска программного кода (для больших листингов используется тег <pre>).
<em>…</em>Выделение важных фрагментов текста. Обычно отображается курсивом.
<kbd>…</kbd>Вывод текста шрифтом фиксированной ширины.
<samp>…</samp>Вывод текста шрифтом фиксированной ширины.
<strong>…</strong>Сильное выделение важных фрагментов текста. Обычно отображается полужирным шрифтом.
<var>…</var>Используется для отметки имен переменных. Обычно отображается курсивом.

Читать дальше: HTML списки

htmlweb.ru

HTML — Форматирование текста html-документа и теги форматирования страницы / ProgLang

Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Полужирный или жирный текст

Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов <b>…</b> и <strong>…</strong>. Все, что находится в тегах <b>…</b> и <strong>…</strong> отображается в HTML жирным текстом (полужирным), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения жирным текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега b делаем <b>жирный шрифт</b>.</p>
    <p>С помощью тега strong делаем <strong>текст жирным</strong>.</p>
  </body>
</html>

Получим следующий результат:

Курсив — наклонный текст или шрифт

Сделать в HTML курсивом текст можно с помощь двух тегов <i>…</i> и <em>…</em>. Все, что находится в тегах курсива <i>…</i> и <em>…</em> отображается в HTML наклонным текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения курсивом текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега i делаем <i>наклонный текст или шрифт</i>.</p>
    <p>С помощью тега em делаем <em>текст курсивом</em>.</p>
  </body>
</html>

Получим следующий результат:

Подчеркнутый текст

Подчеркнуть текст в HTML можно с помощь тега <u>…</u>. Все, что находится внутри тега <u>…</u> отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример подчеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега u делаем <u>подчеркнутый текст или слово</u>.</p>
  </body>
</html>

Получим следующий результат:

Зачеркнутый текст

Зачеркнуть текст в HTML можно с помощь тега <strike>…</strike>. Все, что находится внутри тега <strike>…</strike> отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример зачеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега strike делаем <strike>зачеркнутый текст</strike>.</p>
  </body>
</html>

Получим следующий результат:

Моноширинный шрифт

Содержимое элемента <tt>…</tt> записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример моноширинного шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега tt делаем <tt>моноширинный шрифт</tt>.</p>
  </body>
</html>

Получим следующий результат:

Верхний индекс

Содержимое тега <sup>…</sup> отображается в HTML в верхнем индексе. Тег верхнего индекса <sup> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты. Данный элемент хорошо подходит когда необходимо, например, написать в HTML степень числа.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример верхнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sup делаем верхний<sup>индекс</sup> или степень числа, например, 2<sup>3</sup>.</p>
  </body>
</html>

Получим следующий результат:

Нижний индекс

Содержимое тега <sub>…</sub> отображается в HTML в нижнем индексе. Тег нижнего индекса <sub> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример нижнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sub делаем нижний<sub>индекс</sub>.</p>
  </body>
</html>

Получим следующий результат:

Вставленный текст

Содержимое внутри тега <ins>…</ins> отображается в HTML как вставленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример вставленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
  </body>
</html>

Получим следующий результат:

Удаленный текст

Содержимое внутри тега <del>…</del> отображается в HTML как удаленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример удаленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
  </body>
</html>

Получим следующий результат:

Большой текст

Содержимое тега <big>…</big> отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример большого текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега big делаем <big>текст больше</big>.</p>
  </body>
</html>

Получим следующий результат:

Маленький текст

Содержимое внутри тега <small>…</small> отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример маленького текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега small делаем <small>текст меньше</small>.</p>
  </body>
</html>

Получим следующий результат:

Группировка элементов и содержимого страницы в HTML

Элементы <div> и <span> позволяют в HTML группировать несколько элементов для создания секций или подсекций страницы.

Например, Вы можете поместить все ссылки на странице в тег <div>, чтобы указать, что все элементы в этом теге <div> относятся к меню. Затем Вы можете задать стиль тегу <div>, чтобы элементы отображались с использованием специального набора правил стиля (CSS).

Пример с тегом <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <div>
      <a href="/index.html">ГЛАВНАЯ</a> / 
      <a href="/about.html">О НАС</a> / 
      <a href="/contacts.html">КОНТАКТЫ</a>
    </div>
  
    <div>
      <h2>Название статьи</h2>
      <p>Содержимое страницы...</p>
    </div>
  </body>
</html>

Получим следующий результат:

С другой стороны, элемент <span> может использоваться для группировки только встроенных элементов. Итак, если у Вас есть часть предложения или абзаца (параграфа), который Вы хотите объединить, Вы можете использовать элемент <span> следующим образом:

Пример с тегом <span>

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <p>Группировки элементов с помощью <span>тега span</span>.</p>
  </body>
</html>

Получим следующий результат:

Эти теги обычно используются с CSS, чтобы Вы могли задать стиль к секции страницы.

Поделитесь:

proglang.su

Таблица о таблицах

Дескрипторы форматирования текста

Дескрипторы Атрибуты Назначение
< cite >   отметка цитат или название книг и статей. Отображается курсивом.
< em >   выделение важных фрагментов текста. Обычно отображается курсивом.
< strong >   выделение важных фрагментов текста. Обычно отображается полужирным шрифтом.
< b >   отображает текст полужирным шрифтом
< i >   отображает текст курсивом
< tt >   отображает текст моноширинным шрифтом
< u >   отображает текст подчеркнутым
< s >   отображает текст, перечеркнутый горизонтальной линией
< strike >   отображает текст, перечеркнутый горизонтальной линией
< big >   выводит текст шрифтом большего размера
< small >   выводит текст шрифтом меньшего размера
< sub >   верхний индекс
< sup >   нижний индекс
< font > указывает параметры шрифта
Тэги структурирования текста
< br > разрыв строки (перевод каретки)
< h2 (h3,…,h6) > заголовок первого (второго,…,шестого) уровня
< hr >
align color noshade
size   width
горизонтальная линия
< nobr >   запрет перевода строки
< p > разбиение на абзацы

jwy.narod.ru

Текст | htmlbook.ru



Текст | htmlbook.ru

Тег <abbr> указывает, что последовательность символов является аббревиатурой.

Сообщает, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово.

Тег <address> предназначен для хранения информации об авторе

Устанавливает жирное начертание шрифта.

Предназначен для задания шрифта, размера и цвета текста по умолчанию.

Устанавливает направление вывода текста: слева направо или справа налево.

Увеличивает размер шрифта на единицу по сравнению с обычным текстом.

Устанавливает мигание текста.

Предназначен для выделения длинных цитат внутри документа.

Помечает текст как цитату или сноску на другой материал.

Предназначен для отображения текста программного код.

Используется для выделения текста, который был удален в новой версии документа.

Выделяет термин в документе.

Предназначен для акцентирования текста.

Предназначен для изменения характеристик шрифта, таких как размер, цвет и гарнитура.

Заголовок первого уровня.

Заголовок второго уровня.

Задает заголовок третьего уровня.

Задает заголовок четвертого уровня.

Задает заголовок пятого уровня.

Задает заголовок шестого уровня.

Устанавливает курсивное начертание шрифта.

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

Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш.

Помечает текст как выделенный.

Уведомляет браузер отображать текст без переносов.

Определяет текстовый абзац.

Отображает содержимое контейнера «как есть».

Используется для выделения в тексте цитат.

Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>.

Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>.

Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.

Отображает текст как перечеркнутый.

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

Уменьшает размер шрифта на единицу по сравнению с обычным текстом.

Отображает текст как перечеркнутый.

Акцентирует текст, обычно жирным начертанием.

Отображает шрифт в виде нижнего индекса.

Отображает шрифт в виде верхнего индекса.

Отображает текст моноширинным текстом.

Добавляет подчеркивание к тексту.

Используется для выделения переменных компьютерных программ.

Указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.

Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины.

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2019 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

htmlbook.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *