Согласитесь, в наше время «стена» однородного текста на листе А4 не воспринимается всерьез. Даже если текст написан мастером слова, навряд такой рекламный материал вызовет у вас подлинный интерес или уважение.

Конечно, не всегда было так.

Вот как выглядела первая в мире реклама:


источник

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

Как видно, даже древние Египтяны понимали в ненавязчивой рекламе больше, чем современное телевидение=)
Тем не менее, наше время диктует свои условия: рекламный материал должен выглядеть превлекательно, легко сканироваться и быстро вызывать нужные асоциации. Именно для этого в сайтостроении применяются различные технологии, но основными являются HTML, CSS и JavaScript. В этом выпуске мы рассмотрим основы HTML, необходимые начинающему SEO специалисту.

Видеосюжет об основах HTML:


Что такое HTML

HTML — Hyper Markup Language — язык для разметки веб-страниц. Точное определение и пример — в нашем глоссарии об HTML.

Функции HTML

  1. Семантическая верстка — разделение документа на функциональные, логические элементы.
  2. Презентационная верстка — выделение элементов стилями
  3. Навигационная — возможность перехода от документа к документу. Реализована с помощью гиперссылок

Основные элементы HTML

1. Теги

Теги — специальные пометки, с помощью которых обозначаются элементы (определение и пример в нашем глоссарии). Теги бывают парными и непарными.

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

See the Pen примеры парных тегов by Alexander (@Alex_SEOHARD) on CodePen.

Все просто: для того, чтоб создать любой элемент, нужно найти тег, который ему соответствует! Самые популярные теги желательно помнить=)

  1. <p> — тег параграфа
  2. <i> — тег выделения текста курсивом
  3. <a href=… — ссылка
  4. <section> — невидимый тег, выполняющий иерархическую функцию. Он является родительским для всех вышеперечисленных тегов.

Это одни из самых типичных, простых и популярных тегов.

Непарные(одиночные) теги применяются для обозначения не родительских элементов таких как например изображение (тег <img>).
Пример:

See the Pen пример одиночного тега by Alexander (@Alex_SEOHARD) on CodePen.

2. Атрибуты

Атрибуты— дополняют теги, применяются для уточнения свойств элементов (пример в глоссарии SEOHARD). Атрибуты — настолько важный и популярный модификатор, что некоторые элементы могут обозначаться только с помощью сочетания тегов и атрибутов (например изображения)
Пример:

See the Pen примеры атрибутов by Alexander (@Alex_SEOHARD) on CodePen.

В данном примере видно следующее:

  1. Ссылка без атрибута href отображается как простой текст
  2. Добавление атрибута href=″http://seohard.com/″ делает ссылку рабочей и позволяет перейти на сайт seohard.com при нажатии
  3. Ссылка отображается идентично предыдущему примеру, но есть существенное отличие (подробнее будет показано в одном из следующих постов)
  4. С помощью атрибута style к ссылке можно применять различные стили, используя синтаксис CSS, о котором будет следующая статья.

3. Сущности

Сущности — дополнительные символы, которые можно применять в HTML для различных целей (глоссарий). Например, для того, чтоб теги <p>, <i> <ol> не интерпретировались как элементы, а отобразились в текстовом виде, применяются сущности &lt ;— аналог <, и &gt ;— аналог >
Пример:

See the Pen Примеры сущностей by Alexander (@Alex_SEOHARD) on CodePen.

Здесь в первых 4 строках видно, как можно отображать различные специальные символы с помощью сущностей. В 5-й строке видно, что можно писать целые слова. Обратите внимание: слова в последнем примере также разделены не пробелом, а сущностью & nbsp;, которая в отличие от пробела всегда отображается корректно.

Заключение

Как видно, знание HTML в многом — это знание и понимание тегов. Также в изучении HTML работает аналогия с изучением любого языка: для основных знаний достаточно выучить 10% тегов, которые исопльзуются в 90% случаев. Предлагаю вам свою версию самых популярных и нужных HTML тегов:

Элемент Тег
1 параграф p
2 курсив i
3 жирный текст b
4 подчеркнутый текст u
5 ссылка a href
6 нумерованый список ol
7 не нумерованый список ul
8 элемент списка li
9 заголовки различного уровня h1,h2,h3,h4
10 изображение img src

P.S. Полезные ресурсы:

  1. Справочники HTML элементов eng — полная версия/ru — частично не переведенная версия и HTML атрибутов(ru — полная версия) от Mozilla Developer Network.
  2. W3Schools HTML (eng) — отличное пособие по изучению HTML, главное удобство которого — TryitEditor — очень удобный онлайн интерпретатор HTML.
  3. CodeAcademy(eng) — «популярный» метод изучения HTML, идеально подойдет для людей с более гуманитарным уклоном. Главный недостаток — асистематичность и недостача последовательности.
  4. CodePen — онлайн инструмент для демонстрации кода (с помощью которого и показаны примеры в этой статье).
  5. Time To Code — iOS приложение для изучения HTML с неплохим встроенным HTML редактором.