Для чего служат в html символы head title title head

Для чего служат в html символы head title title head

Определяет заголовок документа. Элемент не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 1). Допускается использовать только один тег на документ и размещать его в контейнере .

Рис. 1. Вид заголовка в браузере Firefox

Синтаксис

Закрывающий тег

Атрибуты

HTML5 IE Cr Op Sa Fx

     
.
  

Примечание

Тег выполняет множество задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок страницы.

• По тексту заголовка пользователь получает дополнительную информацию, что это за сайт, на котором он находится и как называется текущая страница. Не стоит думать, что достаточно в документе указать логотип сайта и проигнорировать заголовок, ведь посетитель может свернуть окно. В свернутом виде заголовок также отображается на кнопках панели задач, поэтому можно легко ориентироваться, с каким сайтом в данный момент работать, а не перелистывать их по очереди.
• Большинство браузеров поддерживают возможность сохранения веб-страницы на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием заголовка документа. Если в тексте заголовка содержатся символы недопустимые в имени файла (\ / : * ? » < >|), они будут проигнорированы или автоматически заменены другими дозволенными символами.
• При сохранении в разделе браузера «Избранное», адрес текущей страницы с ее заголовком помещается в список предпочитаемых ссылок. Поскольку этот список, как правило, хранится в виде отдельных файлов, к их именам также прилагается уже вышеописанное правило.
• В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Интересно написанный заголовок, содержащий ключевые слова, привлечет больше внимания посетителей и увеличит шансы на то, что сайт посетит больше людей.

Статьи по теме

• Введение в HTML
• Синтаксис HTML5
• Теги заголовка документа
• Элемент title

HTML для начинающих

Здесь Вы найдете англоязычный источник этого документа. Точность и полнота перевода не гарантируется — текст был подвергнут авторской переработке. Просто мы попытались рассказать как надо и как не надо писать документы в HTML. Оригинал этого документа находиятся:
http://www.machaon.ru/digest/beght_r1.html

Итак, это — учебник по созданию документов в HTML

• Что сюда не входит
• Создание документа в HTML
  • Пример документа в HTML
  • Основные элементы
    • Заголовки документов
    • Заголовки разделов документов
    • Абзацы
    • URL
    • Обращение к определенным разделам других документов
    • Соединения с разделами текущего документа
    • Списки
      • Ненумерованные списки
      • Нумерованные списки
      • Списки определений
      • Вложенные списки
      • Логические стили
      • Физические стили
      • Прерывание стороки
      • Горизонтальна линия
      • Внутренние рисунки
      • Если Browsers не поддерживает рисунки

      Что сюда не входит

      При написании этого курса мы предполагали, что Вы имеете: По крайней мере начальные знания о том, как использовать NCSA Mosaic или любой другой Web browser (например, Netscape). Общее понимание, как работают Web-сервер и Web-browser Доступ к Web-серверу, на котором Вы хотели бы создавать HTML-документы. Желание создавать HTML-документы для личного использования.

      Создание документа в HTML

      В HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе (например, Emacs или vi на UNIX машинах, или любом редакторе на IBM PC).

      Пример документа в HTML

      Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы: Собственно документ Главы, параграфы, пункты, подпункты Абзацы.

      Для каждого из этих элементов в HTML существуют определенные стили, описывающие в каком виде пользователь увидит текст на экране. Пусть мы создали файл minihtml.html:

        
      Глава 1
       
      Параграф 1.
       Добро пожаловать в HTML! Здесь мы расскажем, как надо и как не надо писать гипертексты. 
      Параграф 2.
        

      Итак, Вы уже поняли, что: Заголовок документа начинается с . Заголовок первого уровня (Главы) выделится символами

      и

      ) Заголовоки последующих уровней (параграфы, пункты, подпункты и т.п.) — символами и ), где x — числа 2, 3, . Абзац — символами

      (В версиях HTML, действующих сейчас, символа

      не существует! НО! Он может появится в последующих версиях!)

      NOTE: HTML не различает, какими буквами набраны символы форматирования: равносильно или . Не все стили поддержаны всеми WWW-browsers. Если browser не поддерживает стиль, то он его игнорирует. (Поэтому не страшно если Вы уже сейчас начнете пользоваться при форматировании абзацев символом. Ниже мы более подробно остановимся на этом вопросе.)

      Основные элементы

      Основной текст отделяется от сопроводительного символами:

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

      Каждый HTML-документ должен иметь заголовок, он показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске). Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Практически во всех browsers заголовок документа виден в верхней части экрана (окна).

      Для выделения заголовка служат символы:

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

      HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом — размером и толщиной букв. Первый заголовок в каждом документе должен быть выделен . Синтаксис заголовков: Текст заголовка где x — число от 1 до 6, определяющее уровень заголовка.

      Абзацы

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

      Параграф 1.

      Добро пожаловать в HTML! Здесь мы расскажем, как надо и как не надо писать гипертексты.

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

      Соединение с другими документами

      URL

      В этой главе был использован материал, подготовленный и доступный полностью на www.frisbee.da.ru. Мы выражаем глубокую благодарность авторам URL-руководства.

      Итак -URL это абревиатура от Uniform Resource Locator. В него входит, кроме названия файла и директории: сетевой адрес машины и метод доступа к файлу.С помощью URL можно запускать удаленные программы, и передавать им значения. На этом принципе построены шлюзы в другие интернетовские сервиса: finger, archie, . Здесь представлены несколько наиболее часто используемых типов URL. Допустим файл с именем «online15.zip» лежит на ftp сервере ftp.simtel.ru в директории /pub/doc/services/ тогда URL этого файла будет выглядeть так: file:// ftp. simtel. ru/ pub/ doc/ services/ online15.zip URL директории в которой лежит файл: file://ftp.simtel.ru/pub/doc/services/ а URL корневой директории ftp сервера ftp.simtel.ru выглядит вот так: file://ftp.simtel.ru/

      Gopher URL’s не так разнообразны, как файловые. Это связано с ограниченностью этого сервиса. Для того что бы описать, например, gopher сервер узла gopher.kiae.su необходим URL: gopher://gopher.kiae.su/

      Некоторые gopher-сервера могут находиться на нестандартном номере порта (по умолчанию обычно используется 70 порт) тогда он должен указываться: gopher://gopher.banzai.edu:1234/, где 1234 — номер порта.

      Первый — это полный URL, а второй — частичный. Частичный URL указывает на документ который находится на том же сервере и в тойже директории, что и документ в котором встречается эта ссылка. Более полную информацию об URL Вы можете получить, обратившись в:

      • WWW Names and Addresses, URIs, URLs, URNs
      • A Beginner’s Guide to URLs

      Обращение к определенным разделам других документов

      Гиперссылки могут также использоваться для соединения с определенными разделами документов. Предположим, мы хотим соединить документ А с первой главой документа В, для чего нам необходимо создать именнованную гиперссылку в документе B. Здесь вы можете увидеть Главу 1&lt/a> Текст первой главы.

      Теперь «кликнув» в слово «Главы 1» в документе А, вы переходите непосредственно в Главу 1 в документе B.

      Соединения с разделами текущего документа

      Дополнительные возможности форматирования

      Выше было описано, как создавать простые HTML-документы. Для более сложных документов, HTML имеет некоторые дополнительные возможности форматирования.

      Списки

      HTML поддерживает ненумерованные, нумерованные списки и списки определений.

      Ненумерованные списки

      • список пунктов

      • яблоки
      • бананы

      Нумерованные списки

      1. апельсины
      2. персики
      3. виноград

      Browser автоматически нумерует элементы такого списка.

      Списки определений

      Список определений обычно состоит из чередования термина и определения . Обычно Web browsers определения располагает на новой строке. Приведем пример списка определений:
      NCSA
      NCSA (National Center for Supercomputing Applications).
      CTC
      CTC (Cornell Theory Center).
      

      Вложенные списки

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

      Приведем пример вложенных списков:

      Авторский стиль редактирования

      Как мы уже говорили выше, в общем случае, текст документа формируется browser, игнорируя пробелы и переносы строк. Используя можно описать в тексте заданный авторский стиль. (То есть пробелы и пустые строки показаны как пробелы и пустые строки, и строки будут прерываться там же что и в исходном HTML-файле.) Это полезно, например, для изображения программ:

      #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm *

      Адреса

      используется, чтобы определить автора документа и способы контакта c ним (например, e-mail адрес). Обычно это последний пункт в файле.

      Например, последняя строка этого документа выглядит:

      Введение в HTML/ НИИЯФ МГУ/ lenka@srdlan.npi.msu.su

      Внимание: НЕ используется для почтового адреса.

      Стили

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

      Зачем существуют два стиля, если они могут дать одинаковый результат на экране? В качестве ответа на этот вопрос сошлемнся на аксиому: «Доверьтесь вашему browser.»

      В идеале, в SGML, содержание отделяется от заглавия. Таким образом, SGML определяет строку как заголовок, но не определяет, что заголовок должен быть написан, например, жирным шрифтом с размером букв 24 пункта, и должен быть расположен в верхней части страницы. Преимущество этого подхода (это подобно в концепции стиля в большинстве текстовых процессоров) — в том, что если Вы решаете заменить стиль заголовка — все, что Вы должны сделать — это измененить определение заголовка в Web browser.

      Другое преимущество стилей в том, что, например, удобнее определить что — нибудь как чем помнить, каким шрифтом надо описывать заголовок. Это же истинно и для отдельных символов. Например, рассмотрим . Большинство browsers рассматривают это как жирный шрифт в тексте. Однако, возможно, что читатель предпочел бы что этом разделе это выделялось, например, другим цветом. Таким образом, стили дают пользователю большую свободу в выборе шрифтов.

      Логические стили

      • служит для описания определений.
      • служит для выделения слов. (Это выделенное слово.)
      • служит для выделения заголовков книг, фильмов, цитат и т.п. (Это цитата )
      • служит для выделения программных кодов, текстов программ и т.п. Изображается шрифтом фиксированной ширины. (The header file)
      • используется для ввода с клавиатуры пользователя. Может быть изображено жирным шрифтом (но в большинстве browser изображается специальным шрифтом). (Введите passwd )
      • используется для машинных сообщений. Изображается шрифтом фиксированной ширины. ( Segmentation fault: Core dumped. )
      • служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом (Это очень важно)
      • используется для символьных переменных. (Это переменная .)

      Физические стили

      Существуют физические способы выделения — автор задает стиль написания текста, описывая шрифт в исходном HTML-документе.

      Вы можете задать:
      , — жирный шрифт (это жирный шрифт)
      , — наклонный шрифт (это наклонный шрифт)
      , — фиксированный шрифт (шрифт заданной ширины) (это fixed шрифт)

      Специальные символы

      Полное описание использования различных символов Вы можете найти в ЦЕРНЕ.

      ЗАМЕЧАНИЕ:Специальные символы чувствительны к регистру: НЕЛЬЗЯ использовать & LT; вместо & lt;.

      Прерывание строки

      Используя Вы можете перейти на новую строку, не начиная нового абзаца (в большинстве browser абзацы выделяются дополнительными пустыми строками).

      Например:
      Институт Ядерной Физики Московского Государственного Университета

      Институт Ядерной Физики
      Московского Государственного Университета

      Горизонтальная линия

      Используя Вы можете разделить текст горизонтальной чертой:

      Внутренние рисунки

      Большинство Web browsers могут показывать рисунки X Bitmap (XBM) или GIF формата вместе с текстом.

      Поскольку каждый рисунок занимает много времени на отображение на экране (что замедляет показ документа) то мы не рекомендуем Вам включать слишком большое количество или чрезмерно большие по размеру рисунки в Ваш HTML-документ.

      Чтобы включить рисунок, надо описать гиперссылку на него:

      где image_URL — URL .gif или .xbm файла, содержащего рисунок. Таким образом, синтаксис ссылки на рисунок аналогичен синтаксису гиперссылки HREF.

      Автоматически, рисунок выравнивается по нижнему краю сопровождающего его текcта, но Вы можете задавать взаимное расположение рисунка и текста:

      — это выравнивание по нижнему краю (делается browser по умолчанию).

      — это выравнивание по верхнему краю.

      Форматирование положения рисунка задается включением в гиперссылку пункта «ALIGN 1″>

      Если Browsers не поддерживает рисунки

      Некоторые WWW-browsers, (например, используемые на VT100-терминалах) не могут показывать рисунки. Такие пользователи смогут увидеть только текст, заданный в пункте гиперссылки «ALT = «. Сопроводительный текст должен быть включает в кавычки. Например:

      В этом случае пользователь lynx увидит только текст «logo.gif»:

      Внешние рисунки, звуки и мультипликация

      Если Вы не хотите, чтобы рисунок замедлял загрузку основного WWW-документа, Вы можете поместить рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам должен решить — смотреть или не смотреть ему этот рисунок:

      Рассмотрим более длинный пример HTML-документа:

      • смородина
      • черника

      Дополнительная информация

      Это только введение в HTML. Ниже мы приведем ссылки на WWW-документы, в которых Вы получите более полную информацию.

      За дополнительной информацией Вы можете обратиться в:

      • Composing Good HTML
      • CERN’s style guide for online hypert
      • How to Write HTML Files
      • Introduction to HTML
      • The HTML Quick Reference Guide Dan Connolly’s HTML Design Notebook .

      Базовая структура HTML документа — Основы современной верстки

      Как театр начинается с вешалки, так и любой HTML-документ начинается с базовой структуры. Она включает в себя теги, которые есть в любом HTML-файле. Эти теги и служебная информация нужны браузеру для корректного отображения информации.

      Взглянем на базовую структуру любого HTML-документа:

        lang="ru">  charset="UTF-8"> Моя первая страница   

      Этот набор кажется не очень большим, но браузеру он сообщает множество полезной информации. В этом уроке разберемся с каждой строчкой этой структуры.

      DOCTYPE

      Первая конструкция в любом HTML-документе — элемент . Он не относится к тегам и никаким образом не может отображаться на странице. Его задача — указать браузеру, какой стандарт HTML используется в этом документе. Сейчас это везде стандарт HTML5. Записывается он следующим образом:

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

      Парный тег html

      Тег является основой основ. Именно внутри него располагается вся информация. Благодаря этому тегу браузер понимает, где начинается контент, который необходимо обработать как HTML.

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

      В качестве значения атрибут lang принимает знакомые всем коды языков. Для русского — lang=»ru» , для английского — lang=»en» , для немецкого — lang=»de» .

      Парный тег head

      Тег служит для хранения служебной информации. Здесь возможны самые разные сочетания тегов, которые подсказывают браузеру название страницы, описание, ключевые слова и так далее. Такая информация называется метаинформацией. В современном вебе она отвечает не только за служебную информацию для браузера, но и активно используется при продвижении сайта. Поисковые системы считывают всю эту информацию и на основе множества алгоритмов определяют место сайта при разных поисковых запросах.

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

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

      Метаинформация

      Метатег . Он принимает множество разных атрибутов, с которыми вы познакомитесь при создании своих сайтов. В настоящее время важным является метатег с атрибутом charset . Он позволяет установить кодировку документа.

      Кодировка — таблица символов. В ней каждый символ имеет уникальный код, благодаря чему программы, в том числе и браузеры, могут одинаково отображать один и тот же текст. У разных пользователей может стоять различная кодировка по умолчанию. Это приводит к тому, что у некоторых пользователей текст может отображаться в виде «кракозябр», хотя у вас он будет отображаться правильно. Универсальной кодировкой, которая содержит большинство необходимых символов из разных языков, является кодировка UTF-8 . Именно ее рекомендуется устанавливать в качестве значения атрибута charset . Теперь браузер будет отображать все символы именно в этой кодировке.

       charset="UTF-8"> 

      Заголовок страницы

      На любом веб-сайте вы можете заметить заголовок, который отображается на вкладке вашего браузера. Например, на странице курса «Основы современной верстки» вкладка в браузере Google Chrome выглядит следующим образом:

      Для указания заголовка страницы используется специальный парный тег , внутри которого указывается нужная информация.

       Моя первая страница 

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

      После тега в документе указывается парный тег , который является «телом» всей страницы. Именно здесь размещается вся информация, которая будет выведена на странице.

      Используем один из примеров прошлого урока и добавим все недостающие теги.

      src="/logo.png"alt="Логотип">id="menu">

    • href="/">Главная
    • href="/about">О нас
    • href="/contacts">Контакты

      Чтобы полностью соответствовать всем стандартам HTML, добавим необходимую базовую структуру документа.

      lang="ru">charset="UTF-8">Моя первая страницаsrc="/logo.png"alt="Логотип">id="menu">

    • href="/">Главная
    • href="/about">О нас
    • href="/contacts">Контакты

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

      Самостоятельная работа

      Создайте базовую структуру документа и попробуйте разные варианты текста внутри тега . Можете попробовать добавить туда даже эмодзи и посмотреть, как браузер выведет такой заголовок

      Дополнительные материалы

      

      Остались вопросы? Задайте их в разделе «Обсуждение»

      Вам ответят команда поддержки Хекслета или другие студенты

      Об обучении на Хекслете

      • Статья «Как учиться и справляться с негативными мыслями»
      • Статья «Ловушки обучения»
      • Статья «Сложные простые задачи по программированию»
      • Урок «Как эффективно учиться на Хекслете»
      • Вебинар «Как самостоятельно учиться»

      Открыть доступ

      Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

      • 130 курсов, 2000+ часов теории
      • 1000 практических заданий в браузере
      • 360 000 студентов

      Наши выпускники работают в компаниях:

      Что внутри «head»? Метаданные в HTML

      Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

      • заголовок (title) страницы
      • ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
      • ссылки на иконки
      • другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)

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

      Предварительные требования:	Базовое знакомство с HTML , описанное в Начало работы с HTML.
      Задача:	Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ.

      Что такое ?

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

      Содержимое , в отличие от содержимого элемента , не отображается на странице. Задача — хранить метаданные документа. В приведённом выше примере совсем небольшой:

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

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

      Название страницы (title)

      Мы уже видели, как работает элемент : его используют для добавления заголовка (названия страницы) в документ. Элемент (en-US) тоже иногда называют заголовком страницы. Но это разные вещи!

      • Элемент (en-US) виден на странице, открытой в браузере, — его используют один раз на странице, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
      • Элемент — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого.

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

      1. Чтобы приступить к активному изучению, скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами:
         1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
         2. Нажмите на странице кнопку «Raw», нажмите Файл > Сохранить Как. в меню браузера и выберите папку для сохранения.
      2. Откройте файл в браузере. Вы увидите что-то вроде этого: Теперь должно стать совершенно ясно, в чём разница между и !
      3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!

      Содержимое элемента используется и в других местах. Например, при добавлении страницы в избранное (Bookmarks > Bookmark This Page в Firefox), текст из предлагается в качестве названия закладки.

      

      Текст из также появляется в результатах поиска, как мы скоро увидим.

      Метаданные: Элемент

      Указываем кодировку текста документа

      В заголовке примера выше есть следующая строка:

      meta charset="utf-8" /> 

      В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

      

      Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:

      

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

      Активное изучение: экспериментируем с символьными кодировками

      Чтобы проверить это, вернитесь к HTML из примера (странице title-example.html), поменяйте meta charset на ISO-8859-1 и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано «рис горячий»):

      p>Пример на японском: ご飯が熱い。p> 

      Указываем автора и описание

      У элементов часто есть атрибуты name и content :

      • name — тип элемента, то есть какие именно метаданные он содержит.
      • content — сами метаданные.

      Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:

      meta name="author" content="Крис Миллс" /> meta name="description" content="Задача MDN — в том, чтобы обучить новичков всему тому, что нужно им для разработки веб-сайтов и приложений." /> 

      По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

      Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.

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

      Описание из используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.

      1. Перейдите на главную страницу Mozilla Developer Network.
      2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
      3. Найдите тег meta с описанием. Он выглядит так:

      meta name="description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox." /> 

      

      Примечание: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.

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

      Другие виды метаданных

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

      Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:

      meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png" /> meta property="og:description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox." /> meta property="og:title" content="MDN Web Docs" /> 

      Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия _(User eXperience, UX)_.

      

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

      meta name="twitter:title" content="MDN Web Docs" /> 

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

      Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

      

      Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.

      Чтобы добавить на страницу favicon:

      1. Сохраните изображение в формате .ico (многие браузеры поддерживают и в более привычных форматах, таких как .gif или .png ) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
      2. Добавьте ссылку на иконку в документа:

      link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 

      Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:

      link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png" /> link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png" /> link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png" /> link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png" /> link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png" /> 

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

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

      Подключение CSS и JavaScript

      Современные сайты используют CSS, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через JavaScript: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент , а скрипты — через элемент .

      link rel="stylesheet" href="my-css-file.css" /> 

      script src="my-js-file.js"> script> 

      Активное изучение: добавляем на страницу CSS и JavaScript

      1. Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
      2. Откройте HTML в браузере и текстовом редакторе.
      3. Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов и .

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

      

      • JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
      • CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.

      Примечание: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.

      Основной язык HTML страницы

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

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

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

      p>Пример на японском: span lang="ja">ご飯が熱い。span>.p> 

      Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.

      Заключение

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

      В этом модуле

      • Начало работы с HTML
      • Что такое заголовок? Метаданные в HTML
      • Основы редактирования текста в HTML
      • Создание гиперссылок
      • Углублённое форматирование текста
      • Структура документа и веб-сайта
      • Отладка HTML
      • Разметка письма
      • Структурируем страницу

      Found a content problem with this page?

      • Edit the page on GitHub.
      • Report the content issue.
      • View the source on GitHub.

      This page was last modified on 3 авг. 2023 г. by MDN contributors.

      Your blueprint for a better internet.

      Читать:

      Сколько стоит еврофаркоп на камаз