Почему каждый веб-разработчик должен знать HTML
Решил начать вести свой блог с простых тем, а именно в этой статье я расскажу про HTML и зачем он нужен, а также почему нужно его изучать даже тем, кто делает сайты на конструкторах. А самое главное в этой статье ты узнаешь почему SEO продвижение сайтов на конструкторах очень сложная вещь.
HTML - это язык разметки для создания веб-страниц. Не стоит путать его с языком программирования, он никак к ним не относится. Языки программирования существуют для реализации алгоритмов, а языки разметки являются чем-то вроде моста между графическим представлением и его цифровым аналогом.
Чтобы просмотреть сайт, человек использует программу - браузер. Браузер интерпретирует HTML код в то, что можно показать. К примеру, если написать:
x<sup>2</sup>
то мы получим представление x2 в браузере.
Кстати, чтобы посмотреть HTML код данной страницы, тебе надо открыть её в браузере на ПК, кликнуть правой кнопкой мыши прямо здесь (или в любом другом месте в пределах окна браузера) и нажать на меню “Просмотреть код”.
Факты об HTML
- Расшифровывается как Hyper Text Markup Language (Язык Разметки Гипер Страниц).
- Это стандартный язык разметки для создания веб-страниц. Ныне браузеры научились выводить в виде Excel таблиц и другие виды разметки, например XML.
- HTML описывает структуру веб-страницы.
- HTML состоит из серии элементов.
- Элементы HTML объясняют браузеру как выводить контент.
- Элементы HTML также маркируют части контента. К примеру браузер понимает, что есть заголовок статьи, что есть абзац, что есть списки, тип списка: маркированный или нумерованный и т. д.
Пример HTML кода
Ниже представлен пример простого кода HTML с объяснением:
<!DOCTYPE html><html><head><title>Название страницы в шапке браузера</title></head><body><h1>Заголовок</h1><p>Абзац.</p></body></html>
- <!DOCTYPE html> объявляет браузеру, что используется версия языка HTML5.
- <html> объявляет саму страницу.
- <head> даёт объявление скрытой части веб-страницы, которая необходима для браузеров и поисковых ботов, но не должна быть видна пользователю.
- <title> говорит браузеру то, ему необходимо вывести в шапке.
- <body> инициализирует видимую часть веб-страницы.
- <h1> задаёт заголовок.
- <p> показывает абзац.
Элементы HTML
Как видите всё довольно легко и просто. Однако мы до сих пор не дали определение HTML элемента. HTML элемент это группа, состоящая из тегов и контента. HTML элемент бывает двух видов: полный и пустой.
Пример полного элемента:
<tagname>Контент</tagname>
Полный элемент состоит из открывающего и закрывающего (парного) тега, а также контента между этими тегами.
Пример пустого элемента:
<br>
Пустой элемент состоит из одинарного тега. У пустого элемента отсутствует контент и закрывающий тег.
На данный момент актуальной версией HTML является HTML 5.2, подробную документацию которой можно прочитать здесь.
Как HTML код влияет на продвижение сайта?
Разметка веб-страницы является важнейшей составляющей сайта. Правильная вёрстка помогает роботам качественнее индексировать содержимое вашей страницы. К примеру, по требованиям поисковых систем на странице должен присутствовать один элемент h1. Желательно, чтобы h1 содержал ключевое слово, под которую задано содержимое страницы. Не допускается нарушение иерархии подзаголовков. Существует 6 уровней заголовков h1, h2, …, h6 и нельзя объявить h3 непосредственно после h1, а затем после h3 объявить h2:
<h1>Заголовок 1</h1>…<h3>Заголовок 3</h3>…<h2>Заголовок 2</h2><p>Так делать нельзя!!!</p>
Правильно если заголовки будут встречаться в порядке:
<h1>Заголовок 1</h1>…<h2>Заголовок 2</h2>…<h3>Заголовок 3</h3>…<h2>Заголовок 2</h2>…<h3>Заголовок 3</h3>…<h4>Заголовок 4</h4>…<h3>Заголовок 3</h3>…<h2>Заголовок 2</h2>
В таком случае есть понимание иерархии заголовков.
Также поисковые системы обрабатывают страницы с определённой скоростью и у каждого скрипта обхода есть время работы. Если код страницы содержит слишком много элементов, то велик риск того, что робот перестанет обходить вашу страницу, при этом проиндексировав не всю информацию в ней.
Как же быть? Не пользоваться конструкторами и готовыми темами, которые не имеют знака качества проверки валидации HTML кода.
Конструкторы и готовые темы для CMS сконструированы таким образом, чтобы быстро собирать вёрстку из готовых элементов. Для этого очень часто элементы группируются в лишние родительские элементы и им задаётся определённый атрибут - класс элемента. Количество таких элементов может достигать десятков. Поэтому глубина вложенности таких страниц превышает 15-20 элементов, а это довольно большой показатель.
Вообще вся структура HTML документа это DOM структура (Document Object Model). Это древовидная структура данных. И рекомендуемая максимальная глубина такой структуры не больше 10, а в идеале 8.
Кстати хороших результатов можно добиться, если хорошо владеть знаниями CSS и JavaScript (тоже не мало важными инструментами для создания сайтов). CSS отвечает за стили (цвета кнопок, размер шрифта и т.д.), а JavaScript в основном за поведенческий фактор. CSS также не является языком программирования, в отличие от Javascript. JavaScript довольно продвинутый язык программирования, который требует отдельной статьи.
Заключение
Надеюсь моя статья была полезна для тех, кто думает, что на конструкторе за дешёвую цену можно создать сайт и добиться хороших результатов. Создать то сайт получится, а вот с продвижением его в поисковиках будут трудности. И не нужно поддаваться заблуждению, если увидите на первых местах выдачи сайт на конструкторе. Многие люди вообще не работают с продвижением сайта, у многих вообще нет ощутимой конкуренции. Продвижение сайтов довольно трудоемкое занятие и правильность HTML кода сайта это всего лишь капля (но довольно весомая) в большом океане.
Я также напоминаю, что качественную разработку веб-сайта можно заказать в Студии Али Велиева.
