Основы HTML (часть 4)

Последнее обновление 06.06.2014 от SEOJedi

Форматирование текста и шрифты в HTML

Всем привет! Продолжаю выкладывать свои познания в HTML. Мы уже вкратце рассмотрели форматирование в посте Основы HTML для начинающих, однако я хотел вернуться к этой теме более подробно и охватить тему форматирование текста с помощью HTML. Мы можем добавлять теги к нашему текстовому содержанию, чтобы придать ему более «дружественную» структуру и стиль. Помогая читателям воспринимать написанное, а поисковым ботам показывать, что наш текст не является «простыней», что важно для повышения SEO блога или сайта .

Заголовки текста HTML

Есть 6 уровней заголовков в HTML, они определяют уровень важности. Например на блоге, ваше название блога может быть h1 тегом, в то время, как название вашего поста может быть h2 или h3 тегом.

<h1> Заголовок 1 уровня </h1>
<h2> Заголовок 2 уровня </h2>
<h3> Заголовок 3 уровня </h3>
<h4> Заголовок 4 уровня </h4>
<h5> Заголовок 5 уровня </h5>
<h6> Заголовок 6 уровня </h6>

Параграфы текста HTML

Для разделения текста на параграфы используется тег <p>

<p> Это первый параграф </p>
<p> А это второй параграф </p>

Разрыв строк

Чтобы добавить один разрыв строки мы используем <br> это пустой тег, то есть он не должен быть закрыт. Применение этого тега создает пустую строку и отправляет остальной код на следующую строку. Пример:

При использовании этого кода < br >
нас переносит на новую строку, а при использовании двух раз < br >< br >

через строку и т.д.

Горизонтальная линия

Чтобы создать горизонтальную линию поперек вашей страницы мы используем тег <hr>

Жирный текст

Жирный текст используется для выделения чего-то особо важного, чтобы этого добиться, надо обернуть слова тегом <b>

<b> Это жирный текст </b>

Однако в наши дни принято использовать тег <strong>

<strong> Это жирный текст </strong>

Причина этого в том, что <strong> говорит браузеру, что этот шрифт имеет важное значение и по умолчанию делает его жирным, но он можно просто использовать тег <b>, как дополнительный стиль. Если вы хотите просто сделать текст более заметным можно использовать жирный шрифт обернутый тегом <b>. Если текст имеет такое, например, значение, как ключевое слово, и вы хотите указать на него поисковым ботам, чтобы рассматривать его как важный фрагмент текста, то используйте <strong>.

Текст курсив

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

<i> Это наклонный шрифт </i>

Так же можно использовать тег <em>

<em> Это наклонный шрифт </em>

Особой разницы мной не замечено.

Текст зачеркнутый

<strike> Это зачеркнутый текст </strike>

есть еще тег зачеркнутого текста <s>, но в HTML5 он больше не используется.

<del> Это перечеркивание текста, который удален или заменен </del>

Мелкий текст

Для обозначения мелкого текста используем следующее обозначение

<small> Мелкий текст </small>

Свойства шрифта

Ранее, для определения шрифта мы использовали теги, такие как:

<font face="verdana" size="3" color="red">Это обычный текст!</font>

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