HTML коды – это краеугольный камень, на котором строится интернет-контент, и так было на протяжении десятилетий.

Без понимания HTML все, что вы делаете с WordPress или любым другим веб-дизайном и разработкой, будет идти медленно.

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

Что такое HTML

HTML – язык разметки текста, что означает, что это не язык программирования.

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

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

HTML также дает вам возможность включать изображения и ссылки.

HTML код довольно легко читается. Простая HTML-страница может выглядеть примерно так:

<html>
<head>
<title>Здесь будет заголовок веб-страницы.</title>
</head>
<body>
<h1>Это заголовок страницы, который видят люди</h1>
<p>Контент</p>
<p>Больше контента</p>
<p>Еще больше контента</p>
<h2>Новая секция </h2>
<p><img src="https://divitheme.space/wp-content/uploads/2021/05/tagline-featured-image.jpg"></p>
<p><a href="https://divitheme.space/"> Ссылка на блог о Divi</a></p>
</body>
</html>
При отображении в браузере этот код будет выглядеть так:
Как видите, HTML не так и сложен. На самом деле, даже если вы никогда раньше не видели HTML код, вы можете понять, что означает каждый из этих тегов просто по контексту.

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

Абзац

Когда вы заключаете текст в теги <p> вы указываете браузеру выделить текст отдельным абзацем.

<p> Этот текст в отдельном абзаце </p>.
<p> И этот текст в отдельном абзаце </p>.

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

Когда вы заключаете текст в теги <strong> вы указываете браузеру выделить текст полужирным шрифтом.

Вы также можете использовать просто <b> , но поскольку Google и другие поисковые системы предпочитают семантическое кодирование, лучше использовать <strong>:

вы можете сделать <strong> текст полужирным </strong>.

Курсив (italic)

Когда вы заключаете текст в теги <em> вы указываете браузеру сделать текст курсивом. Вы также можете использовать тег <i> :

вы можете сделать <em> текст курсивом </em>.

Заголовки

Вероятно, это наиболее часто используемые теги из всего HTML. Использование <h1>, <h2>, <h3>, <h4>, <h5>, <h6> разделяет контент на разделы.

Обязательно используйте их в иерархическом порядке. Google хочет, чтобы заголовки были вложены. Поэтому используйте <h2> только под <h1>, а не под <h3>

На странице используйте только один <h1>, Имейте в виду, что использование <h1> сбрасывает вложенность страницы (или, по крайней мере, этого раздела страницы).

<h2> H2 - наиболее часто используемый тег заголовка. </h2>

Все заголовки для HTML-элементов на этой странице – <h2>.

Изображения

Вставка изображений – одна из самых полезных вещей, которые делает HTML. Все, что нужно сделать, это указать URL-адрес нужного изображения и поместить единственный <img src> (обозначающий тег источника изображения). Примерно так:

<img src="https://divitheme.space/wp-content/uploads/2021/05/tagline-featured-image.jpg"  alt="Это изображение" >
Обратите внимание, что вам не нужно закрывать тег изображения.

Атрибут <alt> – это текст, который отображается если изображение недоступно по каким то причинам. Также этот текст индексируется поисковыми системами. Всегда лучше добавлять альт-текст для изображений.

Ссылки

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

<a href="https://divitheme.space/"> Ссылка на блог о Divi</a>
Вы закроете ссылку тегом </a>, и любой текст, который есть между тегами <a> и </a>, будет текстом ссылки и будет кликабельным.

Если разместите между тегами изображение – оно будет тоже станет кликабельном.

Вы можете включить в ссылки ряд атрибутов, например target = “_blank” сообщает браузеру открывать ссылку в новой вкладке.

Списки

Есть два типа списков: нумерованные и ненумерованные. В нумерованном списки элементы маркируются числами 1, 2, 3 и так далее . В ненумерованных списках вместо чисел используются маркеры или символы (в зависимости от дизайна вашего сайта).

Вы оборачиваете каждый список с помощью тегов для ненумерованных: <ul> или для нумерованных списков <ol> соответственно. И каждый элемент списка должен быть заключен в тег <li>:
<ul>
<li>.</li>
</ul>

<ul>
<li>Это часть ненумерованного списка.</li>  
<li>Это еще одна часть.</li>
</ul>
<ol>  
<li>Это часть нумерованного списка</li>  
<li><a href="https://divitheme.space">Это ссылка в списке</a></li>
<li><strong>Это полужирный текст</strong>, а это нормальный текст в списке.</li>
</ol>
Результат:

      

  • Это часть ненумерованного списка.
  •   

  • Это еще одна часть.
      

  1. Это часть нумерованного списка
  2.   

  3. Это ссылка в списке
  4.  

  5. Это полужирный текст, а это нормальный текст в списке.

Цытаты

Если вам понадобится процитировать текст – на помощь приходит <blockquote> . Просто окружите любой текст тегом и все готово:

<blockquote>Этот текст окружен тегами Цытата<blockquote>
Результат:

Этот текст окружен тегами Цытата

Куда в Divi вставлять HTML коды

При вводе или редактировании контента при использовании конструктора Divi Builder   HTML теги можно добавлять в редактор на вкладку “Текст” (см. скрин):

Куда добавлять HTML коды в Divi

Заключение

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

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

Удачи.
Александр Коваль

Рубрики: Создание сайта на WordPress
Share via
Send this to a friend