В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!
Необходимые знания:
Умение работать с компьютером, наличие необходимого ПО, базовые знания о работе с файлами.
Цель:
Познакомиться с языком HTML и научиться описывать некоторые его элементы.
Что такое HTML?
Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как «параграф», заключив её в теги элемента «параграф» (
Структура HTML-элементов
Давайте рассмотрим элемент «параграф» чуть подробнее:
Основными частями элемента являются:
Активное изучение: создание вашего первого HTML-элемента
Отредактируйте строку текста ниже в поле Ввод, обернув её тегами и (вставьте перед строкой, чтобы указать начало элемента, и после неё, чтобы указать конец элемента) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле Вывод.
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
Вложенные элементы
Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!
Блочные и строчные элементы
Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.
Посмотрите на следующий пример:
— это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется CSS-оформлением по умолчанию, которое браузеры применяют к абзацам).
Примечание: HTML5 переопределил категории элементов в HTML: смотрите Категории типов содержимого элементов. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.
Примечание: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными типами отображения в CSS. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.
Примечание: вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри Элементы блочного уровня и Строчные элементы.
Пустые элементы
Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент вставляет картинку на страницу в том самом месте, где он расположен:
Это выведет на вашу страницу следующее:
Примечание: Пустые элементы иногда называют void-элементами.
Атрибуты
У элементов также могут быть атрибуты, которые выглядят так:
My cat is very grumpy</p>» src=»https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-attribute-small.png» style=»display: block; margin: 0px auto;» width=»1287″ height=»156″ loading=»lazy»>
Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут class позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.
Атрибут должен иметь:
Активное изучение: Добавление атрибутов в элемент
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
Булевые атрибуты
Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):
На выходе оба варианта будут выглядеть следующим образом:
Опускание кавычек вокруг значений атрибутов
Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:
Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:
Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.
Одинарные или двойные кавычки?
В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:
Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!
Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:
Если вы хотите вставить кавычки того же типа, то вы должны использовать объекты HTML. Например, это работать не будет:
Поэтому вам нужно сделать так:
Структура HTML документа
Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:
Любой код содержит в себе команды управления, посредством которых выполняются определенные задачи. В каждом языке они называются по-разному, но суть у них одна и та же. Чтобы не запутаться в терминах и говорить на одном языке, давайте разберемся как называются и как используются команды HTML.
Стоит отметить, что официального перевода спецификации на сегодняшний день нет. Поэтому перевод Александра будет оптимальным решением для читателей, не дружащих с английским.
В среде HTML цепочка выполнения команд следующая:
Теги выглядят следующим образом:
Чтобы увидеть (если интересно) внутренности html-страницы, в обозревателе кликните правой клавишей мыши и нажмите на пункт Искодный код или Код страницы (везде по-разному).
Ниже приведён фрагмент кода главной страницы портала mail.ru с 2530 по 2547 строку:
Атрибуты тегов
Разумеется, если бы дело ограничивалось только этим набором, то в интернете в плане оформления царило бы скудное однообразие. Дело в том, что большинство тегов имеет настройки, как ваш монитор имеет настройки яркости и контраста. Использовать (регулировать) их можно при помощи атрибутов тегов, а диапазон (или значения) этих настроек указан в спецификации для каждого тега отдельно. Теперь немного о том, как это выглядит:
Теперь изменим значения ширины, чтобы получить прямоугольник:
Каждому атрибуту (за редким исключением) необходимо присваивать значение, как в примере выше высота картинки имела значение сто. При этом следует сохранять синтаксис, то есть ставить знак равенства, кавычки и другие символы как того требует спецификация!
Итак, атрибуты бывают:
Снова о тегах
Если мы заключим гипертекст в тег
, то на странице он сформируется в отдельный блок (так как это блоковый тег) и образует абзац текста. Абзацы на этой странице сформированы как раз таким образом. Пример ниже:
Все заблуждаются в меру своих возможностей.
Теперь представьте, что текст в абзаце (блоке) надо некоторым образом оформить, не нарушая его целостность. Для этого используют inline-теги, которые производят действие над содержимым, но блока не образуют. Сделаем текст в следующем примере большим (тег ) и маленьким (тег ).
Все заблуждаются в меру своих возможностей.
Эти два элемента необычны для HTML тем, что могут обрабатывать элементы уровня блока или инлайн-элементы (но не те и другие вместе). Они могут содержать одно или более слов в параграфе или один или более элемент уровня блока, такой как параграфы, списки или таблицы. Спецификация HTML 4.01 в переводе Пирамидина А.
По принципу работы теги тоже можно разбить на две категории. Одни производят действия над гипертекстом, другие служат для включения в гипертекст других элементов. Если брать для примера уже рассмотренные теги, то
Указываем ссылку на другой документ
Немного по-другому обстоят дела с тегами, не трбующими обязательной закрывающей части. К их числу можно отнести теги, создающие элементы таблицы:
и
. Возьмём для примера таблицу:
Конечный (/закрывающий) тег может быть:
атрибуты у тегов могут быть:
Эту информацию по каждому конкретному тегу можно получить в спецификации. Как ею пользоваться написано ниже. И ещё один важный момент касательно использования различных символов в HTML.
При html-верстке иногда приходится использовать символы, которые могут трактоваться двояко. Например, употребление символов ‘ ‘ будет расценено обозревателями как часть тега, то есть как служебный символ, а это не всегда так. Поэтому проблемные символы кодируются. Называются такие закодированные символы мнемониками. Список мнемоник можно посмотреть в спецификации.
Вложенность тегов
Теги могут быть вложенными друг в друга как матрёшки. При этом они делятся на родительские и дочерние элементы. Поясню на примере:
Дочерние элементы наследуют характеристики родительских. Таким образом зачёркнутый текст будет также и подчёркнутым.
Главное помнить, что обе части тега (открывающая и закрывающая) должны быть вложены в один и тот же родительский элемент, опять же по аналогии с матрёшкой.
Использование спецификации
Официальной на данный момент (март 2012) является версия HTML 4.01, версия HTML 5.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему HTML 5.
Перевод Пирамидина А.
Открываем спецификацию, меню разделов:
Откроется меню элемента TABLE. Можно почитать введение и общую информацию по таблицам (лишней не будет). Далее следует непосредственно само описание тега
.
Тут можно получить информацию по каждому атрибуту.
Важное замечание. На скриншоте выше атрибут align имеет статус Deprecated (не рекомендован). Такой атрибут не будет работать (и будет ошибкой) в DOCTYPE Strict. Так что использовать deprecated-элементы я крайне не рекомендую. Статус любого элемента можно посмотреть в общем списке.
Уточнения по тегам:
Уточнения по атрибутам:
Обратите внимание, атрибут align разрешён для использования с элементами таблицы и не рекомендован во всех остальных случаях. Так что уточняйте статус атрибутов для каждого тега в отдельности.
Кроме всего прочего советую ознакомиться со следующими разделами:
HTML-теги и атрибуты, о которых вы, возможно, не знали
Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.
address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
audio
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
video
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
blockquote и cite
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
Тег code используется для определения части компьютерного кода:
Для форматирования блока кода code часто используется совместно с тегом pre :
datalist
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
details
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).
dialog
Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
figure
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
meter
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Так можно записать уровень заряда батареи вашего устройства в значение meter :
progress
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Так можно реализовать десятисекундный таймер:
output
Тег output используется для представления результата вычислений.
picture
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
template
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
noscript
Другие теги в форме шпаргалок
Семантическое «секционирование» страницы
Стилизация текста
Форма
Поля для ввода данных
Пример валидации адреса электронной почты и пароля:
Таблица
Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.
Послесловие
Наши виртуалки можно использовать для разработки веб-сайтов.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Мы привыкли, что большинство манипуляций с HTML-кодом выполняет программист. Так и должно быть. Но это ни в коем случае не освобождает сеошника от необходимости знать базовые HTML-теги. Как минимум — для правильной постановки ТЗ, а как максимум — для понимания, как теги влияют на SEO.
Какие теги и атрибуты важны для продвижения, как их правильно оформлять и зачем они нужны? Мы прошлись по самым важным для сеошников и диджитал-маркетологов тегам и составили список, чтобы вы могли освежить свои знания или же разобраться в основах HTML с нуля.
База — коротко о важном
HTML-код — это язык, с помощью которого страница сообщает браузеру, какие элементы она содержит, и что нужно выводить на экран.
HTML — это основа большинства веб-страниц и одна из важнейших частей технического SEO. С помощью элементов HTML SEO-специалисты могут предоставлять информацию о страницах как пользователям, так и краулерам. Таким образом, можно понять, какая структура страницы и порядок ее содержимого, а также как одна страница связана с другими.
Простыми словами, если зайти на страницу сайта, вы увидите сверстанный текст, с разделами и подзаголовками, картинками и ссылками. Но для браузера и поисковых систем такая страница представляет собой просто строки HTML-кода с определенными элементами.
Мы уже затронули термины «элемент HTML» и «тег», но есть также метатеги и атрибуты. Вы легко можете запутаться, если не знаете, в чем разница.
Поэтому давайте разберем основные термины, которые мы будем часто использовать в этой статье.
Структура элемента HTML
HTML-код состоит из элементов, каждый из которых может быть тегом или метатегом. Если у него есть дополнительные характеристики, это атрибуты.
В данном случае это заголовок, который обозначается в коде с помощью открывающего тега
Тег — это элемент языка HTML. С его помощью разграничивают начало и конец каждого элемента. Теги определяют, как браузеры форматируют и отображают содержимое страницы. Например, если мы хотим подчеркнуть текст на странице, используется тег . Теги могут быть парными, один из них открывающий, а другой — закрывающий (например, …), или одиночными (например, или ).
Метатег — это разновидность тега. С его помощью поисковики и браузеры получают техническую информацию о странице сайта — описание страницы, ключевые слова, кодировку документа, правила индексирования для поисковиков и другие. Все метатеги должны находиться в теге документа. Интересно, что description и keywords являются метатегами, а title — тегом.
Атрибут — дополнительная характеристика тега или метатега. Они представляют собой специальные слова, которые используются внутри начального тега для управления поведением элемента.
Например, ранее мы говорили о теге, который добавляет на страницу картинку. А вот его атрибут alt задает альтернативный текст для изображения в случае, если оно не будет отображаться.
Чем теги отличаются от атрибутов
Многие не видят разницы между терминами «тег» и «атрибут». Но отличия есть. Давайте разбираться с терминологией.
Вот пример элемента HTML, в котором можно выделить три части:
открывает тег, «Добро пожаловать в мой блог о SEO» — это содержание тега, а
Элемент HTML в приведенном выше примере — это видимый заголовок на странице блога. Теперь давайте проведем различие.Если теги должны иметь начальный и конечный элементы для правильного функционирования, то атрибуты нет — они добавляются к элементам HTML как модификаторы, например:
Обратите внимание, что существуют также пустые элементы, такие как , у которых нет содержания или закрывающего тега.
Зачем теги поисковикам и юзерам
Что такое теги и атрибуты понятно, но зачем они нужны поисковым системам, браузерам и юзерам? Поисковики используют теги, чтобы получить информацию о содержимом страницы и включить ее в результаты поиска.
Прямое тому подтверждение — сниппет в выдаче, который обычно формируется с помощью тегаtitle и метатегаdescription. Но если заголовок и описание страницы будут составлены некорректно (не отвечают действительности, переспамлены ключами и т. д.), Google и Яндекс заменят их на более подходящие, взятые из разметки и содержания страницы.
В справках Search Console и Вебмастера указаны списки метатегов, которые поддерживает Google и Яндекс соответственно. Обязательно ознакомьтесь с ними, если хотите узнать больше о каждом HTML-теге.
Теги помогают браузеру считывать информацию о странице. Благодаря этому текст, картинки и ссылки на наших мониторах отображаются именно так, как указано в HTML-коде. Сложно представить, если бы нам приходилось «вылавливать» текст на сайте из кода.
Теперь, когда мы разобрались с основными понятиями HTML, давайте перейдем к самому интересному: тегам и атрибутам, которые важны для поисковой оптимизации.
3 основных HTML-тега
Если вы хотите создать страницу, которая будет полезна людям и, что более важно в контексте этой статьи, поисковикам, вы должны добавить в код три ключевых HTML-тега.
Тег указывает, что страница является веб-страницей
Тег — это самый первый тег, который вы должны добавить в код своей страницы. Он указывает поисковым системам, что данная страница — это веб-страница.
Хоть сам по себе не является HTML-тегом (поэтому у него нет никаких атрибутов), он предоставляет браузерам очень важную информацию, которая позволяет узнать, согласно какому стандарту нужно отображать страницу.
Вот как используют тег в коде:
Таким образом, браузер поймет, что страница создана на HTML. И у него точно не возникнет проблем с обработкой кода и верным отображением страницы.
Тег содержит метаданные страницы
Тег представляет самый первый раздел страницы и содержит информацию, которая не отображается напрямую на странице в браузере.
Важно: внутри тега размещаются одни из ключевых SEO-тегов.
Элемент находится между тегами и и служит контейнером для метаданных. Как правило, метаданные определяют заголовок документа, его набор символов, стили, скрипты и т. д.
Нет смысла показывать вам, как этот код будет выглядеть в действии, потому что нет никакого контекста. Поэтому вот пример того, как мы использовали тег script, чтобы добавить виджет HelpCrunch на наш сайт:
Прежде чем мы перейдем к особенностям обработки JavaScript поисковиками, ознакомьтесь с таблицей ниже. Она даст представление о том, как можно использовать внешние скрипты на своих страницах и какие атрибуты вам в этом помогут.
