0:00
Всем привет.
В этом видео я раскажу вам про основные HTML-элементы,
а также про некоторые метаэлементы.
Итак, первый элемент называется HTML.
Он создает границу для всего документа.
В начале документа указывается открывающийся тег и в самом конце
закрывающийся тег.
Примерно так выглядит типичный HTML-документ.
И, как вы видите, первой строкой записан некоторый DOCTYPE.
Это не совсем HTML-элемент, это директива, которая
указывает на тип документа, иными словами на спецификацию, по которой он создан.
Раньше DOCTYPE был очень длинный и сложный.
Раньше — я говорю о тех временах, когда было несколько спецификаций xhtml,
html, у них были различные версии, — так вот,
в этом DOCTYPE раньше указывались ссылки на спецификацию.
Но сейчас я не буду вдаваться в подробности,
потому что в HTML5 все намного проще, и DOCTYPE выглядит следующим образом.
Пишется просто DOCTYPE и HTML.
Хочу обратить ваше внимание, что данный HTML-код является минимально возможным.
Что значит минимально возможным?
Это значит, что он проходит валидацию.
Всегда можно пройти валидацию на сайте w3c по адресу validator.w3.org,
как указано на слайде.
Практически каждый HTML-документ имеет метаэлементы.
Это элементы, которые содержат информацию о документе.
Этой информацией могут воспользоваться поисковые роботы,
браузер или даже социальные сети.
Первым таким элементом является элемент title.
Он определяет заголовок документа.
Хочу обратить ваше внимание,
что это единственный обязательный элемент и он не должен быть пустым.
Почему это важно?
Во-первых, если вы увидите свой сайт в поисковой выдаче,
то заголовок возьмется из элемента title.
Также содержимое этого элемента отображается в названии вкладки.
Пользователи, которые используют скринридер,
для того чтобы перемещаться по сайтам, то перемещаясь по вкладкам,
скринридер зачитывает, что находится в элементе title.
Тем самым пользователь может понять, нужно ему заходить на этот сайт или нет.
Если этот заголовок отсутствует, то человек не сможет понять, что это за сайт.
Следующий метаэлемент, не менее важный, называется link.
Он устанавливает связь с внешними документами.
Например, это может быть CSS-файл.
Как правило, элемент link указывается внутри элемента head.
И в качестве значения атрибута href указывается ссылка на документ.
Также можно указать атрибут media, который позволяет описать устройство,
для которого будет применен этот файл.
Например, если мы посмотрим на третью запись элемента link,
то мы увидим, что данные стили применятся при печати.
Атрибут rel, relationship,
позволяет описывать тип связи между документом и внешним файлом.
Значений у этого атрибута довольно много,
и все их можно посмотреть по ссылке, указанной на слайде.
Но разберем одно из них.
Если мы укажем значение alternate, то оно сообщает,
что у документа есть альтернативный формат.
В данном примере это rss-рассылка.
Следующий элемент называется base.
Он определяется базовый адрес ссылки.
К примеру, на странице есть ссылки и картинки, которые начинаются на
какую-то похожую часть строки, например, на http://ya.ru/pages.
Соответственно, все ссылки будут строиться относительно него.
Для этого мы указываем в head элемент base и указываем в качестве значения
атрибута href вот эту базовую часть ссылки.
Если же хочется переопределить это значение, например, есть ссылка,
которая ведет на абсолютно другой ресурс, достаточно указать адрес полностью.
Элемент script предназначен для описания скриптов на странице.
При помощи этого элемента можно указать ссылку на какой-то внешний файл.
Для этого достаточно установить атрибут src и в качестве значения
указать ссылку до файла.
Также можно установить скрипты прямо на страницу.
Для этого нужно в качестве содержимого элемента script написать код на
определенном языке.
Следующий элемент называется style.
Он предназначен для определения CSS-стилей на странице.
В качестве содержимого этого элемента пишутся CSS-стили.
У этого элемента также есть атрибут media, который позволяет описать устройство,
для которого нужно применять эти стили.
Элемент meta позволяет определить метаинформацию документа.
К примеру, мы можем указать кодировку, описание или даже автора,
кем был создан документ.
Эту информацию могут использовать поисковые роботы,
браузер или даже социальные сети.
Кстати о социальных сетях.
Обычного набора метаэлементов недостаточно,
поэтому компания Facebook разработала свою спецификацию под названием Open Graph.
Эта спецификация позволяет передавать больше информации от
документа в социальные сети.
Что значит передавать информацию?
Например, когда мы поделимся ссылочкой какой-то, то автоматически подтягиваются
картинка, название, описание и ссылка на какой-то документ.
Чтобы задать Open Graph теги,
нужно указать элемент meta и в качестве property указать поле.
Например, это может быть заголовок, ссылка, описание или картинка.
На самом деле этих элементов довольно много.
Я привел лишь только несколько из них.
По ссылке можно перейти и почитать эту спецификацию полностью.
Вот пример.
Я захотел поделиться ссылкой в социальной сети «Вконтакте».
Я добавляю ссылку, и автоматически социальная сеть берет с сайта картинку,
заголовок, описание.
Вся эта информация указана в Open Graph тегах.
В этом видео я рассказал вам про основные элементы, которые используются в HTML.
Также рассказал про метаэлементы и про Open Graph теги.
В следующем видео я расскажу вам, что такое семантическая верстка.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
