Атрибут content в HTML


Содержание

HTML Мета-теги

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

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

Функции мета-тегов

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

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

Группы метатегов

Мета-теги можно разделить на две основные группы — это NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о веб-документе, его авторе, а также — формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.

Элемент meta принимает следующие атрибуты: content, http-equiv, name, charset и scheme.

Атрибут Описание
Name Имя метатега, также косвенно устанавливает его предназначение. Примеры: include, keywords, description, author, revised, generator и др.
content Устанавливает значение атрибута, заданного с помощью name или http-equiv.
scheme (устарел) Указывает полезную информацию о схеме или название самой схемы, которая должна быть использована для интерпретации значения свойства (то есть значения атрибута «content»). Не применяется в HTML5.
charset Новый атрибут, показывает кодировку документа в HTML5. Пример:
http-equiv Формирует заголовок страницы и определяет его обработку. Как правило, управляет действиями браузеров и используется для формирования информации, выдаваемой обычными заголовками. Например HTTP-EQUIV может использоваться для управления кэшированием, обновлением страницы, автоматической загрузки другой страницы.

Группа значений атрибута NAME

«keywords» (ключевые слова)

Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» — не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.

Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.

HTML-код с «keywords» :

«description» (описание страницы)

Description используется при создании краткого описания конкретной страницы Вашего сайта. Практически все поисковые системы учитывают его при индексации, а также при создании аннотации в выдаче по запросу. При отсутствии «description» поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике, поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description» :

Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

HTML-код с «author» :

«Robots»

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

  • index — страница должна быть проиндексирована;
  • noindex — страница не индексируется;
  • follow — гиперссылки на странице учитываются;
  • nofollow — гиперссылки на странице не учитываются
  • all — включает значения index и follow, включен по умолчанию;
  • none — включает значения noindex и nofollow.

HTML-код с «robots» :

Группа значений атрибута HTTP-EQUIV

«Content-Type»

Content-Type определяет тип документа и его кодировку.

HTML-код с «Content-Type» :

В HTML5 указание кодировки упрощено:

«refresh»

Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).

HTML-код с «refresh» :

Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт wm-school.ru. Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся.

«Content-Language»

HTML-код с «content-language» :

В HTML5 указание языка упрощено:

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

Итоговое задание [10-14]

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

Пришло время повторить изученное и выполнить четыре несложных задания:

Ключевые слова

С помощью одинарного тега задайте ключевые слова: «HTML,CSS,JavaScript» для текущей веб-страницы.

Индексация веб-страницы

С помощью одинарного тега разрешите индексацию Web-страницы поисковыми машинами, а переход по ссылкам запретите.

Автоматическая перезагрузка страницы

С помощью одинарного тега meta назначте автоматическую перезагрузку текущей веб-страницы через 30 сек.

Все о мета тегах

Мета теги используются для описания свойств HTML документа и должны находится в рамках тега HEAD. Если в документе используется тег TITLE, то мета теги рекомендуется вставлять в документ после него.

Мета теги имеют очень широкую функциональную направленность, но многое еще не стандартизировано или находится на стадии разработки.

Мета теги могут идентифицировать авторство HTML документа, его адрес и как часто он обновляется. Поисковые системы используют мета теги для индексации и формирования заголовков HTML документов.

Мета теги могут влиять на режим отображения HTML документов, хотя сами на экран не выводятся.

Далее будут описаны мета теги, принятые большинством поставщиков услуг и программ для сети интернет.

Мета теги делятся на две группы: NAME и HTTP-EQUIV.

Мета теги типа NAME содержат текстовую информацию о документе, его авторе и некоторые рекомендации для поисковых машин. Например: Robots, Description, Keywords, Author, Copyright.

Мета теги типа HTTP-EQUIV влияют на формирование заголовка документа и определяют режим его обработки.

Группа информационных мета тегов

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

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

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

Мета тег Description

Мета тег Description — служит для краткого описания странички.

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

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

Желательно чтобы длина описания не превосходила 80 символов. Пример:

Мета тег Document-state

Мета тег Document-state — предназначен для управления индексацией поисковых роботов. Может иметь два значения:

Static — Нет необходимости индексировать эту страницу в будущем.

Dynamic — Индексировать эту страницу регулярно (по умолчанию).

Режим «Static» предназначен для страниц, которые не меняются в принципе. Если содержание вашей страницы периодически меняется, то использовать этот тег необязательно. Пример:

Мета тег Generator

Мета тег Generator — это всего лишь один из «славного» семейства тегов широко используемых генераторами HTML кода в своих целях. Как правило, для владельца сайта эти теги не несут полезной нагрузки.

Мета тег Keywords

Мета тег Keywords используется поисковыми машинами для оценки релевантности.

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

При формировании списка ключевых слов для мета тега Keywords необходимо использовать слова, содержащиеся в тексте документа. Слова, не содержащиеся в тексте, можно использовать в очень небольших количествах, два — три слова. Вставлять их надо в конец списка.

Ключевые слова не должны повторятся в теге Keywords, в крайнем случае, не более двух раз.

В мета теге Keywords имеет смысл использовать не более 10 слов, большее количество релевантности не увеличит.

В Большинстве случаев поисковые машины находят ключевые слова, стоящие во множественном числе (cats), даже если поиск задан в единственном числе (cat). Поэтому рекомендуется в тег Keywords заносить английские существительные во множественном числе.

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

Если документ написан на нескольких языках, можно использовать добавочный атрибут lang для выбора кодировки (смотри описание мета тега Content-Language).

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

Мета тег Resource-type

Мета тег Resource-type — описывает состояние данного документа. Если его значение отлично от “Document”, то поисковые системы не будут его индексировать.

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

Некоторые возможные значения:

Build
Classification
Creation
Document — Принимается по умолчанию.
Formatter
Host
Operator
Random text
Rating
Site-languages
Subject
Template
Version

Мета тег Revisit

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

Пример (приходить раз в неделю):

Мета тег Robots

Мета тег Robots — содержит указания для роботов поисковых машин, собирающих информацию о HTML документах в сети.

Значение свойства Robots может состоять из следующих директив, разделенных запятыми:

Index — эта страница должна быть индексирована.

Noindex — эта страница не должна индексироваться.

Follow — прослеживать гиперссылки на странице.

Nofollow — не прослеживать гиперссылки на странице.

All — = index, follow (принято по умолчанию).

None — = noindex, nofollow.

Тег ничего не меняет в работе робота поисковой машины, так как значение «all» принято по умолчанию.

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

В этом случае можно рекомендовать поисковой машине не индексировать эту страницу, а только отслеживать на ней гиперссылки, что бы проиндексировать остальную часть сайта

При использовании тега, запрещающего отслеживание гиперссылок

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

Мета тег Robots имеет приоритет над директивами управления, заданными в файле robots.txt.

Мета тег Subject

Мета тег Subject используется поисковыми машинами для определения тематики документа. Но до тех пор, пока поисковые системы не согласуют классификационные таблицы, использование этого тега не всегда оправдано.

Мета тег URL

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

Мета тег Content-Language

Мета тег Content-Language — это указание языка документа. Используется поисковыми машинами при индексировании. Хотя большинство из них умеют различать язык по тексту.

Некоторые возможные значения (стандарт [ISO639], [ISO3166]): de, el, en, en-GB, en-US, en-cockney, es, fr, it, i-navajo, ja, he, nl, ru, pt.

В спецификации HTML 4.0 есть альтернативная возможность явного указания языка —

Meta тег Content-Script-Type

Meta тег Content-Script-Type — Определение языка программирования сценариев.

Илон Маск рекомендует:  Что такое код qdom_tree

Некоторые из возможных значений: text/javascript, text/perlscript, text/tcl, text/vbscript.

Если тег Content-Script-Type не используется, то тип языка программирования сценариев, отличный от принятого по умолчанию, должен быть указан непосредственно в каждом теге

Новые структурные теги HTML5

Которые позволяют четко описывать блоки контента

Что такое HTML5?

HTML5 — это новейшая версия языка Hypertext Markup Language (HTML), представляющая собой наиболее радикальную ревизию этого языка за всю его историю. В этой версии появилось множество новых функций в различных областях. К наиболее значимым из них относятся следующие.

  • Встроенные мультимедийные теги для поддержки аудио- и видеоконтента
  • Тег Canvas для рисования контента непосредственно в браузере
  • «Разумные» формы, позволяющие осуществлять такие операции, как валидация посредством использования требуемого атрибута
Совершенствование квалификационных навыков по данной тематике

Данная статья является частью программы «Путь к знаниям» по совершенствованию квалификационных навыков (Knowledge Path). См. Основы HTML5.

Новый набор структурных элементов (тегов) в HTML5 видоизменяет способы структурирования HTML-документов. Новые структурные теги ориентированы на разделение HTML-документа на логические части. Название каждого структурного тега описывает тип контента, для хранения которого предназначен этот тег. Данная статья посвящена подробному описанию этих новых тегов.

История вопроса

В 1989 году Тим Бернерс-Ли (Tim Berners-Lee) создал первый вариант языка HTML с целью преодоления определенных ограничений, которые имелись у существовавших на тот момент методов доступа к информации в Интернете. На начальном этапе существования Интернета ориентирование в нем было сложной задачей. Контент в Интернете представлял собой совокупность отдельных документов, при этом не существовало простого метода навигации по этим документам. И действительно, пользователь должен был знать точный адрес искомого документа и ввести этот адрес вручную. Для решения этой проблемы Бернерс-Ли создал две технологии: протокол HTTP (Hypertext Transfer Protocol) и язык HTML (Hypertext Markup Language).

HTTP — это служебный протокол, с помощью которого Web-серверы доставляют контент. Посмотрите на адресную строку своего Web-браузера. Если ваш браузер показывает полный URL-адрес, то, скорее всего, этот адрес начинается с символов «http://». Эта часть URL-адреса говорит браузеру, протокол какого типа следует использовать при осуществлении запроса к Web-серверу. Когда Web-сервер получает запрос на какой-либо документ, то в большинстве случаев этот документ представлен в формате HTML или преобразуется в этот формат. Именно HTML-документ присылается в браузер, пославший этот запрос.

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

Такое сочетание технологий HTTP и HTML обеспечивает быстрое и простое ориентирование в Интернет-контенте — для осуществления переходов между документами достаточно нажимать мышью на ссылки в тексте. После создания двух вышеупомянутых технологий Бернерс-Ли основал организацию под названием W3C (World Wide Web Consortium). Организация W3C возглавляла разработку первых четырех версий HTML.

Первоначально назначение Интернета состояло в обслуживании простых текстовых документов. Первые браузеры были ориентированы исключительно на текст (другими словами, они не имели никаких затейливых окон — на экране присутствовал только текст). Даже добавление изображений стало весьма значительным достижением — в момент их первого появления. Сегодня люди выполняют в Интернете множество дел — от отправки посланий по электронной почте до просмотра телевизионных программ. Интернет уже превратился в нечто гораздо большее, чем механизм для транспортировки простых текстовых документов. Новые функции и новые способы использования породили новые трудности и новые задачи, для решения которых язык HTML никогда не предназначался.

Организация W3C попыталась решить проблемы сегодняшнего Интернета с помощью стандарта XHTML 2.0 (Extensible Hypertext Markup Language). Однако этот стандарт не получил широкого распространения и к настоящему времени он фактически заброшен. В 2004 году, когда организация W3C концентрировала свои усилия на стандарте XHMTL 2.0, другая организация под названием WHATWG (Web Hypertext Application Technology Working Group) начала разработку стандарта HTML5, который был принят сообществом гораздо благосклоннее, чем стандарт XHTML 2.0. Организация W3C прекратила работы в области XHTML 2.0 и в настоящее время вместе с WHATWG занимается развитием спецификации HTML5.

Поддерживаемые браузеры

На момент написания данной статьи стандарт HTML5 еще не был выпущен официально. Большая часть контента в Web по-прежнему создается в соответствии со спецификацией HTML 4. Тем не менее, некоторые браузеры поддерживают спецификацию HTML5. Ситуация может оказаться непростой, поскольку каждый из этих браузеров способен поддерживать лишь некоторое подмножество функций HTML5. Перед созданием Web-сайта на базе HTML5 проверьте каждый из целевых браузеров на предмет поддержки функций, которые вы собираетесь использовать на своем сайте.

Обновленная декларация doctype

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

Декларация doctype сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

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

Таблица 1. Doctype-декларации и их возможности
Doctype-декларация Возможности Пример
HTML 4.01 strict Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены.
HTML 4.01 transitional Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены.
HTML 4.01 frameset Аналогична декларации HTML transitional, но разрешает использование элементов frameset.
XHTML 1.0 strict Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены.
XHTML 1.0 transitional Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены.
XHTML 1.0 frameset Аналогична декларации XHTML transitional, однако разрешает элементы frameset.
XHTML 1.1 Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков.

К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в листинге 1.

Листинг 1. HTML5-декларация doctype

Декларация должна находиться в самом начале HTML-документа, перед тегом .

Новые структурные теги

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

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

Подход HTML 4

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

Листинг 2. Простая HTML-страница, использующая теги div

Этот подход работает прекрасно; тег div — это превосходный элемент общего назначения. Тем не менее, без рассмотрения атрибута id у каждого тега div трудно сказать, какой раздел документа представляет каждый тег div . Можно приводить доводы в пользу того, что при надлежащем именовании атрибута id его возможностей как индикатора вполне достаточно, тем не менее, использование атрибутов id не является обязательным. Существует множество разновидностей атрибута id , которые могут рассматриваться как одинаково валидные. Сам тег div не содержит указаний на то, какой тип контента ему было поручено представлять.

Подход HTML5

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

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

Остальная часть статьи посвящена описанию каждого из вышеперечисленных тегов. Кроме того, мы рассмотрим целевое использование этих тегов, для чего будем постепенно видоизменять первоначальный пример кода, созданного на базе тега div (см. листинг 2) с целью поэтапного задействования новых структурных тегов HTML5.

Тег header

Тег header предназначен для того, чтобы пометить раздел HTML-страницы как заголовок. В листинге 3 приведен пример кода из листинга 2, но уже с использованием тега header .

Листинг 3. Добавление тега header

Элемент doctype в листинге 3 также был изменен — чтобы показать браузеру, что при отображении страницы он должен использовать HTML5. Во всех последующих примерах предполагается, что мы тоже используем корректный элемент doctype.

Тег section

Тег section предназначен для разбиения контента на существенные блоки. В определенном смысле его применение аналогично разбиению книги на главы. После добавления тега section к примеру кода мы получаем код, показанный в листинге 4.

Листинг 4. Добавление тега section

Тег article

Тег article обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега article к примеру кода мы получаем код, показанный в листинге 5.

Листинг 5. Добавление тегов article

Тег aside

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

Листинг 6. Добавление тега aside

Тег footer помечает содержащийся в нем контент как нижний колонтитул текущего документа. После добавления тега footer к примеру кода мы получаем код, показанный в листинге 7.

Листинг 7. Добавление тега footer

К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.

Тег nav

Контент, содержащийся в теге nav , предназначен для навигационных целей. После добавления тега nav к примеру кода мы получаем код, показанный в листинге 8.

Листинг 8. Добавление тега nav

Итоговый вариант примера

В листинге 9 показан результат замены исходных тегов div новыми структурными тегами HTML5.

Листинг 9. Итоговый вариант примера

Несмотря на то, что в демонстрационных целях этот пример был максимально упрощен, сравнение исходного примера на базе элементов div (листинг 2) с результирующим вариантом (листинг 9) наглядно демонстрирует назначение новых структурных тегов.

Заключение

Новые структурные теги HTML5 описывают контент, который они содержат, и помогают разделить документ на логические разделы. Подобно автору, пишущему книгу, автор документа по-прежнему сможет сам решать, когда и где использовать эти новые элементы в своем документе. Хотя два автора, пишущих одну и ту же книгу, могут выбирать разные способы для разбиения этой книги на главы, использование глав по-прежнему является единообразным подходом к разбиению книг на разделы. Аналогично, хотя два автора некоторой Web-страницы вполне могут выбрать разные структуры, новые структурные элементы HTML5 предоставляют разработчикам Web-страниц новые единообразные возможности, которые не обеспечивались прежними тегами div .

Ресурсы для скачивания

Похожие темы

  • Оригинал статьи: New HTML5 structural tags
  • Новые элементы в HTML5(developerWorks, август 2007 г.). Дополнительные сведения по структурным элементам HTML5.
  • WHATWG: Организация WHATWG — это сообщество, отвечающее за спецификацию HTML5.
  • W3C: Организация W3C создала первую спецификацию HTML, а в настоящее время вместе с WHATWG работает над спецификацией HTML5.
  • HTML5 (Wikipedia): Дополнительные сведения о HTML5.
  • Различия между HTML5 и HTML4 (W3C). Рабочий проект, позволяющий глубже понять различия между HTML 4 и HTML5.
  • Первое знакомство с HTML5 (lynda.com): Чем является HTML5 (и чем не является).

Комментарии

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

Оптимизация для новичков: HTML-теги и атрибуты в SEO

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

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

Теги и атрибуты как составные части языка HTML

Теги и атрибуты составляют основу HTML — языка гипертекстовой разметки. Последовательность тегов и их атрибутов задает структуру документа. Интерпретируя язык разметки, браузер «понимает», о чем страница и как должен отображаться ее контент (текст, картинки, видео).

Теги задают каркас страницы, атрибуты расширяют или модифицируют действия тегов. Они описываются внутри открывающего тега в виде коллекции «имя=»значение»». Например: .

Существует два типа тегов: парные и одиночные. Парные (или контейнерные) теги состоят из пары — открывающий и закрывающий тег . . Одиночные теги состоят лишь из одного открывающего тега. Например, тег .

Стандартно структура HTML-документа содержит такие элементы:

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

Сперва рассмотрим набор тегов, помещающихся в блоке . Они наиболее значимы для специалиста по поисковой оптимизации.

Что такое тег

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

Пример кода:

Где пользователь может увидеть ваш :


Зачем нужны метатеги

Помимо тега , в располагаются теги типа , которые предназначены для браузеров и поисковых систем. Корректное использование метатегов позволяет увеличить привлекательность сниппетов, управлять индексацией страниц. Также позволяет правильно отображать страницы сайта пользователям. Далее рассмотрим метатеги: description, robots, charset, viewport и keywords.

Meta description

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

Пример кода:

Meta robots

Метатег robots служит для указания правил индексирования конкретных страниц сайта и позволяет следовать по гиперссылкам с данных страниц.

Пример кода:

Значение атрибута «name» указывает, что директива актуальна для всех роботов. Вы также можете закрыть доступ только одному из них. Для этого в атрибуте «name» следует указать нужного робота, например, основного робота Google — «googlebot» или Яндекса — «yandex».

Основные значения атрибута content:

  • index — страница доступна для индексации;
  • noindex — запрет добавления страницы в индекс;
  • follow — ссылки на странице доступны к индексации и открыты для передачи ссылочного веса;
  • nofollow — сигнализирует роботу о том, что переходить по ссылкам и передавать ссылочный вес запрещено;
  • all — инструкция, аналогичная «index, follow», противоположная настройка: «none».

Наличие метатега robots в коде сайта не обязательно. Если meta robots отсутствует, страница открыта для индексации и переходить по ссылкам разрешено.

Meta charset

Метатег с атрибутом «charset» указывает на тип кодировки документа. Он применяется для правильного отображения текста страницы браузером. Для операционной системы Windows и кириллицы используют значения атрибута «utf-8» или «windows-1251». Этот метатег следует размещать в самом начале блока до элементов, которые содержат текст, включая тег .

Пример кода:

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

Meta viewport

Метатег «viewport» сообщает браузеру, как следует обрабатывать размеры страницы, изменять ее масштаб под ширину экрана устройства, с которого выполнен переход. Meta viewport — один из пунктов внедрения адаптивного дизайна, когда для всех устройств используется один код с корректировкой по размеру экрана. Для корректного отображения контента сайта на любом устройстве, на всех страницах следует разместить следующий фрагмент кода:

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

Meta keywords

Правильно составленный метатег keywords должен содержать 5-7 ключевых слов, описывающих основное содержание страницы. Раньше он сильно влиял на ранжирование по заданным в нем ключевым словам, но утратил значимость из-за действий недобросовестных вебмастеров и постоянного развития поисковых систем. Тем не менее, для метатега keywords еще не все потеряно. Так, в отчете «Яндекс и Google: факторы ранжирования в 2020 году» от «Ашманов и партнеры» представлен вывод о влиянии метатега на продвижение в Google.

Пример кода:

В блоке также располагаются теги
, которые устанавливают связь данного документа с другими веб-страницами. Рассмотрим такие атрибуты тега «link»: «canonical», «next / prev», «alternate».

Атрибут canonical

Атрибут «rel=»canonical»» используют для решения вопросов с дублирующимся контентом: когда на сайте есть близкие или идентичные по содержанию страницы по разным url. Атрибут canonical указывает поисковым системам, какую из дублирующихся страниц индексировать и показывать в результатах поиска, при этом передавая ей ссылочный вес и другие характеристики дубликатов. Чтобы указать, какая из страниц каноническая, нужно в коде страницы-дубля разместить тег «link» с атрибутом «canonical», где в атрибуте «href» прописать адрес канонической страницы.

Пример кода:

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

Атрибуты next / prev

Появление дублирующегося контента на сайте также может быть связано со страницами пагинации.

Примеры пагинации можно увидеть на страницах интернет-магазинов, где есть категории с большим количеством товаров. Поскольку львиная доля контента таких страниц одинаковая, поисковые системы могу воспринимать их как дубли. Решение проблемы: использовать тег «link» вместе с атрибутами «next» и «prev», которые указывают на то, что рассматриваемые документы — части серии и их следует анализировать в совокупности.

Пример кода:

  • на первой странице пагинации внедряем «link rel=»next»», указывая на следующую страницу серии:
  • на второй и последующих страницах пагинации внедряем «link rel=»next»» и «link rel=»prev»», указывая на следующую и предыдущую страницы в серии:
  • на последней странице пагинации внедряется «link rel=»prev»», указывая на предпоследнюю страницу в серии:

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

Атрибут alternate

Атрибут «rel=»alternate»» используется, чтобы указывать альтернативные версии страниц сайта, например, указывает на разные языковые версии или мобильную версию сайта. С его помощью поисковые системы определяют, какую версию страницы показывать тому или иному пользователю в результатах поиска.

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

  • вместо «xx» указываем код языка (в формате ISO 639-1), «YY» — региона (ISO 3166-1 Alpha 2);
  • URL — абсолютный url альтернативной страницы.

Помните, что информация обо всех существующих версиях должна содержаться в коде каждой из них, то есть в коде каждой страницы должен содержаться собственный атрибут «rel=»alternate» hreflang=»xx-YY»», а также ссылки на все остальные версии.

Сообщить поисковым системам о мобильной версии сайта можно, используя атрибут «media». Как правило, версия для компьютеров размещается в домене www.example.com, а вариант сайта для мобильных устройств — в домене m.example.com.

Таким образом на обычной странице https://www.example.com/page-1 нужно добавить код:

На странице для мобильных устройств https://m.example.com/page-1 следует указать «canonical» на версию для компьютеров:

Оптимизация контента сайта

Видимый пользователю контент сайта помещается между тегами .

Тег HTML — мета теги, информация о странице

Мета тег HTML определяет информацию о веб странице. Теги группы meta называют мета тегами, а содержимое мета тега — метаданными. Метаданные указывают различную техническую информацию о документе, в основном для браузеров и поисковых систем и не видны пользователю на сайте.

Часто используются meta-теги: author, description, keywords, viewport, charset.

Мета теги находятся в области HTML документа (подробнее про ). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.

Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description , viewport , charset . Это будет плюсом для внутренней оптимизации сайта.

Синтаксис

Примеры использования в HTML коде

Основные мета теги

Ниже приведены несколько основных тегов с комментариями по применению и примерами использования.

Meta-тег description

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

Пример использования мета тега description

Meta-тег keywords

Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords .

Пример заполнения мета тега keywords

Meta-тег viewport

Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale — коэффициент масштабирования при первом открытии страницы.

Пример использования мета тега viewport

Мета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства:

Meta-тег charset

Кодировка веб страницы. Наиболее частое значение: «UTF-8».

Пример использования мета тега кодировки charset

Meta тег refresh

Мета тег с атрибутом http-equiv=»refresh» указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.

Пример использования meta http refresh

Поддержка браузерами

Тег
Да Да Да Да Да

Атрибуты

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

Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name.

content-type
default-style
refresh

Устанавливает HTTP заголовок для атрибута content.

Сontent-type — Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше).
Default-style — Предпочтительная таблица стилей.
Refresh — Интервал автообновления страницы.

application-name
author
description
generator
keywords
viewport

Имя мета тега. Как и http-equiv определяет суть мета тега.

Application-name — имя веб приложения, которое представляет страница.
Author — имя автора веб страницы.
Description — краткое описание страницы.
Generator — Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц).
Keywords — ключевые слова страницы.
Viewport — некоторые параметры области просмотра страницы.

Про CSS

Свойство content

С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after , но не менее важную роль в этом играет свойство content .

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

Снеговики в примере добавлены с помощью content для псевдоэлементов, сами снеговики — символы юникода:

Возможные значения свойства:

normal , none — содержимое псевдоэлемента не отображается. Полезно, если нужно скрыть ранее заданный псевдоэлемент.

— текстовый контент. Можно вставлять простой текст и символы юникода, как в примере выше. Для практических целей очень пригодятся разные варианты стрелок. Символы юникода можно найти, например, тут или тут.

Практическое применение — иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, различные варианты буллетов.

Правда, тут появляется проблема лишних запросов к серверу.

  • спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
    Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя;
  • закодировать отдельные картинки в base-64 и вставлять через content: url() ;
  • закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.

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

Закодировать картинку в base64 можно с помощью онлайн-сервисов, например websemantics.co.uk/online_tools/image_to_data_uri_convertor/. Полученный код вставляется в url() с информацией о формате содержимого, например data:image/png;base64 .

Вот так будет выглядеть код для иконки Instagram:

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

Подобным же образом можно вставлять SVG.

Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.

Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.

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

counter-reset задает имя счетчика. counter-increment увеличивает значение заданного счетчика. content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.

attr( ) — это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов href в версии для печати и для разных интересных эффектов.

open-quote , close-quote — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством quotes . Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.

no-open-quote , no-close-quote — значение отключает отображение кавычек, но при этом продолжает учитываться уровень их вложенности.

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

Объявление языка в HTML

Целевая аудитория: HTML кодеры, веб-разработчики (PHP, JSP, и т. д.), менеджеры веб-проектов, а также все, кто хочет лучше понимать, как объявлять язык текста на веб-странице.

Вопрос

Как установить язык содержимого моей HTML страницы?

Краткий ответ

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

Используйте lang атрибут для HTML страниц и xml:lang атрибут для страниц XML. Для XHTML 1.x и документов HTML5 Polyglot используйте оба атрибута вместе.

Используйте языковые тэги из IANA Language Subtag Registry . Вы можете найти тэги также с помощью Language Subtag Lookup.

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

Детали

Основы

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

Обратите внимание, что предпочтительнее использовать html элемент, чем body , так как body элемент не включает в себя текст из head элемента.

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

С некоторыми частями кода у вас могут возникнуть проблемы. Если у вас есть мультиязычный текст в элементе title , вы не сможете разметить текст, содержащий разные языки, потому что title атрибут поддерживает только символы, а не разметку. То же самое относится к нескольким языкам в значениях атрибутов. На текущий момент эффективное решение этой проблемы отсутствует.

Выбор корректного атрибута

Если ваш документ HTML (то есть обрабатывается, как text/html ), используйте lang атрибут для установки языка документа или блока текста. Например, следующий код установит французский языком по умолчанию:

Когда XHTML 1.x или страницы Polyglot обрабатываются, как text/html , используйте оба атрибута lang и xml:lang вместе каждый раз, когда вы хотите объявить язык. Атрибут xml:lang — это стандартный способ объявления языковой информации в XML. Убедитесь, что значения обоих атрибутов идентичны.

Атрибут xml:lang не особо полезен для обработки HTML файлов, но он будет перекрывать значение lang атрибута каждый раз, когда вы обрабатываете документ, как XML. Атрибут lang разрешен синтаксисом XHTML и может быть распознан браузерами. Однако, когда используются другие синтаксические анализаторы XML (например, функция lang() в XSLT), вы не можете полагаться на то, что атрибут lang будет распознан.

Если вы обрабатываете ваш документ, как XML (то есть используете MIME type application/xhtml+xml ), то атрибут lang не нужен, будет достаточно атрибута xml:lang .

Что, если содержимое элемента и значения его атрибутов на разных языках?

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

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

Вместо этого, перенесите языковой атрибут в другой элемент, как показано в данном примере, в котором span элемент наследует en язык по умолчанию, установленный у html элемента.

Что если нет подходящего элемента для того, чтобы прицепить атрибут языка?

Если вы хотите указать язык контента, но вокруг него нет никакой разметки, используйте такой элемент, как span или div . Вот пример:

You’d say that in Chinese as 中国科学院文献情报中心 .

Выбор значений языка

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

Правила создания языковых атрибутов описываются IETF спецификацией, которая называется BCP 47. Помимо описания использования простых тэгов языка таких, как en (английский) или fr (французский), BCP 47 описывает, как сочетать языковые тэги, что позволяет вам указывать региональные диалекты, скрипты и другие варианты, относящиеся к данному языку.

BCP 47 включает в себя, но выходит за рамки ISO списков кодов языков и стран. Чтобы найти подходящий код, вам нужно обратиться к IANA Language Subtag Registry .

Неофициальная утилита Language Subtag Lookup предоставляет удобный фронтенд инструментарий для IANA registry.

Для краткого, но достаточно тщательного ознакомления с синтаксисом тэгов BCP 47, читайте Языковые тэги в HTML и XML . Если необходима помощь в выборе корректного языкового тэга из множества возможных тэгов и комбинаций, смотрите Выбор тэга языка .

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

Указание метаданных о языке аудитории

Если вы хотите создать метаданные, описывающие скорее язык целевой аудитории страницы, чем язык определенной части текста, реализуйте это с помощью отправки сервером информации в HTTP заголовке Content-Language . Если ваша целевая аудитория говорит более, чем на одном языке, HTTP заголовок позволяет вам использовать список языков, разделённых запятыми.

Это пример HTTP заголовка, объявляющего ресурс смесью английского, хинди панджаби языков:

Content-Language: en, hi, pa

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

В прошлом многие люди использовали meta элемент с атрибутом http-equiv со значением Content-Language . Из-за давних путаниц и непоследовательных реализаций этого элемента HTML5 спецификация сделала его несоответствующим стандартам HTML, так что вам больше не следует использовать этот элемент.

Для обратной совместимости, HTML5 описывает алгоритм, с помощью которого язык контента может быть определён из HTTP или meta Content-Language информации при определённых условиях. Как бы то ни было, это только запасной механизм для случаев, когда языковой атрибут отсутствует у html тэга. Если вы используете атрибут языка для html , что следует делать всегда, подобные запасные пути бесполезны.

Для подробной информации о Content-Language в HTTP и meta элементах читайте HTTP и meta для информации о языке .

Различные вещи, которые не относятся к делу

Вероятно, стоит упомянуть ещё несколько моментов, которые не имеют отношения к этой дискуссии.

Первое, невозможно объявить язык с помощью CSS.

Второе, DOCTYPE , с которого должен начинаться любой HTML может содержать то, что выглядит для некоторых людей, как объявления языка. DOCTYPE в примере ниже содержит текст EN, что означает ‘English’. Это, тем не менее, указывает на язык schema (схемы), связанной с данным документом – это никоим образом не указывает на непосредственно язык самого документа.

Третье, иногда люди предполагают, что информация о естественном языке может быть получена из кодировки символов. Тем не менее, кодировка символов не позволяет однозначно идентифицировать естественный язык. Должно быть взаимно однозначное сопоставление между кодировкой и языком, чтобы это сработало, а его нет. Одна кодировка может быть использована многими языками, например Latin 1 (ISO-8859-1) используется и французским, и английским, а ещё многими другими языками. В дополнение, кодировка может отличаться в рамках одного языка, например арабский может использовать ‘Windows-1256’ или ‘ISO-8859-6’ или ‘UTF-8’.

Все эти примеры кодировок спорны, так как весь контент сегодня должен быть создан в UTF-8, который охватывает все, кроме самых редких, языки.

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

То же самое относится к направлению текста. Как и в случае с кодировками, не всегда существует соответствие между языком и текстом, в том числе его направлением. Например, азербайджанский может быть записан справа налево (арабская письменность) и слева направо (латиница и кириллица), соответственно код языка az может относится к обоим вариантам. Дополнительно, разметка направления текста применяет к тексту целый ряд различных значений, в то время, как язык является простым переключателем, который не соответствует поставленным задачам.

HTML :: Тег

Атрибут charset тега

Со служебным тегом (от англ. metadata – метаданные) мы уже кратко знакомились. Он формирует пустой элемент разметки ‘meta’ , который используется для хранения метаданных.

Для сообщения браузеру кодировки документа применяется атрибут charset . О кодировках мы будем говорить отдельно, пока следует запомнить, что если кодировку не задать, то документ может быть не правильно отображен. Поэтому в процессе верстки нужно всегда использовать элемент ‘meta’ и указывать в нем атрибут charset=»utf-8″ . В случае необходимости, разрешается использовать более одного элемента ‘meta’ , но атрибут charset должен задаваться только один раз в одном из элементов ‘meta’ .

Атрибуты name и content тега

Имеются у элемента ‘meta’ и другие атрибуты. Так атрибут name задает имя (регистронезависимое) для пары ‘имя=значение’ . Используется совместно с атрибутом content , который, соответственно, устанавливает значение для данной пары. Разрешается указывать в одном атрибуте content сразу несколько значений, перечисленных через запятую или точку с запятой. Короче, при помощи этих двух атрибутов задается пара ‘имя=значение’ , которая определяется в следующем формате: .

Перечислим некоторые из имен, задаваемых атрибутом name , и соответствующих им значений, указываемых в атрибуте content :

  • «author» – в атрибуте content указывается имя автора;
  • «copyright» – если страница разрабатывалась организацией, то авторство обычно не указывается, а используется название организации;
  • «description» – когда атрибут name имеет такое значение, в атрибуте content приводится краткое описание страницы, которое используется поисковыми машинами для индексации, а также выводе ими аннотации при выдаче по запросу;
  • «document-state» – для этого имени атрибут content может принимать два значения: «static» и «dynamic» ; в первом случае поисковым машинам сообщается, что документ нужно индексировать только один раз и нет необходимости в индексации в дальнейшем; во втором случае от поисковых машин требуется постоянная индексация веб-страницы;
  • «robots» – для этого имени используется ряд значений атрибута content :
    • «index» – роботам разрешается индексировать данную страницу;
    • «noindex» – роботам запрещается индексировать данную страницу; при этом она не попадает в базу поисковой машины и, соответственно, её невозможно будет найти через поисковую систему;
    • «follow» – роботам разрешается переходить по ссылкам на данной странице;
    • «nofollow» – роботам запрещается переходить по ссылкам на данной странице; кроме того, ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PageRank (определяет ‘важность’ страницы);
    • «noarchive» – роботам запрещается кешировать данную страницу;
  • «revisit» – используется для управления частотой индексации веб-страницы в поисковой системе; например, для переиндексации страницы раз в три недели в качестве значения атрибута content следует указать «21» ;
  • «url» – для этого имени атрибут content принимает в качестве значения адрес, по которому робот поисковой системы перенаправляется на другую страницу; это нужно для отмены индексации ‘зеркала’ и генерируемых страниц.

Код с использованием элементов ‘meta’ и его атрибутов показан в примере №1

Пример №1. Использование элемента ‘meta’ и его атрибутов

Значение viewport атрибута name

Отдельно хотелось бы обратить внимание на значение «viewport» атрибута name , которое указывает браузеру мобильного устройства, как обрабатывать размеры страницы и изменять ее масштаб, а также соответствующий ряд значений атрибута content (см. пример №2):

  • «width» – значение задает ширину области просмотра и через знак равно в качестве значений принимает:
    • device-width — ширина области просмотра будет подстраиваться под ширину экрана (значение подходит для большинства случаев);
    • аппаратно-независимые пиксели — задается фиксированная ширина области просмотра в аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 200px — 10 000px (фиксированную ширину применять не рекомендуется!);
  • «height» – значение задает высоту области просмотра (используется редко) и через знак равно в качестве значений принимает:
    • device-height — высота области просмотра будет подстраиваться под высоту экрана (значение подходит для большинства случаев);
    • аппаратно-независимые пиксели — задается фиксированная высота области просмотра в аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 223px — 10 000px (фиксированную высоту применять не рекомендуется!);
  • «initial-scale» – устанавливает соответствие для пикселей CSS (это те пиксели, которые мы задаем в таблицах стилей) и аппаратно-независимых пикселей мобильного устройства (это виртуальные пиксели, которые являются результатом масштабирования аппаратных (физических) пикселей устройства, их величина примерно одинакова для всех устройств); проще говоря, свойство устанавливает стартовую величину масштабирования страницы; в качестве значения через знак равно принимаются числа от 0.1 до 10 (чем больше число, тем больше масштаб, т.е. увеличение страницы), например, «initial-scale=2» можно рассматривать, как увеличение масштаба страницы в два раза;
  • «user-scalable» – разрешает либо запрещает пользователю изменять масштаб страницы; в качестве значения через знак равно принимает yes либо no (масштабирование в ряде случаев целесообразно запрещать, например, для мобильных приложений).

Отметим, что нами не были перечислены значения minimum-scale и maximum-scale атрибута content , т.к. их использование нежелательно.

Пример №2 Использование name=»viewport» тега meta

Как видно из примера, значения атрибута content обычно перечисляются через запятую, а не записываются в отдельных элементах ‘meta’ .

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

Атрибуты name и http-equiv тега

Атрибут content используется в паре не только с атрибутом name , но и с атрибутом http-equiv , который применяется для конвертирования метатега в заголовок HTTP . Заголовки представляют собой текстовые строки, которые используются при обмене сообщениями браузера с сервером и состоят из пар ‘имя: значение’ (разделяются двоеточием). Сам атрибут http-equiv задает имя пары, аналогично атрибуту name , а атрибут content , соответственно, значение пары: . Однако в одном элементе ‘meta’ допускается использовать только один из атрибутов: или name или http-equiv . Браузеры преобразовывают значение атрибута http-equiv , заданное с помощью атрибута content , в формат заголовка HTTP -ответа и обрабатывают их так, как будто они прибыли непосредственно от сервера. Подробно рассматривать HTTP -заголовки мы будем в процессе изучения HTTP -протокола, JavaScript , PHP , когда будем организовывать взаимодействие браузера пользователя с сервером, выдающего ему веб-страницы. Пока же будем иметь в виду, что есть такой атрибут http-equiv элемента ‘meta’ , в котором такие заголовки используются.

Еще раз кратко о служебной информации

Из всего сказанного выше первым делом нужно запомнить, что при верстке страниц важно указывать кодировку, задавать параметр ‘viewport’ , ссылки на внешние таблицы стилей (это понадобится нам уже при изучениии CSS ) и заголовок документа. Еще раз напомним структуру кода перечисленных элементов:

Как использовать HTML теги в CSS (content)

Здравствуйте,хотел бы узнать каким образом можно использовать HTML теги в поле CSS (content). Вот код

4 ответа 4

В content не допускается html, только текст. Собственно сам css к html привязан только условно, css может задавать стили чего угодно. Вообще, если в after пихается невпихуемое, то, скорее всего, надо шаблон менять, а не html, after — это проставить красную звездочку всем label.required , например.

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

Да пишите себе на здоровье, но не пихайте туда теги HTML, им там не место. Принцип — мухи отдельно, а котлеты отдельно. Пример, мне надо на ul , добавить свой list-items и покрасить его и выравнять, нет проблем, я пишу, что у меня l ist-items нет, но li:after я вставляю content:»✔ «; и в придачу, размер шрифта и цвет и все фантасмагории, что вы придумаете. Так я имею красивую галку в content, единственное правило — в стили пихаем только юникод

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.9.35389

Применение CSS attr и content для создания подсказки

Дата публикации: 2013-07-09

От автора: оказывается, я влюблен в content и attr CSS; я недавно писал о том, как можно в общем применять эти свойство и выражение, как выполнить в CSS счетчики и воспользоваться ими для локализации. Я хотел бы поделиться с вами несколькими методами применения выражения attr и свойства content для назначения стилей всплывающим подсказкам — тултипам.

Подсказка 1: Альтернатива атрибуту title

Атрибут title применим для отображения простых текстовых всплывающих подсказок, но менять стили «виртуальных» тултипов нельзя. Вместо того можно заместить эти подсказки, воспользовавшись атрибутом data-tooltip и небольшим количеством CSS:

Я избежал использования атрибута title, потому что не хочу отобразить ни «родной», ни пользовательский тултип. У этой стратегии имеются некоторые недостатки, о которых вам нужно знать. Вам придется хардкодить расположение всплывающей подсказки для того, чтобы у элемента с тултипом около края окна просмотра контент выходил за экран. В отдельных случаях, однако, так можно слегка оживить базовый тултип.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Подсказка 2: Обзор HTML

Я стану частенько просматривать страницу и искать не просто правильный текст и функциональность, но также убеждаться, что у элементов верные атрибуты; блестящий пример тому – обеспечение правильных ссылок HREF. Бороздить для этого исходный код надоедает, а проверка элементов занимает вечность, поэтому я применяю для отображения требуемой информации content и attr:

Время от времени я отображаю содержимое, установив основную непрозрачность на 30%, иногда просто показываю нужную мне информацию при проведении мышью. Я выполнил это решение в Mozilla Developer Network в режиме редактирования, отображая сводный текст SEO с всплывающей подсказкой сверху самого текста. Простое и блестящее решение.

Не могу поверить, что так долго пренебрегал использованием attr и content. Это – отличная штука, даже когда просто помогает при разработке. Кроме того, attr и content великолепно подходят для счетчиков и локализации; а вы для чего ими пользуетесь?

Автор: David Walsh

Редакция: Команда webformyself.

Илон Маск рекомендует:  Ansistring общие вопросы
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
Атрибут Значения Описание
charset