Как оформить красиво текст в html – Оформление текста, часть 1 — Курс «Оформление текста» — HTML Academy

Содержание

Оформление текста в html. Элементы

Чтобы визуально оформить и выделить текст в html применяют такие элементы:


STRONG

Выделяет текст жирным шрифтом:

<strong>Между этими тегами текст будет выделен жирным шрифтом</strong>

EM (Emphasis)

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

<em> Этот текст будет выделен курсивом </em>

U (Underline)

Отображает помещенный между открывающим и закрывающим тегами текст как подчеркнутый:

<u> Данный текст подчеркнутый </u>

SUB

Отображает текст, заключенный между открывающим <SUB> и закрывающим </SUB> тегами, как нижний индекс от основного текста.

Формула пропана С <sub> 3 </sub> Н <sub> 8 </sub>

Результат: С 3 Н 8


SUP 

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

2 <sup> 5 </sup> = 32

Будет выглядеть  2 = 32.


FONT

Используется для изменения цвета, шрифта и размеров и  текста.
Атрибуты:
SIZE - с помощью него можно менять размер шрифта. Возможные значение - 1 , 2 , 3 , 4 , 5 , 6 , 7.
COLOR - задает цвет текста.
FACE - для определения шрифта (Times New Roman, Arial, Tahoma)

Например:

Этот текст без оформления <br>
<FONT SIZE="+2" COLOR="yellow"> Увеличенный желтый шрифт</FONT>
<br>
<FONT SIZE="3" FACE="Tahoma" COLOR="red"> Красный текст 3 размера</FONT>

При просмотре в браузере увидим:

 

 SIZE="+2" это значит увеличенный шрифт на 2 единицы по сравнению со стандартным. Стандартный размер шрифта равен 3 .


HR

Применятся для вставки в текст горизонтальной линии. Отличительная особенность – нет закрывающего тега.
Атрибуты:
ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: 
left – выравнивает по левому краю документа.

right – выравнивает по правому краю.
center – выравнивание по центру документа (используется по умолчанию).
WIDTH – применяется для определения длины линии в пикселах или процентах от ширины страницы.
SIZE – толщина линии в пикселах.
NOSHADE – с помощью этого атрибута линия закрашивается как сплошная. Без него – линия выглядит объемной.
COLOR – задаем цвет линии.

Например:

Текст до линии <hr noshade align="left"> Текста после линии <br>
А это линия толщиной 3px без noshade  
<hr align="left" size ="3"> А здесь линия c noshade закрашенная в красный цвет <hr align="left" color="red" size ="3" noshade>

Результат:

Следующая страница - Списки в html

Предыдущая - Форматирование текста в html

Оформление текста css – как оформить его красиво

Оформление текста css

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

Цвет

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

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

Цвет в css задается с помощью свойства color. Значения можно записывать в виде ключевых слов (white, brown, orange), шестнадцатеричных hex-кодов (#000, #fff, #ccc) и в режиме rgb (red, green, blue) где определяется насыщенность каждого из этих цветов в числовом значении от 0 до 255.

Сам шрифт

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

Оформление текста css

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Задать шрифт можно с помощью свойства font-family, а значением выступает имя или семейство. Для надежности можно записать пару вариантов через запятую. Например, так: Font-family: «Lato», Georgia, Arial, sans-serif;

Тут мы записали аж четыре варианта. Если браузер найдет шрифт Lato, то будет использовать именно его. Если же он не будет обнаружен, то следующим веб-обозреватель попытается использовать Georgia, а если и его не будет, то Arial. Этот шрифт есть на любых компьютерах с операционной системой Windows.

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

Оформление текста css

Размер шрифта

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

У некоторых html элементов размер текста определен изначально. Например, если вы заключите текст в теги h2, то он автоматически выведется большими жирными буквами. На самом деле вы легко можете изменить эту установку по умолчанию:

h2{ font-weight: normal; font-size: 50px; }

h2{

font-weight: normal;

font-size: 50px;

}

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

Тень текста

Любому текстовому фрагменту можно задать тень с помощью правила text-shadow. Давайте разберем его синтаксис на примере:

span{ text-shadow: 2px 2px 5px red; }

span{

text-shadow: 2px 2px 5px red;

}

Оформление текста css

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Все текстовые фрагменты, заключенные в теги span, получат такую тень. Выглядит она так:

Оформление текста css

Первое числовое значение задает смещение по горизонтали, второе – смещение по вертикали, третье – размытие тени, это позволяет снизить ее резкость и насыщенность. Последний параметр – цвет.

Если какое-то из значений вам не нужно, просто поставьте 0. Цвет записывать обязательно. Параметры тени зависят в первую очередь от размера шрифта – чем он больше, тем больше можно делать смещение.

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

Множественная тень

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

span{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua; } div{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua, 0 0 30px blue, 0 0 35px purple; } p{ font-size: 40px; text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green; }

span{

font-size: 40px;

text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua;

}

div{

font-size: 40px;

text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua,

0 0 30px blue, 0 0 35px purple;

}

p{

font-size: 40px;

text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green;

}

Оформление текста css

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

Оформление текста css

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

Другие свойства

На этом, конечно, арсенал css приемов для стилизации текста не заканчивается. В этой статье вы можете прочитать еще о некоторых параметрах, таких, как жирность, начертание, варианты написания букв и их трансформация (ссылка на статью “Как задать шрифт”). Там же описывается и letter-spacing – межбуквенный интервал, который можно добавлять к нужным текстовым фрагментам, если это будет необходимо.

Оформление при наведении

Также можно и подчас нужно оформить текст красиво в css при наведении на него курсора мышки. В чем может заключаться такая стилизация? Например, в появлении подчеркивания, изменения цвета текста, или фонового цвета, изменения размера шрифта и т.д.

Интересно, что в последнее время в сайтостроении популярно делать все изменения плавно. Для этого просто пропишите нужному элементу на странице:

#header{ transition: (задержка в секундах или миллисекундах) например 1s; }

#header{

transition: (задержка в секундах или миллисекундах) например 1s;

}

Теперь если к шапке добавить стили с псевдоклассом hover (то есть добавить изменение внешнего вида при наведении), то изменение некоторых значений будет происходить плавно, что само по себе немного красивее, по сравнению с резким переходом.

Итог

В css огромный арсенал средств для изменения внешнего вида текста. Самый мощный из них – это возможность использовать любые шрифты, задавая их через font-family, а также добавившаяся в css3 возможность добавлять тень. На этом я заканчиваю эту статью, посвященную приемам изменения текста, а вам желаю успешно использовать эти знания при разработке веб-сайтов. Дополнительную информацию по теме вы можете найти в премиум курсе по css3

Оформление текста css

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Оформление текста css

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Красивое оформление HTML/CSS кода

Красивое оформление HTML/CSS кода

Зачем красиво оформлять HTML/CSS код в процессе верстки сайта и так ли это важно? Ведь заказчик не видит изнаночную сторону сайта?

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

Давайте перечислим основные правила, которые следует соблюдать при написании HTML разметки.

Правила оформления HTML кода

1) Соблюдение отступов для вложенных элементов.

Каждый вложенный элемент, отделяем четырьмя (или двумя) пробелами от его родителя, относительно левого края редактора кода. Тег div является вложенным элементом относительно тега section.

<section>
    <div>
    </div>
</section>

В свою очередь теги h2 и p, являются вложенными элементами в тег div и выравниваются относительно этого тега div, не создавая лесенки.

<section>
    <div>
        <h2>Заголовок</h2>
        <p>Красиво оформленный код понравиться как заказчику, так и работодателю.</p>
    </div>
</section>

Это правило не распространяется на строчные теги (i, u, a, b, span) внутри абзаца. Например, тег span не нужно начинать с новой строки и ставить перед ним пробелы.

<p>Соблюдайте вами же установленные <span>правила написания кода</span>.</p>

2) Выравнивание тегов по одной линии.

Теги не должны хаотично плясать туда-сюда на странице редактора. Так писать не нужно.

<ul>
  <li>..</li>
    <li>..</li>
  <li>..</li>
</ul>
<h3>..</h3>
    <p>..</p>

3) Написание комментариев

Когда в разметке, идет подряд много закрывающих тегов div, то ставьте комментарий (название класса) рядом с закрывающим тегом div. Тогда вам не придется гадать, какой именно класс закрывает div.

<div>
    <div>
        <div>
          .....
        </div><!-- .title -->
    </div><!-- .head -->
</div><!-- .wrap -->

Начало каждой секции/блока начинаем с короткого комментария с названием данной секции. При скролле сайта, мы сразу видим, какие блоки есть на сайте.

<!-- Footer -->
<footer>
    <div></div>
</footer>

Где ставить пробелы?

Между названием селектора и открывающей фигурной скобкой.

.wrapper {

Между свойством и значением после двоеточия внутри селектора.

width: 400px;

После запятой ставить пробел.

font-family: 'PT Sans Narrow', sans-serif;

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

.header {
    padding-top: 20px;
    font-size: 15px;
    background-color: #333333;
}

Каждый новый селектор отделять одной строкой.

.nav {
    min-width: 200px;
}

.nav_link {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

/* Section */
.section {
    padding: 30px 0;
}

.section_title {
    margin-bottom: 20px;
    padding-bottom: 0;
}

.section_img {
    background-color: #f8f8f8;
}

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

/*
1. Header
2. Slider
3. Gallery
4. Footer
*/

Как не нужно писать стили

Не пишите свойства в одну строку. В таком стиле оформления кода очень тяжело ориентироваться.

.page {height: 500px; background-color: #444;}

Следует придерживаться определенного стиля написания кода, писать везде одинаково. Чистый и красивый код говорит об уровне профессионализма верстальщика и отношения его к работе.

  • Красивое оформление HTML/CSS кода Создано 10.05.2019 10:51:27
  • Красивое оформление HTML/CSS кода Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Как с помощью CSS красиво оформить текст в блоке

Давно хотел написать статью, как можно красиво оформить текст с помощью CSS. Сделать это достаточно просто и быстро. Для этой цели можно воспользоваться плагином, например, Special Text Box, а можно сделать самому, с помощью CSS стилей.

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

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

Чтобы сделать красивое оформление текста, придется добавить CSS код в файл стилей style.css, а потом при написании статей добавлять HTML код в нужном месте текста. На скриншоте ниже, Вы можете посмотреть, как выглядит фрагмент текста в красивом блоке

Как красиво оформить текст с помощью CSS

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

Заголовок блока

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

Следующий CSS код нужно скопировать, и вставить в самом конце файла style.css, который находится в шаблоне.

/* оформление рамки блока */ .bloginfo { background: #FFD963; border: 1px solid #000000; padding: 3px 5px 3px 30px; margin: 11px; text-align: justify; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";/*Internet Explorer */ box-shadow: 5px 5px 5px #847B6C;/*Opera и Firefox*/ } /* оформление заголовка блока */ .bloginfo-head { font-size:1.4em; font-weight: bold; color:#783E2B; margin: 0 0 5px 0; } /* оформление текста блока */ .bloginfo-txt { line-height: 1.3em; color:#4A00F; font-size:14px; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

/* оформление рамки блока */

.bloginfo {

    background: #FFD963;

    border: 1px solid #000000;

    padding: 3px 5px 3px 30px;

    margin: 11px;

    text-align: justify;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-o-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

-webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";/*Internet   Explorer */

  box-shadow: 5px 5px 5px #847B6C;/*Opera и Firefox*/

}

/* оформление заголовка блока */

.bloginfo-head {

    font-size:1.4em;

    font-weight: bold;

    color:#783E2B;

    margin: 0 0 5px 0;

}

/* оформление текста блока */

.bloginfo-txt {

    line-height: 1.3em;

    color:#4A00F;

    font-size:14px;

}

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

Посмотрите виде, как красиво оформить текст с помощью CSS

Как красиво оформить текст с помощью CSS ~ Страницы Интернета

Давно хотел написать статью, как можно красиво оформить текст с помощью CSS. Сделать это достаточно просто и быстро. Для этой цели можно воспользоваться плагином, например, Special Text Box, а можно сделать самому, с помощью CSS стилей.

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

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

Чтобы сделать красивое оформление текста, придется добавить CSS код в файл стилей style.css, а потом при написании статей добавлять HTML код в нужном месте текста. На скриншоте ниже, Вы можете посмотреть, как выглядит фрагмент текста в красивом блоке

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

Заголовок блока

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

Следующий CSS код нужно скопировать, и вставить в самом конце файла style.css, который находится в шаблоне.

  1. /* оформление рамки блока */

  2. .bloginfo {

  3.     background: #FFD963;

  4.    border: 1px solid #000000;

  5.    padding: 3px 5px 3px 30px;

  6.     margin: 11px;

  7.     text-align: justify;

  8.  -webkit-border-radius: 5px;

  9.  -moz-border-radius: 5px;

  10.  -o-border-radius: 5px;

  11.  -khtml-border-radius: 5px;

  12.  border-radius: 5px;

  13. -webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */

  14. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";/*Internet   Explorer */

  15.   box-shadow: 5px 5px 5px #847B6C;/*Opera и Firefox*/

  16. }

  17. /* оформление заголовка блока */

  18. .bloginfo-head {

  19.     font-size:1.4em;

  20.     font-weight: bold;

  21.     color:#783E2B;

  22.    margin: 0 0 5px 0;

  23. }

  24. /* оформление текста блока */

  25. .bloginfo-txt {

  26.     line-height: 1.3em;

  27.     color:#4A00F;

  28.    font-size:14px;

  29.  }

Теперь при написании нового поста, надо в нужном месте вставить следующий HTML код:

<div>
<div>Заголовок блока</div>
<div>Содержимое блока</div>
</div>

Посмотрите виде, как красиво оформить текст с помощью CSS

15 потрясающих анимированных эффектов для текста на CSS

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

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

Спасибо большое http://www.hongkiat.com и обязательно посмотрите следующее:

Эластичная анимация

Этот эффект делается с помощью CSS и SVG, как видите, что результат получился потрясающим.

Перейти

Глюк с SVG

Хотите, чтобы Ваш текст на сайте имел популярный глюк аналогового телевидения? Это можно сделать с помощью CSS и SVG фильтров

Перейти

Ретро логотип

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

Перейти

Эффект сдвига для текста

Как будто текст разрезали острым ножом. Этот эффект сделан с помощью 70 линий на CSS.

Перейти

Длинная тень для текста

Этот элегантный эффект длинной тени для текста создан только с помощью CSS, и смотрится он удивительно.

Перейти

Туманный эффект для текста

Отличный туманный эффект в основном для сайтов с тёмным дизайном. Работает данный эффект только в Webkit браузерах

Перейти

Маска для текста на SVG

Перейти

Анимация для текста

Это на вид простая анимация, но она сделана только на CSS и стоит Вашего внимания.

Перейти

3d текст

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

Перейти

Текст с фоном

Вернее текст тут, как бы, получается прозрачным.

Перейти

Мигающий текст

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

Перейти

Анимированная подпись

Это необычный эффект для текста на CSS. Подойдёт для множества сайтов, и точно может привлечь посетителей.

Перейти

Глюк для страницы с 404 ошибкой

Совершенно необычный и красивый глюк, который можно установить на страницу с 404 ошибкой.

Перейти

Космос

Довольно интересный и хорошо продуманный логотип с анимацией, которая работает на CSS

Перейти

Загрузка

Это довольно интересный эффект, который можно поставить на предзагрузку Вашего сайта

Перейти

HTML теги оформления текста | Vaden Pro

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

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

<h4>Правильно написанный заголовок текста</h4>
<p>Абзац с переносом строки посреди абзаца.<br> Пример использования непарного тега внутри парного.</p>

Формирование структуры текста (блочные элементы). Теги заголовков и абзацев.

Теги h2-h6 отвечают за выделение текста в виде заголовков. Более подробно о их семантичеком влиянии и важности для построения логической структуры страницы для поисковиков написано тут.

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

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

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

HTML теги для разметки текста (строчные элементы)

  • span - схож по своему смыслу с тегом p, но является строчным элементом. Обычно используется для обозначения части текста внутри абзаца. Зачем это нужно? Все достаточно просто- обозначенному тексту в дальнейшем через CSS можно задать оформление отличающееся от оформления остального текста.
  • br -делает перенос строки. ТЕГ НЕ ПАРНЫЙ (тобишь закрывающего тега у него нет). Примерно то же самое, что если бы Вы нажали Enter в Верде. В отличие от переноса, создаваемого блочными элементами, не несет на себе никакой логической нагрузки. Используется исключительно для более красивого оформления текста. Рекомендуется избегать его использования без крайней необходимости, поскольку по-сути он просто засоряет код, а для переносов в тексте нужно его просто разбивать на абзацы.
  • strong - выделяет шрифт жирным. Служит для расстановки логических ударений в тексте для поисковых роботов. Широко используется для внутренней оптимизации текста. Ключевые фразы в тексте рекомендуется обрамлять в этот тег, чтобы робот лучше понимал о чем статья. ВНИМАНИЕ! Важно не переборщить – если схожие ключи в тексте попадаются больше 3-5 раз, то это может быть расценено как переоптимизация текста и страница с текстом будет занижена в поисковой выдаче.
  • b - визуально ничем не отличается от стронга, но не несет в себе никакой смысловой нагрузки для поисковика. Используется для выделения частей текста исключительно для тех, кто будет его читать. К примеру, если необходимо выделить фразу не содержащую ключевых слов, но способную облегчить понимание структуры текста пользователю.
  • em - делает текст внутри тега курсивом. Также как и стронг используется для внутренней оптимизации текста под поисковое продвижение, только обладает меньшим весом в сравнении с ним.
  • i - визуально ничем не отличается от <em>. Не несет смысловой нагрузки для роботов, используется для увеличения удобства прочтения текста пользователями. Аналог тега <b>, только для курсива.
  • ins- используется для подчеркивания текста. Выделяет текст как для пользователя, так и для поисковика.
  • u - визуально тождественен предыдущему тегу. Выделяет текст только для пользователя.
  • tt - выводит текст моноширинным шрифтом. Не несет в себе смысловой нагрузки. Моноширинный означает, что для всех символов шрифта ипользуется одинаковое пространство при написании.
  • pre - блочный элемент. Используется для того, чтобы сделать моноширинными  большие участки текста. Внутри него можно применять любые теги для форматирования текста, кроме sub и sup.
  • sub - выводит текст как нижний индекс ( уменьшает шрифт текста и выводит его немного ниже уровня строки).
  • sup - выводит текст как верхний индекс ( уменьшает шрифт текста и выводит его немного выше уровня строки).
  • strike (s) – делает текст перечеркнутым. Эти два тега абсолютно аналогичны по своему содержанию. Современная документация html вообще осуждает их использование, говоря о том, что для перечеркнутого текста можно использовать css, а эти теги больше просто засоряют код.

Использование нескольких тегов одновременно

Мы ознакомились с основными тегами для оформления текста. Их можно применять не только по-отдельности а и один внутри другого, главное при этом помнить основной принцип вложенности тегов – тег, который был открыт первым должен быть закрыт последним. Тобишь:

<p><b><i>Жирный текст написанный курсивом</i></b></p> <!--Верно-->
<p><b><i>Жирный текст написанный курсивом</b></i></p> <!--Не верно-->

Теги находящиеся внутри других тегов формируют порядок вложенности. Так, в рассмотренном примере тег i имеет второй уровень вложенности относительно тега p.

ОБРАТИТЕ ВНИМАНИЕ! Использовать строчные элементы внутри блочних разрешено, в то время как блочные внутри строчных- нет. Хоть браузер и отразит все корректно, если Вы, к примеру, используете тег p внутри тега b. Это будет не верно с точки зрения документации html. Тобишь такой код будет содержать ошибку и Вы это можете спокойно проверить воспользовавшись любым сервисом валидации html кода.

Вопросы для самоконтроля:

  • Какие теги форматирования текста являются блочными, а какие строчными? В чем между ними разница?
  • Какие существуют способы выделения текста жирным шрифтом? В чем между ними разница?
  • Какие существуют способы выделения текста курсивом? В чем между ними разница?
  • Как правильно переносить строки в html?
  • Как формируется порядок вложенности тегов?

Оценок: 1 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

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

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