Очень важным моментом в создании сайта, является работа с текстом, и как вы понимаете, с текстом в html так же необходимо уметь работать, и знать какие теги бывают и как их можно использовать.
Работаем с текстом в html
В этом уроке мы с вами подробно разберем html работу с текстом, расширим базу знаний в области тегов, а именно тегов работы с текстом.
Один из самых главных и основных тегов формирования текста мы уже рассматривали, а именно <p> тег абзаца, он используется повсеместно и о нем нет смысла больше рассказывать. Теперь давайте перейдем еще к некоторым очень интересным тегам, а именно заголовки. Вот пример как это выглядит:
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
… и т.д. до <h6>
Как правило, на практике применяют заголовки не ниже <h3>, но все зависит от ситуации. Хотелось бы немного отметить особенность этих тегов, они очень важны при поисковой оптимизации, тег <h1> на странице рекомендуют использовать не чаще одного раза, так как это главный заголовок, и он должен быть один. Тег <h2> так же немаловажен, им рекомендуется обозначать заголовки разделов или в тексте ключевые моменты, использовать его желательно не больше 10 раз на странице. Оставшиеся заголовки можете использовать, как хотите, они уже менее важные.
Идем дальше теперь давайте поговорим о тегах акцентирования, а именно выделение текста, это осуществляется с помощью двух тегов, <strong> и <b> Пример:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
</head>
<body>
<p>Это пробный абзац, на котором мы можем <b>наглядно увидеть</b>, как работают различные виды <strong>тегов акцентирования</strong> на практике.</p>
</body>
</html>
Вот что мы видим в браузере:
Эти теги могут использоваться внутри тега <p>, то есть они могут быть вложенными, и не только в этот тег, так же и в другие. Как вы могли заметить эффект от этих двух тегов абсолютно одинаковый, но это лишь для человека. Разница между тегами <b> и <strong> в том, что тег <b> это тег физического формирования текста, а <strong> логического, в результате первый тег просто выделяет текст, а второй делает на нем определенный акцент, хотя в браузере разницы вы ни какой не увидите.
Продолжаем изучать теги акцентирования и тут же есть еще два похожих тега, это теги курсивного текста. Пример:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
</head>
<body>
<p>Это пробный абзац, на котором мы можем <i>наглядно увидеть</i>, как работают различные виды <em>тегов акцентирования</em> на практике.</p>
</body>
</html>
Тут ситуация примерна та же самая, что и в предыдущем случае, тег <i> это у нас физическое формирование, <em> логическое, соответственно обладают всеми теми же свойствам, такими как вложенность и значимость.
С тегами акцентирования мы закончили, давайте дальше разбираться, какие ещё html теги бывают для работы с текстом. Есть такие интересные теги как <sub> и <sup> давайте на примере посмотрим, что они могут:
<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
</head>
<body>
<p>Это пробный абзац, на котором мы посмотрим как работают теги sub и sup например М<sup>2</sup> и на примере химической формулы H<sub>2</sub>О.</p>
</body>
</html>
А вот что в браузере видим:
Достаточно специфические теги, но они очень часто пригождаются.
И последний тег по теме html работа с текстом, это тег <pre>, синтаксис следующий:
<pre> Текст пишется как есть, включая все пробелы</pre>
Смысл этого тега в следующем, все что вы в него скопируете, будет отображаться так как есть, со всеми пробелами и прочим, это пожалуй удобно при переносе больших объемов текста, но лично я этим тегом вообще не пользуюсь.
На этом все, я думаю, данный урок должен значительно расширить ваши функциональные возможности в плане создания сайта и вы уже сами можете производить html работу с текстом.
HTML5 и CSS3
Научись создавать профессиональные современные сайты на HTML5 и CSS3
Разрешается републикация материалов сайта с обязательным указанием ссылки на автора
материала (указание автора, его сайта), ссылки следующего содержания:
https://for-net.ru - Как сделать сайт самому
