Форматирование текста и шрифты в HTML
Всем привет! Продолжаю выкладывать свои познания в HTML. Мы уже вкратце рассмотрели форматирование в посте Основы HTML для начинающих, однако я хотел вернуться к этой теме более подробно и охватить тему форматирование текста с помощью HTML. Мы можем добавлять теги к нашему текстовому содержанию, чтобы придать ему более «дружественную» структуру и стиль. Помогая читателям воспринимать написанное, а поисковым ботам показывать, что наш текст не является «простыней», что важно для повышения SEO блога или сайта .
Заголовки текста HTML
Есть 6 уровней заголовков в HTML, они определяют уровень важности. Например на блоге, ваше название блога может быть h1 тегом, в то время, как название вашего поста может быть h2 или h3 тегом.
|
1 2 3 4 5 6 |
<h1> Заголовок 1 уровня </h1> <h2> Заголовок 2 уровня </h2> <h3> Заголовок 3 уровня </h3> <h4> Заголовок 4 уровня </h4> <h5> Заголовок 5 уровня </h5> <h6> Заголовок 6 уровня </h6> |
Параграфы текста HTML
Для разделения текста на параграфы используется тег <p>
|
1 2 |
<p> Это первый параграф </p> <p> А это второй параграф </p> |
Разрыв строк
Чтобы добавить один разрыв строки мы используем <br> это пустой тег, то есть он не должен быть закрыт. Применение этого тега создает пустую строку и отправляет остальной код на следующую строку. Пример:
При использовании этого кода < br >
нас переносит на новую строку, а при использовании двух раз < br >< br >
через строку и т.д.
Горизонтальная линия
Чтобы создать горизонтальную линию поперек вашей страницы мы используем тег <hr>
Жирный текст
Жирный текст используется для выделения чего-то особо важного, чтобы этого добиться, надо обернуть слова тегом <b>
|
1 |
<b> Это жирный текст </b> |
Однако в наши дни принято использовать тег <strong>
|
1 |
<strong> Это жирный текст </strong> |
Причина этого в том, что <strong> говорит браузеру, что этот шрифт имеет важное значение и по умолчанию делает его жирным, но он можно просто использовать тег <b>, как дополнительный стиль. Если вы хотите просто сделать текст более заметным можно использовать жирный шрифт обернутый тегом <b>. Если текст имеет такое, например, значение, как ключевое слово, и вы хотите указать на него поисковым ботам, чтобы рассматривать его как важный фрагмент текста, то используйте <strong>.
Текст курсив
Подобно жирному шрифту, рассмотренному выше, мы используем тег <i>, чтобы обернуть текст, который мы хотим написать курсивом.
|
1 |
<i> Это наклонный шрифт </i> |
Так же можно использовать тег <em>
|
1 |
<em> Это наклонный шрифт </em> |
Особой разницы мной не замечено.
Текст зачеркнутый
|
1 |
<strike> Это зачеркнутый текст </strike> |
есть еще тег зачеркнутого текста <s>, но в HTML5 он больше не используется.
|
1 |
<del> Это перечеркивание текста, который удален или заменен </del> |
Мелкий текст
Для обозначения мелкого текста используем следующее обозначение
|
1 |
<small> Мелкий текст </small> |
Свойства шрифта
Ранее, для определения шрифта мы использовали теги, такие как:
|
1 |
<font face="verdana" size="3" color="red">Это обычный текст!</font> |
но это больше не актуально. Я хотел показать это потому, что много где и кто использует это в блогах и сайтах! Вы должны определять шрифты, используя только CSS! Вот про него я и расскажу в следующем посте.
Самый лучший источник html-разметки — htmlbook, всегда там подсматриваю, если что-то забываю.
С недавних пор эта тема заинтересовала меня, хотя свой сайт я делала и без знаний кодов, но теперь уделяю этой теме большое внимание
Полезная инфа. А я то думал что заголовки H сползают до бесконечности.
Очень хорошая статья. Полезно и практично. Проверено
С нетерпением ждем рассказа про CSS