Урок 109. Основы HTML | Учимся работать с кодом сайта

Урок 109. Основы HTML | Учимся работать с кодом сайта

Всем-всем привет!

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

Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.

Погнали!

Основы HTML

HTML (Hyper Text Markup Language) – это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта – документ, а браузер – средство просмотра подобных документов.

Задача HTML – показать браузеру где находиться тот или иной элемент документа. C помощью данного языка, элементы размечаются на странице и занимают определенное место, которые затем отображаются на мониторе посетителя сайта.

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

  • Структуру документа;
  • Место нахождения того или иного элемента;
  • Предназначение элемента;
  • Подключаемые сторонние файлы;
  • И много-много другого.

Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.

Структура HTML

Любой HTML-документ имеет начальную структуру, которая должна соблюдаться в обязательно порядке. Выглядит она так:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
    <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">
    <meta name="description" content="Описание контента страницы, 1-2 предложения.">
</head>
<body>
   Контент страницы
</body>
</html

Разберем каждый элемент подробнее:

  1. <!DOCTYPE html>

    Начало любого HTML-документа задается этим элементом. Так как язык разметки HTML постоянно развивается и имеет несколько версий, данный элемент помогает браузеру понять какая именно версия используется в документе и его тип;

  2. <html> - открывающий тег; </html> - закрывающий тег

    Данный тег является контейнером, в который входит все содержимое страницы. Необязателен к заполнению, но все же принято его использовать в каждом документе. Имеет закрывающий тег;

  3. <head> - открывающий тег; </head> - закрывающий тег

    В пределах тегов <head></head> указывается заголовок окна страницы (Title), мета теги Description и Keywords, а также другая техническая информация. К использованию допускаются такие теги, как:

    1. <link>

      Подключение внешних файлов, например, файл стилей style.css;

    2. <meta>

      Используется для хранения информации для браузера и поисковых систем;

    3. <style>

      Указывается для определения стилей элементов документа;

    4. <script>

      Применяется для описания скриптов, использующихся на странице, а также можно указать ссылку на внешний файл со скриптом, программой;

    5. <title>

      Задает заголовок окна страницы.

  4. <body> - открывающий тег; </body> - закрывающий тег

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

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

Я сам обладаю исключительно базовыми знаниями, однако этого вполне хватает, чтобы с легкостью ориентироваться в коде, находить ошибки и исправлять их.

Базовые теги HTML

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

Для Вашего удобства оформлю все в таблице:

<div> </div>
 Блочный элемент. Выделяет определенный фрагмент HTML-документа в блок. Содержимое блока можно с легкостью редактировать с помощью стилей.

Атрбуты:

  • class – стилевой класс, позволяющий связать определенный тег с задаваемым стилем оформления;
  • id – задает стилевой индентификатор;
  • align – выравнивание содержимого блока;
  • title – всплывающая подсказка содержимого блока.
 
<a href="URL-документа"></a>


<a name="Идентификатор якоря"></a>
 Используется для проставления ссылок на тот или иной файл сайта, на сторонний ресурс.

Атрибуты:

  • href – указывается адрес документа, на который происходит ссылка;
  • name – указывается “якорь” внутри определенной страницы.

Якорь – это закладка, находящаяся внутри HTML – документа.

 
<img src="Ссылка на картинку">


<img src="Ссылка на картинку" alt="Альтернативный текст">
 Используется для отображения в документе изображений формата GIF, JPEG, PNG.

Атрибуты:

  • src – указывается адрес на изображение;
  • alt – альтернативный текст. Помогает поисковому роботу определить что представляет из себя картинка.
  • Несколько других специализированных атрибутов.
 
<ol>
   <li>1-й пункт</li>
   <li>2-й пункт</li>
   <li>3-й пункт</li>
</ol>
 Вывод нумерованного списка. Каждая новая строка списка (элемент) обязательно должна начинаться с тега <li>. 
<ul>
   <li>1-й пункт</li>
   <li>2-й пункт</li>
   <li>3-й пункт</li>
</ul>
 Вывод маркированного списка. Каждая новая строка списка должна начинаться с тега <li>. 
<p>Текстовый абзац</p>
 Используется для определения текстового абзаца. Всегда начинается с новой строки в коде.

Атрибут:

  • align – выравнивание текстового абзаца;
 
<h1></h1>,...,<h6></h6>
 Заголовки документа. Всего существует шесть уровней заголовков, в соответствии с важностью элемента. Так, заголовок первого уровня (h1) является наиболее значимым, используется, как правило, для заголовка страницы. Последующие уровни идут по убыванию относительной важности. 
<p>Текстовый <span>абзац</span></p>
 Применяется для выделения подстроки в строке, то есть, с помощью данного тега можно выделить какую-то часть текста.

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

 
<iframe src="https://site1.ru"></iframe>
 Позволяет загрузить HTML-документ внешнего ресурса в Вашей странице. 
<strong><strong>
<em></em>
 С помощью данных тегов можно выделить какую-то фразу в тексте жирным и курсивом соответственно.

 

В своей работе я использую только эти теги, да и то не все. Если Вы хотите более подробно ознакомиться с темой HTML-верстки, то рекомендую изучить такой сервис, как HTMLbook.ru. В одно время он мне очень помог.

Завтра мы с Вами разберем основы стилевого оформления CSS. Ну а сегодня переварите эту информацию.

До завтра!

Прочтите еще:

2 отзыва к статье “Урок 109. Основы HTML | Учимся работать с кодом сайта”

  • 1
    Анна в 13/06/2019

    Здравствуйте! Простите за глупый вопрос. Я только начинаю познавать сео копирайтинг и мне непонятно, я как исполнитель в каком виде должна передавать работу? Написанную в коде страницы со всеми разметками и тегами?
    Спасибо большое за ответ!

  • 2
    Ринас ContextUP в 17/06/2019

    Здравствуйте, Анна! Уже ответил Вам ВК. Спасибо за вопрос!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *