Без понимания 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, которые вы будете использовать при работе в Интернете.
Абзац
Когда вы заключаете текст в теги <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>
Если разместите между тегами изображение — оно будет тоже станет кликабельном.
Вы можете включить в ссылки ряд атрибутов, например 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>
- Это часть ненумерованного списка.
- Это еще одна часть.
- Это часть нумерованного списка
- Это ссылка в списке
- Это полужирный текст, а это нормальный текст в списке.
Цитаты
Если вам понадобится процитировать текст — на помощь приходит <blockquote> . Просто окружите любой текст тегом и все готово:
<blockquote>Этот текст окружен тегами Цитата<blockquote>
Этот текст окружен тегами Цитата
Куда в Divi вставлять HTML коды
При вводе или редактировании контента при использовании конструктора Divi Builder HTML теги можно добавлять в редактор на вкладку «Текст» (см. скрин):
Заключение
Знание HTML в какой то мере необходимо для работы с WordPress. Я всегда использую базовые теги HTML для оформления введенных данных. Независимо от того, насколько красив сайт или насколько продвинуты его функции, но когда ссылка не работает или что-то выделено жирным шрифтом, чего не должно быть, — все равно надо копаться, чтобы увидеть, правильно ли заданы теги.
Задавайте вопросы, пишите в комментариях какие HTML коды вы с используете наиболее часто.
Удачи.
Александр Коваль
