Основные html-теги, которые должен знать каждый маркетолог и предприниматель

Наверняка вы спросите, зачем в наши дни знать основы html-верстки, если для выкладки материалов на сайты практически повсеместно используются визуальные редакторы, где теги расставляются автоматически по одному клику мышкой. Конечно, можно было бы ответить что-то банально-лирическое из разряда «для большей уверенности в роли интернет-пользователя» или «для саморазвития», но есть и куда более приземленный житейский вариант. Увы, но даже современные редакторы сайтов частенько ошибаются, и чтобы хотя бы примерно представлять, почему в верстке возникла та или иная ошибка, и исправить ее без привлечения службы поддержки, нужно знать базовые принципы html и хотя бы несколько основных тегов.

И да, это действительно прибавляет уверенности в себе. 🙂

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

1. Ссылки

Старайтесь не размещать ссылки на сайты и страницы в виде простого url, который для перехода по нужному адресу нужно предварительно скопировать, а затем вставить в строку браузера, — лучше используйте специальный тег:

<a title="Нажми меня" href="supersite.com">Нажми меня</a>

Этот код выведет на экран надпись «Нажми меня», при клике на которую откроется страница, указанная в атрибуте href.

Вы также можете управлять тем, где откроется эта страница. Если добавить к тегу атребут target со значением _blank, то ссылка откроется в новой вкладке:

<a title="Нажми меня" href="supersite.com" target="_blank">Нажми меня, и я откроюсь в новой вкладке</a>

2. Заголовки

В html имеется шесть типов заголовков. Самый большой из них — h1, самый маленький — h6.

Заголовки очень важны для правильного понимания поисковыми роботами смысла страницы. Поэтому использовать их нужно обязательно, но осторожно.

<h1>Очень большой заголовок</h1>
<h2>Заголовок поменьше</h2>
<h6>Самый маленький заголовок</h6>

3. Параграфы

Параграфы разбивают текст как визуально, так и логически, тем самым значительно упрощая его восприятие и делая страницу гораздо более привлекательной для посетителя сайта.

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

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

Чтобы перенести текст на новую строку, используйте тег br:

<p>Я первый параграф<br />По прежнему первый параграф, но уже на новой строке</p>
<p>А я второй</p>

4. Картинки

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

Во-первых, используйте адекватный размер: 150-600 пикселей ширины достаточно для большинства иллюстраций. Лучше, если перед размещением вы оптимизируете размер и качество изображения в графическом редакторе.

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

<img src="кот.jpg" alt="Кот смешно смотрит, как хозяин режет колбасу" />

5. Списки

Существуют два типа списков: нумерованные и маркированные.

Нумерованные списки задаются тегом ol, а элементы списка — тегом li:

<ol>
<li>Купить хлеб</li>
<li>Купить молоко</li>
<li>Оплатить свет</li>
</ol>

Этот код выведет нумерованный список такого вида:

1. Купить хлеб
2. Купить молоко
3. Оплатить свет

Маркированные списки задаются тегом ul. Их элементы также задаются тегом li:

<ul>
<li>Apple</li>
<li>Google</li>
<li>Microsoft</li>
</ul>

Такой код даст нам примерно следующее:

• Apple
• Google
• Microsoft

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