Его не видно, а он есть. Элемент <head> и его содержимое
31 авг 2023 · 12:01
Элемент <head> содержит метаданные (информацию о других данных). Его контент не показывается пользователям на странице, но влияет на работу сайта, отображение контента, визуальное оформление ссылки на сайт в соцсетях и др. Сейчас разберём, что прячет в себе этот «серый кардинал».
обложка-head-html.png734.95 KB
Внутри <head> на очень многих страницах можно встретить элементы:
<title> - заголовок HTML-документа;
<link> - привязка шрифтов, стиля и не только;
<script> - необходимые скрипты;
<meta> - другие метаданные.
<title>
Внимание! Не путайте <title> с заголовками статьи (<h1>-<h6>). <Title> задаёт заголовок всего HTML-документа, а не его части.
Значение <title> на странице можно узнать четырьмя способами:
Откройте инструмент разработчика, разверните <head> и найдите элемент <title>.
Посмотрите название вкладки в браузере. Если его не видно целиком, наведите курсор на вкладку.
Если Вы нашли сайт в поисковой выдаче, обратите внимание на название главной ссылки. Это и есть содержимое <title>.
Добавьте страницу в панель закладок. Браузер сам предложит её имя в соответствии с элементом <title>.
Выделенный элемент <title> и его анатомия. Фото окна в инструменте разработчика. Синий цвет – теги, белый – заголовок HTML-документа.
<link>
По структуре <link> похож на элемент <a>, ведь он:
Является void-элементом.
Имеет атрибут href со схожей функцией.
Вот только <link> прописывается в хеде, а не теле HTML-документа. Плюс он предназначен не для перехода на внешние ресурсы, а для привязки этих ресурсов к документу.
У элемента <link> часто можно встретить два атрибута:
rel= «» - определяет, что передаёт привязываемый ресурс HTML-документу.
href= «» - содержит URL на этот ресурс.
Примеры значений rel и href Вы можете посмотреть в моём коде на codepan. io.
<script>
Элемент <script> содержит JavaScript код, необходимый для работы сайта. Его можно встретить не только внутри <head>, но и внутри <body>. Подробнее об элементе <script> расскажу позже, когда доберусь до JavaScript.
<meta>
Довольно разнообразный по возможностям элемент. Разберём некоторые его популярные вариации.
meta-element-variations.png95.59 KB
<meta charset= «utf-8» >. Задаёт кодировку веб-страницы (кодировка – это метод хранения символов). Сейчас используют кодировку UTF-8, поскольку она включает в себя большинство символов из всех известных человеку языков.
<meta content= «author» content= «Имя автора кода» >. Некоторые CMS по этой строчке находят автора HTML-кода и позволяют с ним связаться.
<meta name= «description» content= «Описание страницы» >. Значение атрибута content задаёт описание страницы. Именно оно прописано в поисковой выдаче под названием ссылки.
Задание
Хотите посмотреть, что будет с сайтом после удаления элемента <head>? Тогда:
Зайдите на любой популярный сайт (например, YouTube: там элемент <head> отвечает за привязку стилей, так что изменения будут очевиднее).
Откройте инструмент разработчика. Для этого нажмите правой кнопкой мыши в любой части экрана. В контекстном меню выберите «Посмотреть код» или «Исследовать» (в разных браузерах по-разному).
Найдите окно с HTML-кодом. Внутри него должен быть элемент <head>. Удалите его.
Теперь закройте инструмент разработчика. Вы увидите, мягко говоря, развалившийся сайт. Не пугайтесь: перезагрузите страницу, и всё вернётся на свои места.
Обобщающий конспект
схема-внутри-head.png329.35 KB
{"document": [{"text": [{"type": "string", "attributes": {}, "string": "Элемент <head> содержит метаданные (информацию о других данных). Его контент не показывается пользователям на странице, но влияет на работу сайта, отображение контента, визуальное оформление ссылки на сайт в соцсетях и др. Сейчас разберём, что прячет в себе этот «серый кардинал»."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "обложка-head-html.png", "filesize": 752593, "height": 720, "pic_id": 666230, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/11/%D0%BE%D0%B1%D0%BB%D0%BE%D0%B6%D0%BA%D0%B0-head-html_h0LLVz6.jpeg", "width": 1280}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Внутри <head> на очень многих страницах можно встретить элементы: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<title> - заголовок HTML-документа; "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "<link> - привязка шрифтов, стиля и не только; "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "<script> - необходимые скрипты; "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "<meta> - другие метаданные. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "<title>"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Внимание! Не путайте <title> с заголовками статьи (<h1>-<h6>). <Title> задаёт заголовок всего HTML-документа, а не его части."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Значение <title> на странице можно узнать четырьмя способами: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Откройте инструмент разработчика, разверните <head> и найдите элемент <title>. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Посмотрите название вкладки в браузере. Если его не видно целиком, наведите курсор на вкладку. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Если Вы нашли сайт в поисковой выдаче, обратите внимание на название главной ссылки. Это и есть содержимое <title>. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Добавьте страницу в панель закладок. Браузер сам предложит её имя в соответствии с элементом <title>."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "attachment", "attributes": {"caption": "Выделенный элемент <title> и его анатомия. Фото окна в инструменте разработчика. Синий цвет – теги, белый – заголовок HTML-документа.", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "title-element.jpg", "filesize": 131039, "height": 485, "pic_id": 666205, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/11/title-element.jpeg", "width": 776}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<link>"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "По структуре <link> похож на элемент "}, {"type": "string", "attributes": {"href": "https://developer.mozilla.org/ru/docs/Web/HTML/Element/a"}, "string": "<a>"}, {"type": "string", "attributes": {}, "string": ", ведь он: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Является void-элементом. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Имеет атрибут href со схожей функцией. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Вот только <link> прописывается в хеде, а не теле HTML-документа. Плюс он предназначен не для перехода на внешние ресурсы, а для привязки этих ресурсов к документу. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "У элемента <link> часто можно встретить два атрибута: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "rel= «» - определяет, что передаёт привязываемый ресурс HTML-документу. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "href= «» - содержит URL на этот ресурс. "}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Примеры значений rel и href Вы можете посмотреть в моём коде на "}, {"type": "string", "attributes": {"href": "https://codepen.io/Arthur-Arutunyan/pen/WNYqOzp"}, "string": "codepan. io"}, {"type": "string", "attributes": {}, "string": ". "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<script>"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Элемент <script> содержит JavaScript код, необходимый для работы сайта. Его можно встретить не только внутри <head>, но и внутри <body>. Подробнее об элементе <script> расскажу позже, когда доберусь до JavaScript."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta>"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Довольно разнообразный по возможностям элемент. Разберём некоторые его популярные вариации."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "meta-element-variations.png", "filesize": 97888, "height": 914, "pic_id": 666232, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/11/meta-element-variations_9mKpy1g.jpeg", "width": 1932}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta charset= «utf-8» >. Задаёт кодировку веб-страницы (кодировка – это метод хранения символов). Сейчас используют кодировку UTF-8, поскольку она включает в себя большинство символов из всех известных человеку языков. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta content= «author» content= «Имя автора кода» >. Некоторые CMS по этой строчке находят автора HTML-кода и позволяют с ним связаться. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<meta name= «description» content= «Описание страницы» >. Значение атрибута content задаёт описание страницы. Именно оно прописано в поисковой выдаче под названием ссылки."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Задание "}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Хотите посмотреть, что будет с сайтом после удаления элемента <head>? Тогда:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Зайдите на любой популярный сайт (например, "}, {"type": "string", "attributes": {"href": "https://www.youtube.com/"}, "string": "YouTube"}, {"type": "string", "attributes": {}, "string": ": там элемент <head> отвечает за привязку стилей, так что изменения будут очевиднее). "}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Откройте инструмент разработчика. Для этого нажмите правой кнопкой мыши в любой части экрана. В контекстном меню выберите «Посмотреть код» или «Исследовать» (в разных браузерах по-разному). "}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Найдите окно с HTML-кодом. Внутри него должен быть элемент <head>. Удалите его. "}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь закройте инструмент разработчика. Вы увидите, мягко говоря, развалившийся сайт. Не пугайтесь: перезагрузите страницу, и всё вернётся на свои места. "}], "attributes": ["numberList", "number"]}, {"text": [{"type": "string", "attributes": {}, "string": "Обобщающий конспект"}], "attributes": ["heading1"]}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "схема-внутри-head.png", "filesize": 337258, "height": 1818, "pic_id": 666236, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2023/08/11/%D1%81%D1%85%D0%B5%D0%BC%D0%B0-%D0%B2%D0%BD%D1%83%D1%82%D1%80%D0%B8-head_CnItyV5.jpeg", "width": 2714}}], "attributes": []}], "selectedRange": [1862, 1909]}
Комментарии 0