В предыдущих лекциях ты узнал о самых распространенных HTML тегах. Без заголовков, параграфов, ссылок, списков и таблиц не обходится ни одна веб-страница.

Сегодня, я расскажу тебе о тегах, которые не так очевидны.

Начни Учить Full-Stack JavaScript СЕЙЧАС!

Тип документа

HTML появился давно и существует в нескольких версиях. Обычно, в самом начале HTML документа указывают его тип или версию HTML, которая используется на этом сайте. Для этого используется специальный элемент <!DOCTYPE>. Вот пример для HTML5:

<!DOCTYPE html>

В данном примере все очень просто — мы говорим браузеру, что тип документа - html. В более старых версиях HTML (например, HTML4) все немного сложнее, но не будем тратить время на это.

Просто запомни, что в начале HTML документа стоит всегда добавлять тег <!DOCTYPE> с одним атрибутом html.

Тег <html>

После типа документа, следует тег <html>, который определяет начало и окончание HTML-файла.

Внутри контейнера <html> все можно разделить на два блока: заголовок и тело. Заголовок определяется тегом <head>, тело — тегом <body>.

Заголовок документа

<head> - парный тег. Еще его называют контейнером для метаданных.

Метаданные — данные о данных; информация об используемых на странице скриптах, стилях и так далее. Информация, указанная в <head>, на странице не отображается. Вся, кроме тега title.

Тег <title> определяет заголовок документа. Заголовок должен быть только текстовым.

Использование заголовка очень важно:

  • он отображается на вкладке браузера
  • используется как название страницы при добавлении в избранное
  • отображается при поиске, например на google.com
<html>
  <head>
    <title>Первая страница</title>
  </head>
</html>

Мета теги

Также внутри тега <head> часто можно увидеть тег <meta>.

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

— А что я могу указать с помощью тега <meta>?

— Например, автора страницы:

<meta name="author" content="Hero">

С помощью атрибута name указывается имя мета тега, что также косвенно задает его предназначение. С помощью атрибута content устанавливается значение мета тега, заданного с помощью name.

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

<meta name="description" content="My first website">
<meta name="keywords" content="HTML, CSS, JavaScript, Coderslang">

Обрати внимание на метатег keywords и его атрибут content. Нам нужно было указать несколько значений для атрибута и мы перечислили их через запятую.

Структура нашего документа изменилась и выглядит так:

<!DOCTYPE html>
<html>
  <head>
    <meta name="author" content="Hero">
    <meta name="description" content="My first website">
    <meta name="keywords" content="HTML, CSS, JavaScript, Coderslang">
    <title>Первая страница</title>
  </head>
</html>

Тело документа

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

Добавим несколько тегов в <body> и получим страницу с одним абзацем и заголовком:

<!DOCTYPE html>
<html>
  <head>
    <meta name="author" content="Hero">
    <meta name="description" content="My first website">
    <meta name="keywords" content="HTML, CSS, JavaScript, Coderslang">
    <title>Первая страница</title>
  </head>
  <body>
    <h1>Первый заголовок</h1>
    <p>Первый абзац. Также в этом абзаце есть текст, написанный <b>жирным</b> шрифтом </p>
  </body>
</html>