Что в голове? Метаданные в HTML

Что такое HTML голова?
Добавление заголовка
Активное обучение: проверка простого примера
Указание кодировки символов вашего документа
Активное обучение: экспериментируйте с кодировкой символов
Добавление автора и описания
Активное обучение: описание использования в поисковых системах
Добавление пользовательских значков на ваш сайт
Применение CSS и JavaScript к HTML
Активное обучение: применение CSS и JavaScript к странице
Установка основного языка документа
Резюме

голова документа HTML - это часть, которая не отображается в веб-браузере при загрузке страницы. Содержит такую информацию, как страница <Название> , ссылки на CSS (если вы решите стилизовать свой HTML-контент с помощью CSS), ссылки на пользовательские значки и другие метаданные (данные о HTML, такие как автор, и важные ключевые слова, которые описывают документ.) В этой статье мы рассмотрим все выше и многое другое, чтобы дать вам хорошую основу для работы с разметкой.

Предварительные условия: базовое знакомство с HTML, как описано в Начало работы с HTML , Цель: узнать о заголовке HTML, его назначении, наиболее важных элементах, которые он может содержать, и о том, как он может повлиять на документ HTML.

Что такое HTML голова?

Давайте вернемся к простому HTML-документ, который мы рассмотрели в предыдущей статье :

<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Моя тестовая страница </ title> </ head> <body> <p> Это моя страница </ p> < / body> </ html>

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

<head> <meta charset = "utf-8"> <title> Моя тестовая страница </ title> </ head>

Однако на больших страницах голова может быть достаточно полной. Попробуйте перейти на некоторые из ваших любимых веб-сайтов и использовать инструменты разработчика проверить их содержание головы. Наша цель здесь не в том, чтобы показать вам, как использовать все, что может быть положено в голову, а в том, чтобы научить вас, как использовать основные элементы, которые вы хотите включить в голову, и дать вам некоторое знакомство. Давайте начнем.

Добавление заголовка

Мы уже видели <Название> элемент в действии - это можно использовать для добавления заголовка в документ. Это, однако, можно спутать с <H1> элемент, который используется для добавления заголовка верхнего уровня к содержанию вашего тела - это также иногда называют заголовком страницы. Но это разные вещи!

<H1> элемент появляется на странице при загрузке в браузер - как правило, его следует использовать один раз для каждой страницы, чтобы пометить заголовок содержимого вашей страницы (заголовок истории, заголовок новости или любой другой, который подходит для вашего использования).
<Название> Элемент - это метаданные, которые представляют заголовок всего HTML-документа (а не его содержимое).

Активное обучение: проверка простого примера

Чтобы начать это активное обучение, мы бы хотели, чтобы вы зашли на наш репозиторий GitHub и загрузили копию нашего title-example.html page , Для этого либо
1. Скопируйте и вставьте код со страницы в новый текстовый файл в редакторе кода, а затем сохраните его в разумном месте.
2. Нажмите кнопку «Raw» на странице GitHub, после чего появится необработанный код (возможно, в новой вкладке браузера). Затем выберите в браузере меню « Файл»> «Сохранить страницу как ...» и выберите подходящее место для сохранения файла.
Теперь откройте файл в вашем браузере. Вы должны увидеть что-то вроде этого:
Теперь должно быть совершенно очевидно, где появляется контент <h1> и где появляется контент <title>!
Вам также следует попробовать открыть код в редакторе кода, отредактировать содержимое этих элементов, а затем обновить страницу в браузере. Повеселись с этим.

Содержимое элемента <title> также используется другими способами. Например, если вы попытаетесь создать закладку на странице ( Закладки> Закладка на этой странице или значок звездочки в строке URL-адреса в Firefox), вы увидите заполненное содержимое <title> в качестве рекомендуемого имени закладки.

Содержимое <title> также используется в результатах поиска, как вы увидите ниже.

Метаданные - это данные, описывающие данные, а в HTML есть «официальный» способ добавления метаданных в документ - <META> элемент. Конечно, другие вещи, о которых мы говорим в этой статье, также могут рассматриваться как метаданные. Существует множество различных типов элементов <meta>, которые могут быть включены в <head> вашей страницы, но мы не будем пытаться объяснить их все на этом этапе, так как это будет слишком запутанным. Вместо этого мы объясним несколько вещей, которые вы обычно можете увидеть, просто чтобы дать вам идею.

Указание кодировки символов вашего документа

В приведенном выше примере эта строка была включена:

Этот элемент просто определяет кодировку символов документа - набор символов, который документу разрешено использовать. utf-8 - это универсальный набор символов, который включает в себя практически любой символ любого человеческого языка. Это означает, что ваша веб-страница сможет обрабатывать отображение любого языка; Поэтому рекомендуется установить это на каждой создаваемой вами веб-странице! Например, ваша страница может нормально обрабатывать английский и японский языки:

Например, если вы установите кодировку ISO-8859-1 (набор символов для латинского алфавита), рендеринг вашей страницы может выглядеть испорченным:

Примечание . Некоторые браузеры (например, Chrome) автоматически исправляют неправильные кодировки, поэтому, в зависимости от того, какой браузер вы используете, эта проблема все равно может не появиться. Вы все равно должны установить кодировку utf-8 на своей странице, чтобы избежать возможных проблем в других браузерах.

Активное обучение: экспериментируйте с кодировкой символов

Чтобы попробовать это, вернитесь к простому HTML-шаблону, который вы получили в предыдущем разделе <title> ( title-example.html page ), попробуйте изменить значение метасимвола на ISO-8859-1 и добавьте японский на свою страницу. Это код, который мы использовали:

<p> Японский пример: ご飯が熱い。 </ p>

Добавление автора и описания

Многие элементы <meta> включают атрибуты name и content:

name указывает тип метаэлемента; какой тип информации он содержит.
content определяет фактическое мета-содержимое.

Два таких метаэлемента, которые полезно включить на страницу, определяют автора страницы и дают краткое описание страницы. Давайте посмотрим на пример:

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

Указание описания, включающего ключевые слова, относящиеся к содержанию вашей страницы, полезно, поскольку оно может привести к тому, что ваша страница будет выглядеть выше в релевантных поисках, выполняемых в поисковых системах (такие действия называются Поисковая оптимизация , или же SEO .)

Активное обучение: описание использования в поисковых системах

Описание также используется на страницах результатов поисковой системы. Давайте пройдем упражнение, чтобы изучить это

Перейти к главная страница Сети разработчиков Mozilla ,
Просмотр источника страницы (щелкните правой кнопкой мыши и удерживая клавишу Ctrl на странице, выберите « Просмотр источника страницы» в контекстном меню).
Найдите метатег описания. Это будет выглядеть примерно так (хотя со временем может измениться): <meta name = "description" content = "Сайт MDN Web Docs предоставляет информацию о технологиях Open Web, включая HTML, CSS и API для веб-сайтов и прогрессивной сети. приложения. ">
Теперь поищите «MDN Web Docs» в вашей любимой поисковой системе (мы использовали Google). Вы заметите содержание элемента <meta> и <title>, используемое в результатах поиска - это определенно стоит иметь!

Примечание . В Google вы увидите несколько соответствующих подстраниц веб-документов MDN, перечисленных ниже главной ссылки на главную страницу - они называются ссылками сайта и настраиваются в Инструменты Google для веб-мастеров - способ улучшить результаты поиска вашего сайта в поисковой системе Google.

Примечание . Многие функции <meta> больше не используются. Например, элемент <meta> ключевого слова (<meta name = "Keywords" content = "fill, in, your, Keywords, Here">) - который должен предоставить ключевые слова для поисковых систем, чтобы определить релевантность этой страницы для различных условия поиска - игнорируются поисковыми системами, потому что спаммеры просто заполняли список ключевых слов сотнями ключевых слов, смещая результаты.

Путешествуя по сети, вы также найдете другие типы метаданных. Многие функции, которые вы видите на веб-сайтах, являются частными разработками, предназначенными для предоставления определенным сайтам (например, сайтам социальных сетей) конкретной информации, которую они могут использовать.

Например, Открыть график данных это протокол метаданных, который Facebook изобрел, чтобы предоставлять более богатые метаданные для веб-сайтов. В исходном коде MDN Web Docs вы найдете это:

Одним из следствий этого является то, что когда вы ссылаетесь на MDN Web Docs на Facebook, появляется ссылка вместе с изображением и описанием: более богатый опыт для пользователей.

У Twitter также есть свои собственные аналогичные собственные метаданные, которые имеют аналогичный эффект, когда URL-адрес сайта отображается на twitter.com. Например:

Добавление пользовательских значков на ваш сайт

Чтобы еще больше обогатить дизайн своего сайта, вы можете добавить ссылки на пользовательские значки в свои метаданные, и они будут отображаться в определенных контекстах. Наиболее часто используемым из них является favicon (сокращение от «значок избранного», относящийся к его использованию в списках «избранное» или «закладки» в браузерах).

Скромный фавикон существует уже много лет. Это первая иконка этого типа: 16-пиксельная квадратная иконка, используемая в нескольких местах. Вы можете видеть (в зависимости от браузера) значки избранного, отображаемые на вкладке браузера, содержащей каждую открытую страницу, и рядом с закладками на панели закладок.

Фавикон может быть добавлен на вашу страницу:

Сохранение в том же каталоге, что и индексная страница сайта, в формате .ico (большинство браузеров поддерживают значки в более распространенных форматах, таких как .gif или .png, но использование формата ICO обеспечит его работу еще в Internet Explorer 6). .)
Добавление следующей строки в ваши HTML <Голова> блок для ссылки на него: <link rel = "ярлык" href = "favicon.ico" type = "image / x-icon">

Вот пример значка в панели закладок:

Есть много других типов значков, которые следует учитывать и в наши дни. Например, вы найдете это в исходном коде домашней страницы MDN Web Docs:

<! - iPad третьего поколения с дисплеем Retina высокого разрешения: -> <link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "https://developer.cdn.mozilla.net /static/img/favicon144.a6e4162070f4.png "> <! - iPhone с дисплеем Retina с высоким разрешением: -> <link rel =" apple-touch-icon-precomposed "sizes =" 114x114 "href =" https: //developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png "> <! - iPad первого и второго поколения: -> <link rel =" apple-touch-icon-precomposed "размеры = "72x72" href = "https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> <! - устройства, не поддерживающие Retina для iPhone, iPod Touch и Android 2.1+: - > <link rel = "apple-touch-icon-precomposed" href = "https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> <! - основной значок -> < link rel = "ярлык" href = "https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

В комментариях объясняется, для чего используется каждый значок - эти элементы охватывают такие вещи, как предоставление хорошего значка с высоким разрешением, который можно использовать при сохранении веб-сайта на домашнем экране iPad.

Не стоит слишком беспокоиться о реализации всех этих типов значков прямо сейчас - это довольно продвинутая функция, и вы не должны будете знать об этом для прохождения курса. Основная цель здесь - дать вам знать, что это такое, на случай, если вы столкнетесь с ними во время просмотра исходного кода других сайтов.

Примечание. Если ваш сайт использует Политику безопасности контента (CSP) для повышения своей безопасности, эта политика применяется к значку. Если вы столкнулись с проблемами при загрузке значка, убедитесь, что Content-Security-Policy заголовке сообщения директива img-src не мешает доступ к нему.

Применение CSS и JavaScript к HTML

Почти все сайты, которые вы будете использовать в наши дни, будут использовать CSS чтобы они выглядели круто, и JavaScript для обеспечения интерактивных функций, таких как видеоплееры, карты, игры и многое другое. Они чаще всего применяются к веб-странице с использованием <Ссылка> элемент и <Скрипт> элемент соответственно.

<Ссылка> Элемент всегда идет внутри головы вашего документа. Это принимает два атрибута, rel = "stylesheet", который указывает, что это таблица стилей документа, и href, который содержит путь к файлу таблицы стилей:
<link rel = "stylesheet" href = "my-css-file.css">
<Скрипт> стихия не должна идти в голову; на самом деле, часто лучше поместить его внизу тела документа (непосредственно перед закрывающим тегом </ body>), чтобы убедиться, что весь HTML-контент прочитан браузером, прежде чем он попытается применить JavaScript к это (если JavaScript пытается получить доступ к элементу, который еще не существует, браузер выдаст ошибку.)
<script src = "my-js-file.js"> </ script>
Примечание . Элемент <script> может выглядеть как пустой элемент, но это не так, и поэтому ему нужен закрывающий тег. Вместо того, чтобы указывать на внешний файл сценария, вы также можете поместить свой сценарий в элемент <script>.

Активное обучение: применение CSS и JavaScript к странице

Чтобы начать это активное обучение, возьмите копию нашего мета-example.html , script.js а также style.css файлы и сохраните их на локальном компьютере в том же каталоге. Убедитесь, что они сохранены с правильными именами и расширениями файлов.
Откройте файл HTML как в браузере, так и в текстовом редакторе.
Следуя приведенной выше информации, добавьте <Ссылка> а также <Скрипт> элементы вашего HTML, так что ваши CSS и JavaScript применяются к вашему HTML.

Если все сделано правильно, когда вы сохраните HTML и обновите браузер, вы увидите, что все изменилось:

JavaScript добавил пустой список на страницу. Теперь, когда вы щелкаете в любом месте списка, появится диалоговое окно с просьбой ввести текст для нового элемента списка. Когда вы нажимаете кнопку OK, новый список будет добавлен в список, содержащий текст. Когда вы нажимаете на существующий элемент списка, появляется диалоговое окно, позволяющее вам изменить текст элемента.
CSS привел к тому, что фон стал зеленым, а текст стал больше. Он также стилизовал часть контента, который JavaScript добавил на страницу (красная полоса с черной рамкой - это стиль, который CSS добавил в список, сгенерированный JS).

Примечание . Если вы застряли в этом упражнении и не можете применить CSS / JS, попробуйте проверить наш CSS-и-js.html пример страницы.

Установка основного языка документа

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык своей страницы. Это можно сделать, добавив атрибут lang на открывающий тег HTML (как видно на мета-example.html и показано ниже.)

Это полезно во многих отношениях. Ваш HTML-документ будет более эффективно проиндексирован поисковыми системами, если его язык установлен (например, позволяет правильно отображаться в результатах, зависящих от языка), и он полезен для людей с нарушениями зрения, использующих программы чтения с экрана (например, слово «шесть» существует на французском и английском языках, но произносится по-разному.)

Вы также можете установить подразделы вашего документа, которые будут распознаваться как разные языки. Например, мы могли бы сделать наш раздел японского языка распознаваемым как японский, например, так:

<p> Японский пример: <span lang = "ja"> ご飯が熱い。 </ span>. </ p>

Эти коды определяются ISO 639-1 стандарт. Вы можете найти больше о них в Языковые теги в HTML и XML ,

Резюме

Это знаменует собой конец нашего краткого тура по HTML-главе - здесь вы можете сделать гораздо больше, но на этом этапе исчерпывающий тур будет скучным и запутанным, и мы просто хотим дать вам представление о самых распространенных вещах. вы найдете там сейчас! В следующей статье мы рассмотрим основы HTML-текста.

В этом модуле

Что такое HTML голова?
Что такое HTML голова?

ТРАНСПОРТ ДНЕПРОПЕТРОВСКА - Информационный портал