В предыдущих лекциях ты узнал о самых распространенных HTML тегах. Без заголовков, параграфов, ссылок, списков и таблиц не обходится ни одна веб-страница.
Сегодня, я расскажу тебе о тегах, которые не так очевидны.
Тип документа
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>