Основные HTML-коды, которые должен знать каждый пользователь WordPress

Опубликовано: 2019-04-24

HTML - это основа практически всего в Интернете. Это краеугольный камень, на котором строится интернет-контент, и так было на протяжении десятилетий. Без твердого понимания HTML все, что вы делаете с WordPress или любым другим веб-дизайном и разработкой, будет задерживаться. К счастью для вас, существует множество базовых HTML-кодов, которые каждый пользователь WordPress, от новичка до ветеранов, использует почти ежедневно. Давайте разберемся с ними и познакомим вас с ними.

Подпишитесь на наш канал Youtube

Что такое HTML?

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

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

<html>
  <head>
    <title>The title of the webpage would go here.</title>
  </head>
  <body>
    <h1>This is the page's title that shows up to people</h1>
      <p>Content</p>
      <p>More content</p>
      <p>Even more content</p>
    <h2>Section break</h2>
      <p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
      <p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
  </body>
</html>

При отображении в браузере это будет выглядеть так:

Основные коды HTML

Как видите, HTML не так уж запутан. На самом деле, даже если вы никогда раньше не видели HTML-код, держу пари, вы можете понять, что означает каждый из этих тегов, просто по контексту. Разобравшись с этим, давайте рассмотрим наиболее распространенные базовые коды HTML, которые вы будете использовать на протяжении всей своей карьеры в Интернете.

Жирный

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

You can make <strong>text bold</strong> by using this tag.

Курсив

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

You can put <em>text in italics<em> by using this tag.

Подчеркивание

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

You can <u>underline</u> by using this tag.

Заголовки

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

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

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

<h2>H2 is the most commonly used header tag.</h2>

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

Изображение

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

<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">

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

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

Ссылки

Хорошо. Ссылки. Со ссылками много чего происходит. Или, скорее, вы можете многое сделать со ссылками. По сути , вы объедините его с тегом <a href> . <a> указывает, что это ссылка, а <href> буквально является гипертекстовой ссылкой (URL-адресом), на которую вы ссылаетесь.

<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>

Вы закроете код ссылки просто </a> , и вы можете использовать любой текст, который хотите между ними. Это будет сама ссылка, которую можно щелкнуть, и она называется якорный текст .

Он отображается на странице следующим образом: Ссылка на нашу страницу Divi, и это текст привязки.

Кроме того, вы также можете вкладывать HTML-код. Вы можете сделать изображение интерактивным, вставив тег <img src> между флажками ссылки.

<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>

Вы можете увидеть, как отображается интерактивная ссылка на изображение здесь:

Основные HTML-коды для горячих ссылок на изображения

Дополнительные атрибуты ссылок

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

  • rel указывает на какую-то связь между ссылкой и ее целью. Например, noreferrer, чтобы предотвратить обратное отслеживание реферального трафика.
  • target сообщает браузеру, где открыть ссылку: например, _blank откроет ее в пустой вкладке.
  • nofollow идет вместе с rel и сообщает поисковым системам, что вы не хотите передавать какие-либо ссылки на целевой сайт. Это хорошо при ссылках на спорный контент и так далее. Он также удерживает людей от рассылки спама по ссылкам в ваших комментариях и делает так, что ваш контент может рассматриваться как непредвзятый, поскольку вы не даете никакого бонуса к тому, чтобы быть представленным, кроме показа и переходов по ссылкам.

Их гораздо больше, но вы, вероятно, увидите их чаще всего.

<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>

Зачеркнутый текст

Если ты похож на меня, иногда ты необходимость хочу пошутить вычеркнутыми словами. Или, может быть, вам нужно пометить что-то из списка (или удалить, как говорит сам код). Или что-нибудь еще, для чего вам понадобится строка, проходящая через текст.

Это когда вы используете <del> вокруг текста, который хотите зачеркнуть. Для некоторых людей это невероятно распространенный код, в то время как другие могут никогда его не использовать. Тем не менее, его легко запомнить.

You can use <del>this code</del> for strikethrough text in HTML.

Списки

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

Есть два типа списков, которые вы можете составить с помощью базовых HTML-кодов. Упорядоченные списки с номерами 1, 2, 3 и т. Д. В неупорядоченных списках вместо чисел используются маркеры или символы (в зависимости от дизайна вашего сайта).

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

<ul>
  <li>This is part of an unordered list.</li>
  <li>So is this.</li>
</ul>

<ol>
  <li>And this is how you set up an ordered list.</li>
  <li><a href="https://elegantthemes.com">This is a link in a list.</a></li>
  <li><strong>And this link text is bold</strong>, but this part isn't.</li>
</ol>

И эти коды отображаются так, чтобы показать разницу:

  • Это часть неупорядоченного списка.
  • Так это.
  1. И вот как вы составляете упорядоченный список.
  2. Это ссылка в списке.
  3. Текст этой ссылки выделен жирным шрифтом , а эта часть - нет.

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

Цитаты из блоков

В какой-то момент вашей карьеры в WordPress вам понадобится процитировать чужой веб-сайт. Вот где появляется <blockquote> . Просто окружите любой текст, который вы копируете / вставляете (и атрибут), открывающими и закрывающими тегами <blockquote> , и все готово.

<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>

Вот как это будет выглядеть на странице:

Этот текст будет иметь особый стиль, чтобы указать, что это цитата.

Абзацы

Абзац HTML выглядит как-то странно. В зависимости от CMS и компоновщика, который вы используете, он может автоматически отображать каждый разрыв строки как отдельный абзац. WordPress делает это, когда вы вводите HTML. Однако не все так. Поэтому, если вам нужно разделить абзацы и не иметь стены текста, оберните каждый из них в <p> . Тогда браузер будет знать, что нужно отображать каждый блок текста как отдельный абзац, а не как один непрерывный блок. По умолчанию браузеры игнорируют разрывы строк, если не указано иное.

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Линии и разрывы строк

Возможно, вам понадобится другое разделение между абзацами и разделами. Вот тогда вы можете использовать теги <hr> и <br/> .

<hr> вставляет разделительную линию везде, где она есть. Многие люди используют это для разделения виджетов на боковой панели или основных разделах веб-страницы.

Тег <br/> - это разрыв строки. Вы можете использовать <br/> в середине <p>, чтобы разбить строку, не переходя в новый абзац (для стилизации блока и организации). <br/> - это самозакрывающийся тег, что означает, что в нем не может быть никакого содержимого. На это указывает косая черта в конце кода.

Хотя вы можете использовать его для разделения текста и абзацев, вставляя их там, где вы хотите разрывы, это не очень хорошая практика, и по мере того, как вы будете более продвинуты в HTML, CSS и JavaScript, вам нужно будет настроить таргетинг на абзац. элемент, чтобы делать определенные вещи. Вы можете узнать больше о различиях здесь.

Заключение

HTML абсолютно необходим для взаимодействия с Интернетом. Все используют их одинаково, независимо от того, начинаете ли вы заниматься веб-разработкой и дизайном или являетесь ветераном времен до того, как JavaScript стал популярным. Мы по-прежнему используем базовые коды HTML для работы с основами всех наших сайтов. Независимо от того, насколько красивым является сайт или насколько продвинуты его функции, когда ссылка обрывается или что-то выделяется жирным шрифтом, чего не должно быть, вы все равно будете копаться, чтобы увидеть, являются ли теги <a href> или <strong> все в порядке.

Какие основные HTML-коды вы сейчас используете наиболее часто?

Статья в избранном изображении от enterlinedesign / shutterstock.com