HTML: Все о ссылках «A HREF REL. Что такое внутренние дубли страниц и как с ними бороться

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

Понятие дублей страниц и их виды

Дубли — это отдельные страницы сайта, контент которых полностью или частично совпадает. По сути, это копии всей страницы или ее определенной части, доступные по уникальным URL-адресам.

Что приводит к появлению дублей на сайте:

Автоматическая генерация дублирующих страниц движком системой управления содержимым сайта (CMS) веб-ресурса. Например:

http://site.net/press-centre/cat/view/identifier/novosti/
http://site.net/press-centre/novosti/

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

http://site.net/category-1/product-1/
http://site.net/category-2/product-1/

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

http://site.net/catalog/product
http://site.net/catalog/category/product

Есть два типа дублей: полные и частичные.

Что такое полные дубли?

Это страницы с идентичным содержимым, доступны по уникальным, неодинаковым адресам. Примеры полных дублей:

1. URL-адреса страниц со слешами («/», «//», «///») и без них в конце:
http://site.net/catalog///product ; http://site.net/catalog//////product.

2. HTTP и HTTPS страницы: https//site.net ; http//site.net.

3. Адреса с «www» и без «www»: http//www.site.net ; http//site.net.

4. URL страниц с index.php, index.html, index.htm, default.asp, default.aspx, home:
http://site.net/index.html ;
http://site.net/index.php ;
http://site.net/home.

5. URL-адреса страниц в верхнем и нижнем регистрах:
http://site.net/example/ ;
http://site.net/EXAMPLE/ ;
http://site.net/Example/.

6. Изменения в иерархической структуре URL. Например, если товар доступен по нескольким разным URL:
http://site.net/catalog/dir/tovar;
http://site.net/catalog/tovar;
http://site.net/tovar;
http://site.net/dir/tovar.

7. Дополнительные параметры и метки в URL.

• URL с GET параметрами : http://site.net/index.php?example=10&product=25. Страница полностью соответствует следующей: http://site.net/index.php?example=25&cat=10.
• Наличие utm-меток и параметров gclid. Utm-метки помогают предоставить в систему аналитики информацию для анализа и отслеживания различных параметров трафика. URL целевой страницы, к которой добавляются utm-метки, выглядят так:
  http://www.site.net/?utm_source=adsite&utm_campaign=adcampaign&utm_term=adkeyword
• Параметры gclid (Google Click Identifier) . Пометка целевых URL, которая добавляется автоматически для отслеживания данных о компании, канале и ключевых словах в Google Analytics. Например, если переходят по вашему объявлению для сайта http://site.net, то адрес перехода посетителя будет выглядеть так: http://site.net/?gclid=123xyz .
• Метка yclid . Помогает отслеживать эффективность рекламных кампаний в Яндекс Метрике. Метка позволяет отследить действия посетителя, который перешел на сайт по рекламному объявлению. Вот как выглядит адрес перехода:
  http://site.net/?yclid=321 .
• Метка openstat . Универсальная и также используется для анализа эффективности рекламных кампаний, анализа посещаемости сайта и поведения пользователей на сайте. Ссылка с меткой «openstat»:
  http://site.net/?_openstat=231645789.
• Дубли, которые создаются реферальной ссылкой. Реферальная ссылка это специальная ссылка с вашим идентификатором, по которому сайты распознают, от кого пришел новый посетитель. Например:
  https://site.net/register/?refid=398992 ;
  http://site.net/index.php?cf=reg-newr&ref=Uncertainty .

8. Первая страница пагинации каталога товаров интернет-магазина или доски объявлений, блога. Она зачастую соответствует странице категории или общей странице раздела pageall: http://site.net/catalog ; http://site.net/catalog/page1.

9. Неправильные настройки 404 ошибки приводят к появлению многочисленных дублей. Например: http://site.net/rococro-23489-rocoroc ; http://site.net/8888-??? .

Выделенный жирным текст может вмещать какие-либо символы и/или цифры. Страницы такого вида должны отдавать код ответа сервера 404 (не 200) или же перенаправлять на актуальную страницу.

Что такое частичные дубли?

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

Виды частичных дублей:

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

И тот же текст на странице с товаром:

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

2. Дубли на страницах фильтров, сортировок, поиска и страницах пагинации, где есть похожее содержимое и меняется только порядок размещения. При этом текст описания и заголовки не меняются.

3. Дубли на страницах для печати или для скачивания, данные которых полностью соответствуют основным страницам. Например:
http://site.net/novosti/novost1
http://site.net/novosti/novost1/print

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

К чему приводят дубли страниц на сайте

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

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

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

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

Каталог средств для поиска дублированных страниц

Итак, мы уже выяснили, что такое дубли, какими они бывают и к чему приводят. А теперь перейдём к тому, как их обнаружить. Вот несколько эффективных способов:

Поиск дублей с помощью специальных программ Атрибуты rel="next" и rel="prev"

С помощью rel="next" и rel="prev" можно связать между собой URL отдельных страниц. Поисковики будут распознавать контент этих страниц, как один большой свиток, а не отдельные URL.

Для этого на первой странице (http://site.net/catalog-page1 ) необходимо разместить в разделе (http://site.net/catalog-page1 ) тег, указывающий какая страница будет следующей:

Учитывая, что это первая страница, добавлять нужно только rel="next". На всех последующих страницах добавляем и атрибут rel="next", и rel="prev", которые будут указывать на предыдущий и следующий URL. Например, на второй странице (http://site.net/catalog-page2) нужно добавить ссылки:

На завершающей странице (http://site.net/catalog-pageN), как и на первой, необходимо указать только один атрибут. Важно: в данном случае он указывает на предыдущий URL:

• rel="prev" и rel="next" не являются для Google директивами, это лишь вспомогательные атрибуты;
• они не учитываются Яндексом;
• важно следить за корректностью генерации тегов и придерживаться четкой последовательности между страницами пагинации, чтобы не создавать бесконечные цепочки.

Метатег

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

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

Атрибут rel="canonical"

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

Тег для устранения дублей на страницах фильтров и сортировок, страницах с get-параметрами и utm-метками. Применяется для печати, при использовании одинакового информационного содержания на разных языковых версиях и на разных доменах. Атрибут rel="canonical" для разных доменов поддерживается не всеми поисковыми системами. Для Google он будет понятен, Яндекс его проигнорирует.

Указывая каноническую ссылку, мы указываем адрес страницы, предпочтительной для индексации. Например, на сайте есть категория «Ноутбуки». В ней фильтры, которые показывают разные параметры выбора. А именно: бренд, цвет, разрешение экрана, материал корпуса и т.д. Если эти страницы фильтров не будут продвигаться, то для них канонической указываем общую страницу категории.

Как задать каноническую страницу? В HTML-код текущей страницы помещаем атрибут rel="canonical" между тегами .... Например, для страниц:
http://site.net/index.php?example=10&product=25;
http://site.net/example?filtr1=%5b%25D0%,filtr2=%5b%25D0%259F%;
http://site.net/example/print.

Канонической будет страница http://site.net/example.

В HTML коде это будет выглядеть так: .

Выводы

1. Дубли — отдельные страницы сайта, контент которых полностью или частично совпадает.

2. Причины возникновения дублей на сайте: автоматическая генерация, ошибки, допущенные вебмастерами, изменение структуры сайта.

3. К чему приводят дубли на сайте : индексация становится хуже; изменения релевантной страницы в поисковой выдаче; потеря естественной ссылочной массы продвигаемыми страницами.

4. Методы поиска дублей : использование программ-парсеров (Netpeak Spider); поискового оператора site; панели для вебмастеров Google Webmasters Tools.

5. Инструменты устранения дублей: соответствующие команды в файле robots.txt; атрибуты rel="next" и rel="prev"; тег meta name="robots" content="noindex, nofollow"; тег rel="canonical"; 301 редирект.

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

By Sean

Last updated on December 18, 2018 at 12:06 pm

There are lots of ways in the internet that you can use to search for links – or what is more widely known as link search. Link search is usually done through advanced queries in search engines or using link search tools like SEOMoz Link Finder .

Link search is never easy – and don’t believe blog entries that tell you link search is easy. It’s not. Even when you get to find a link worth having, you’ll still have to negotiate with the webmaster in order to get it.

Advanced Queries

Or what we would like to call Advanced Link Search – is a method of link search using the search engines itself. When, for example, you are selling Bed Mattresses and you go to Google.com and type in a query such as ‘Bed Mattress links’ you won’t usually find websites where you can get bed mattress links from. That’ just won’t happen.

What is an advanced query for?

Advanced queries are used to narrow down your search into something more specific. Here are some of Google’s advanced query commands:

Search Service Search Operators

Web Search	allinanchor: , allintext: , allintitle: , allinurl: , cache: , define: , filetype: , id: , inanchor: , info: , intext: , intitle: , inurl: , link: , phonebook: , related: , site:
Image Search	allintitle: , allinurl: , filetype: , inurl: , intitle: , site:
Groups	allintext: , allintitle: ,
Directory	allintext: , allintitle: , allinurl: , ext: , filetype: , intext: , intitle: , inurl:
News	allintext: , allintitle: , allinurl: , intext: , intitle: , inurl: , location: , source:
Product Search	allintext: , allintitle:

Some of the search operators indicated will not work if you put a space between the colon (:) and the query word.

There are so many search operators you can play with in searching for links. Note: I only included the search operators I think you can use in Link Searching.

allinanchor:

This search operator limits your Google results to pages that has all the query terms you made in the anchor text on links to the page.

For example: [ allinanchor: best bed mattress philippines ] – this advanced search query will return pages in which the anchor text on its inbound links contain the words “best”, “bed”, “mattress” and “philippines”

This is a good link search strategy when you’re looking to find other websites to extract good links from with your desired anchor text in it.

allintext:

This search operator makes sure that the words you are looking for is inside the text of the webpage. It’s kind of like the normal query except that it tries to be a bit more specific because it makes sure that the text you’re looking for is in the page.

For example: [ allintext: bite my hamburger ] will display only results that have the words “bite”, “my”, and “hamburger” in it.

You can use this if you want to find webpages with the text you want in it and perhaps request the webmaster to make those words link to your site so that you won’t have to bother searching for a website without your anchor text automatically in it.

allintitle:

This search operator limits the results to show only the pages in which your query is present in the title.

For example: [ allintitle: umbilical brothers ] will display only pages with the words “umbilical” and “brothers” in the tag of the page.

In Image Search, the search operator allintitle: will display only image files which has names that contain the terms that you queried.

In Google News, the operator allintitle: will display only articles with your search queries as the title of the articles.

Right now if you get a link from a webpage with a very relevant title to your topic, that is very valuable. Perhaps even more valuable than getting a link with the right anchor text.

allinurl:

This search operator limits the results to show only the pages in which your search query is included in the URL.

For example: [ allinurl: supersize me ] will return only pages with the words “supersize” and “me” in its URL.

Finding your desired keyword in the URL of another webpage and having that webpage link to you gives that link a relevance boost. Just like how a relevant webpage title will boost its link to you.

This search operator will limit the results to the specified author that you are searching for. I personally think that this will be further enhanced as the AuthorRank gets implemented .

For example: [ SEO Sean ] – this advanced search query will show you results of webpages that contain the word “SEO” and are written by Sean Si. You can also put in double quotes such as [ “Sean Si ” ] to make your advanced search query more exact.

If you have an author in mind that you would want a link from, using author search would greatly help you find that author’s articles throughout the net.

cache:

This search operator will display all the cached version of a webpage in Google’s index instead of the current version of the page.

For example: [ cache: h3sean.com ] will show you Google’s cached version from their last index of God and You.

Heads-up: Take note that this advanced search operator does not let you put any spaces between cache: and the URL.

looking at the Google cache, you can better see if Google has already indexed your link or not in other websites.

define:

This search operator will display the definition of the term you have typed in.

For example: [ define : Su ] will show you the definition of the word “Supercalifragilisticexpialidocious”

You can search for links from sites that have the definition of a keyword you have and ask them if they could use you as a source or as a further reference.

ext:

This is just the same as the filetype: advanced search operator.

filetype:

This search operator will limit your search results to pages whose names end in that specific suffix.

For example: [ how to belly dance filetype :pdf ] will display Adobe Acrobat pdf files that has the words “how”, “belly”, and “dance” in it. Furthermore, you can heighten the scope of your advanced query by including another filetype of your choice – [ belly dancing filetype :pdf OR filetype :doc ].

Looking for a PDF filetype is said to give a better boost in authority when getting an uploaded .pdf file link. Regardless whether it’s true or not, Google does crawl and index PDF files.

As Matt Cutts says:

“We absolutely do process PDF files. I am not going to talk about whether links in PDF files pass PageRank. But, a good way to think about PDFs is that they are kind of like Flash in that they aren’t a file format that’s inherent and native to the web, but they can be very useful. In the same way that we try to find useful content within a Flash file, we try to find the useful content within a PDF file. At the same time, users don’t always like being sent to a PDF. If you can make your content in a Web-Native format, such as pure HTML, that’s often a little more useful to users than just a pure PDF file.”

link:

This search operator limits your search results to all links pointing to the search term that you entered.

For example: [ link :сайт ] will show you pages that have links pointing to сайт

Of course, most of the links pointing to seo-hacker.. The way to do this is using the -site: search operator.

For example: [ link сайт -site :сайт ] will exclude сайт in the results while showing you all other pages linking to сайт

This is just like using Yahoo Site Explorer in a way. But this time, you get to see Google’s results of your backlinks. You can use it on your competitors to find where they are getting their backlinks from.

related:

This search operator limits your results to pages with similar content and HTML framework as the webpage you specified.

For example: [ related :actlikeaman.org ] will show you webpages that are similar to “actlikeaman.org”

This is pretty much common sense as you search for related websites to get a link from.

site:

This search operator limits your search to the website that you specified.

Note: There should be no space in between the search operator “site : ” and the subsequent domain name.

For example: [ link building site :kaiserthesage.com ] will show you all information about “link” “building” in kaiserthesage.com only.

Having this search operator at hand eases your link search especially if you want a link from a specific site but you need to go through its pages to find a relevant topic. Use this especially if the website doesn’t have any search bar in it.

Let’s move on to search Advanced search Functionalities to help you in your link search.

Exclude terms function (-)

Including a minus sign before your search term indicates that you want to exclude that search term in the results. This narrows down your results to an even more specific bunch.

For example: [ transformers -avr -electrical -wiring ] will search for transformers that are not related to the words “avr”, “electrical”, and “wiring”.

This is a very useful functionality as it helps you to narrow down your search to the terms that you really need. It helps limit the pages you can see – page leads where you can get a link from.

Fill in the blanks (*)

Including an asterisk in your search phrase indicates that you want the search engines to fill in the blanks for necessary, related words in your sentence.

For example: [ Gloria Arroyo is a * president of the Philippines ] will return pages where the * can be replaced with any number of other related words such as “corrupt”, “thieving”, “useless”, etcetera – try it.

This can be easily used for vertically related articles. It can also produce ideas for you to get link leads.

Tips for Keeps: Searching for links is just the first step. Contacting the webmaster to ask for some is the hard part. Keep these things in mind. As the saying goes, “The longest journey starts with the first step”.

rel=author и rel=publisher. Чем они отличаются друг от друга и какую из связей использовать для своего сайта? Можно ли использовать одновременно rel=author и rel=publisher? В этой статье дается пояснение к каждому из упомянутых атрибутов и инструкция, как их правильно использовать.

Что такое rel=author?

Авторская разметка Google это способ связать авторов с их контентом с помощью использования профиля Google+ и двустороннего подтверждения связи профиля с контентом (см. ). Создание этой связи дает ряд преимуществ:

— В результатах поиска рядом со сниппетами ваших страниц будет отображаться фото из профиля Google+.

— Увеличится кликабельность (CTR) сниппета. Можно получать больше трафика, оставаясь на тех же поизициях в поиске.

— При воровстве контента с вашего сайта, Google будет знать первоисточник и, скорей всего, показывать его выше сворованного.

— Это хорошо влияет на персональный брендинг и повышение узнаваемости автора.

— У вас появляется возможность иметь специальную панель в результатах поиска, при вводе пользователем навигационных/брендовых запросов. Эта панель не отображается, пока вы не наберете определенное вовлечение пользователей на странице Google+ (сколько именно нужно плюсов, постов или комментариев, пока не известно). В этой панели отображается ваш логотип, имя компании, количество фоловеров, кнопка подписки и ваши последние посты в Google+.

(кликните для просмотра примера непосредственно в Google)

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

Когда использовать rel=author, а когда rel=publisher?

Из-за того, что оба атрибута создают связь, возникает вопрос, как определить, что лучше использовать?

Из описанного выше, основная разница между rel=author и rel=publisher в следующем:

• rel=author относится к статьям (у разных статей могут быть разные авторы), rel=publisher относится ко всему сайту.
• rel=author для персональных профилей, rel=publisher для бизнес-страниц.
• в поиске rel=author дает возможность отобразить свое фото вместе со сниппетом сайта, rel=publisher будет отображать описание со страницы Google+ в боковой панели.
• rel=author добавляет фото по любым запросам, rel=publisher отображает панель только по брендовым запросам.

Эти теги также можно использовать совместно.

Если подвести итог, используйте rel=publisher для связи бизнес-страниц со всем сайтом, аrel=author для связи страниц/статей отдельного автора с его профилем в Google+. Сайт может иметь несколько авторов, а также бизнес-страницу. И в любом случае потребуется двусторонняя верификация, то есть ссылка не только с сайта, но и на сайт с настроек страницы или профиля Google+.

Несколько полезных советов:

— Добавьте на свой сайт виджет Google+ . Так посетителям будет легче добавлять страницу в свои круги.

или

— Если вы подтвердили сайт в панели вебмастеров Google, и на этом же аккаунте имеете персональный профиль Google+, дополнительно верифицировать сайт нет необходимости.

— Ознакомьтесь с ответами Google на часто задаваемые вопросы по авторской разметке.

Дата публикации: 01 декабря, 2013

LINK - это тег, который обеспечивает связь между страницами сайта, и связь между файлами ресурсов и сайтом. Он может быть расположен только в теле HEAD. Тег LINK регистро-независим. При помощи него можно связать ленту новостей со страницей сайта, можно подключить иконку страницы, подключить к странице таблицу стилей. Также можно логически вязать разные страницы сайта, если между ними есть определенная взаимосвязь. Действие тега LINK распространяется только на ту страницу сайта, на которой он установлен.

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

Синтаксис тега LINK выглядит следующим образом:

Свойство тега LINK "href" определяет файл, с которым будет связана страница (страница, на которую делается ссылка). Свойство "rel" определяет тип связи между файлом (документом) и страницей. "type" определяет тип файла, который связывается со страницей. "media" - тип устройства, на котором должна отражаться связь с файлом ресурсов.

Свойство HREF

Значением этого свойства может быть любой файл, на который ссылается тег LINK . Адрес файла задается в любом доступном формате. Это могут быть как прямые сылки, так и относительные.

Свойство REL

Это свойство может принимать одно из следующих значений:

• top или home - ссылка на самую первую в иерархии сайта страницу.
• contents или toc - ссылка на файл оглавления сайта.
• index - ссылка на файл, который может выполнять индексный поиск по странице. Индексный поиск - это поиск нужного слова или словосочетания в пределах одной страницы.
• glossary - ссылка на файл, который является глоссарием страницы, и содержит термины и определения, которые упомянуты на странице. Обычно, ведет на краткий справочник.
• copyright - ссылка на файл, в котором показаны авторские права на страницу.
• next - ссылка на следующую страницу сайта по предполагаемому маршруту пользователя.
• previous - ссылка на предыдущую страницу сайта по предполагаемому маршруту пользователя.
• help - ссылка на файл помощи, в котором, скажем, более подробно расписано описанное на странице.
• search - ссылка на страницу поиска по сайту.
• start - точка входа, с которой начинается логическая структура сайта.
• chapter - ссылка на страницу, которая является главой текущей страницы.
• section - ссылка на страницу, которая является главным разделом текущей страницы.
• subsection - ссылка на страницу, которая является главным подразделом текущей страницы.
• bookmark - ссылка на закладку к текущей странице, установленную на другой странице.
• up или parent - ссылка на страницу, которая находится выше текущей страницы по иерархии сайта.
• first - ссылка на страницу, которая является первой по предполагаемому маршруту перемещения пользователя по сайту.
• last или end - ссылка на страницу, которая является последней по предполагаемому маршруту перемещения пользователя по сайту.
• child - ссылка на страницу, которая является дочерней по иерархии сайта в отношении к текущей странице.
• stylesheet - ссылка на файл css , в котором зранятся стилевые настройки оформления страницы.
• alternate - ссылка на альтернативный файл текущей страницы. Обычно, с таким свойством REL ссылаются на RSS-ленты обновлений сайта. Некоторые браузеры (Opera, Firefox) при обнаружении такого тега выводят в адресной строке кнопку для перехода на альтернативный файл.
• icon или shortcut icon - ссылка на иконку страницы. Иконка будет отображаться в заголовке страницы.
• canonical - свойство, разработанное для поисковых ботов. Это ссылка на оригинал материала, опубликованного на странице. Если у вас на сайте имеются 2 страницы с одинаковым контентом, то при помощи этого тега можно указать, который из контентов оригинал. Пример одинакового контента на одном сайте: страница с материалом и страница оптимизированная на печать.
• chapter - ссылка на страницу, которая является отдельной главой к текущей странице.
• appendix - ссылка на страницу добавления контента.

При использовании свойства rel="icon" или rel="shortcut icon" тега LINK иконка может быть любая, но, желательно, чтобы она была размером 16x16 пикселей и качеством 32 битов на пиксел. Возможны и анимированные иконки, но двигаться они будут только в браузере Firefox. Остальные браузеры будут показывать только первый кадр анимации.

Свойство TYPE

Это свойство определет тип файла, на который ссылается тег LINK . Значение этого свойства задается в MIME формате. Если вы подключаете файл CSS стилей, то MIME формат будет "text/css". Если ссылка ведет на другую страницу сайта, то значение этого свойства "text/html" или "text/xml", если на иконку, то "image/x-icon", если на rss-ленту, то "application/rss+xml". Это основные и самые используемые MIME-типы.

Свойство MEDIA

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

• all - все устройства.
• screen - экран монитора.
• print - устройство печати. Обычно - принтер.
• projection - проектор.
• braille - устройства, предназначенные для чтения слепыми, на основе системы Брайля.
• speech - устройства речевого вывода. Обычно - синтезаторы речи или речевые браузеры.

Обычно, для файлов стилей применяется MIME-тип "screen".

Свойство TITLE

Это свойство описывает файл, на который ссылается тег LINK . Свойство является необязательным и используется, в основном, для краткого описания или оглавления RSS-лент.

Примеры

Предлагаю несколько распространенных примеров, использующих тег LINK .

Подключение внешнего CSS файла стилей:

Подключение RSS канала новостей к странице:

Подключение своей иконки favicon производится двумя тегами LINK. Это нужно для поддержки тега разными браузерами:

сылка на главную страницу сайта:

Это лишь некоторые способы использования тега LINK . Вы можете использовать его по-своему, но в рамках описанных выше правил.

Вы можете присоедениться к моему микроблогу в Твиттере

Марк Пилгрим

Перевод: Влад Мержевич

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

Вот . Откройте ее в новой вкладке и не возвращайтесь, пока не посмотрите ее исходный код по меньшей мере один раз.

Доктайп

Посмотрите на первую строку нашего кода.

Она называется доктайп. Это длинная история с черной магией, стоящая за доктайпом. Во время работы над Internet Explorer 5 под Mac его разработчики столкнулись с неожиданной проблемой. Новая версия этого браузера содержала столько улучшений по части стандартов, что старые страницы отображались некорректно. Вернее, отображались они надлежащим образом, по спецификации, но люди считали, что отображаются они неправильно. Авторы страниц при верстке ориентировались на доминирующие браузеры того времени - Netscape 4 и Internet Explorer 4. Браузер IE5/Mac был настолько передовым, что фактически разрушил Сеть.

В Майкрософте пришли к оригинальному решению. Перед отображением страницы, IE5/Mac смотрит на доктайп, который, как правило, стоит в первой строке кода (еще до элемента ). Старые страницы, которые ориентировались на «причуды» старых браузеров, обычно не имеют доктайпа, поэтому IE5/Mac отображал их подобно этим браузерам. Для включения поддержки новых стандартов, авторы страниц должны были вставить перед .

Эта идея распространилась как лесной пожар и вскоре все основные браузеры имели два режима: «режим совместимости» и «стандартный режим». Конечно, вскоре все это вышло из-под контроля. Когда Mozilla запустила версию 1.1 своего браузера, она обнаружила, что страницы, которые отображаются в «стандартном режиме» в действительности основываются на одной конкретной причуде под именем доктайп. Mozilla подправила свой браузерный движок для устранения этого недостатка и тысячи страниц рассыпались в один миг. Таким образом был создан, и я не выдумываю это, «почти стандартный режим».

В своей основной работе Переключение режимов браузера через доктайп Хенри Сивонен выделил следующие режимы.

Режим совместимости

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

Стандартный режим

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

Почти стандартный режим

Браузеры Firefox, Safari, Chrome, Opera (начиная с 7.5) и IE8 также поддерживают почти стандартный режим, в котором вертикальные размеры ячеек таблиц реализуются традиционно, а не в полном соответствии со спецификацией CSS2. В HTML5 называется «ограниченный режим совместимости».

Вы должны прочитать остальные статьи Хенри, потому что я привел здесь всё упрощённо. Даже в IE5/Mac было несколько вариантов доктайпа. Со временем список особенностей браузеров вырос и вместе с ним увеличился список доктайпов, которые переключают в режим совместимости. В последний раз, когда я занимался подсчётом, было 5 доктайпов для переключения в «почти стандартный режим» и 73 для переключения в «режим совместимости». Вероятно, при этом я пропустил несколько и я ещё молчу про ту сумасшедшую фигню, что делает Internet Explorer 8 для переключения между четырьмя (четырьмя!) режимами отображения. Вот . Убейте ее! Убейте и сожгите!

Так, где мы? Ах, да, доктайп.

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

Вот и все. Всего 15 символов. Это так просто, что вы можете набрать его вручную и не выкручиваться.

Корневой элемент

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

Корневой элемент может выглядеть так.

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

Первое, что нужно обговорить, это атрибут xmlns , который остался от XHTML. Этот атрибут сообщает, что элементы на этой странице находятся в пространстве имен XHTML, описанному по адресу http://www.w3c.org/1999/xhtml. Однако элементы HTML5 и так находятся в этом пространстве имен, так что нет необходимости объявлять это намеренно. Страница HTML5 будет работать одинаково во всех браузерах, независимо от того, присутствует атрибут xmlns или нет.

После удаления xmlns останется следующее:

Два атрибута, lang и xml:lang оба определяют язык текущей веб-страницы. Значение ru обозначает русский язык, его можно поменять на другой . Почему используется два атрибута для одного и того же? Опять же, это наследие XHTML. В HTML5 только атрибут lang дает какой-либо эффект. Вы можете оставить xml:lang при желании, но тогда нужно убедиться, что он содержит то же значение, что и lang .

Готовы к выбрасыванию? Если да, то поехали. Едем, едем... приехали. Вот что осталось от нашего корневого элемента.

И это все, что я хотел сказать об этом.

Элемент

Первый дочерний элемент в корне это, как правило, тег . Элемент содержит метаданные - информацию о странице, но не тело самой страницы, которое располагается в . Сам элемент довольно скучен и не изменился на интересный вариант в HTML5.

Хорошие вещи находятся внутри . И для их изучения обратимся к нашему примеру.

Мой блог

Вначале тег .

Кодировка символов

Когда вы думаете «текст», вы, вероятно, думаете о «знаках и символах, что я вижу на экране моего компьютера». Но компьютерам нет дела до знаков и символов, они имеют дело с битами и байтами. Каждый фрагмент текста, который вы когда-либо видели на экране компьютера, на самом деле хранится в определенной кодировке. Существуют сотни различных кодировок символов, некоторые из них оптимизированы для конкретных языков, таких как русский, китайский или английский, другие могут быть использованы сразу для нескольких языков. Грубо говоря, кодировка символов обеспечивает перевод между тем, что вы видите экране и тем, что компьютер хранит в памяти и на диске.

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

Как же фактически ваш браузер определяет кодировку набора байтов, что посылает веб-сервер? Рад, что спросили. Если вы знакомы с HTTP-заголовками, то возможно видели подобный.

Content-Type: text/html; charset="utf-8"

Эта строка говорит, что веб-сервер считает, что посылает вам HTML-документ в кодировке UTF-8. К сожалению, в Интернете творится каша - некоторые авторы могут контролировать HTTP-сервер, другие же нет. К примеру, сайт blogger.com может содержать различный контент предоставленный разными людьми, но управляется серверами Google. В HTML4 используется способ указания кодировки самостоятельно в любом HTML-документе. Вы, наверное, встречали такую строку.

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

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

Спроси профессора Маркапа

☞ В. Я никогда не использую смешные символы. Надо ли мне объявлять мою кодировку?

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

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

Дружеские отношения

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

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

В примере, что я приводил ранее, только первая ссылка (rel="stylesheet" ) указывает на внешний ресурс. Остальные являются гиперссылками на другие документы. Вы можете при желании пройти по этим ссылкам, но они не требуются для просмотра текущей страницы.

Чаще всего отношения ссылок видны в теге раздела . Некоторые отношения также могут быть использованы для тега , но это встречается довольно редко, даже когда допускается. HTML5 также позволяет включить некоторые отношения для , но это еще реже используется (HTML4 не разрешает атрибут rel для тега ). Посмотрите полную диаграмму для проверки, где вы можете использовать значение rel .

Спроси профессора Маркапа

☞ В. Могу я создать свои собственные отношения между ссылками?

О. Кажется, имеется бесконечный запас идей для новых отношений между ссылками. В попытках помешать людям творить фигню WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по прикладным веб-технологиям) ведет реестр предложенных значений rel и устанавливает процесс их принятия.

rel="stylesheet"

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

rel="alternate"

Вернемся к нашей странице.

Эти отношения ссылок также весьма распространены. в сочетании с типом RSS или Atom в атрибуте type позволяет то, что называется «автоматическое обнаружение канала». Это позволяет собирать фид читалками (вроде Google Reader) для получения с сайта последних новостей. Большинство браузеров также поддерживает автоматическое обнаружение фида, показывая специальный значок рядом с адресом сайта. В отличие от rel="stylesheet" , атрибут type здесь важен. Не удаляйте его!

Ссылка с отношением rel="alternate" всегда была странным гибридом в использовании, даже в HTML4. В HTML5 ее определение было уточнено и расширено, чтобы более точно описать существующий контент. Как вы видели, использование rel="alternate" в сочетании с type=application/atom+xml указывает на Atom-фид для текущей страницы. Но вы также можете использовать rel="alternate" в сочетании с другими значениями type для обозначения того же содержания в другой формат, например PDF.

HTML5 также отправляет на отдых давнюю путаницу о том, как делать ссылку на переводы документов. HTML 4 говорит использовать атрибут lang в сочетании с rel="alternate" для указания языка связанного документа, но это некорректно. В списке исправлений HTML4 перечислены четыре ошибки спецификации. Одна из этих ошибок связана с заданием языка документа через rel="alternate" . Правильный способ, описанный в исправлениях HTML4 и применяемый в HTML5, заключается в использовании атрибута hreflang . К сожалению, эти исправления не были повторно включены в спецификацию HTML 4, потому что никто больше в Рабочей группе по HTML не работает над ней.

Другие отношения ссылок в HTML5

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

rel="author" используется для ссылки на страницу с информацией об авторе. Это может быть почтовый адрес, хотя и не обязательно. Обычно это ссылка на контактную информацию или страницу «Об авторе».

Запись rel="external" сообщает, что ссылка ведет на документ, который не является частью сайта. Я считаю, что ее впервые популяризировал WordPress, когда использовал в ссылках комментариев.

HTML4 включает rel="start" , rel="prev" и rel="next" для определения отношений между страницами, которые являются частью серии (например, разделы книги или даже сообщения в блоге). При этом корректно использовалась только запись rel="next" . Люди вставляли rel="previous" вместо rel="prev" , вставляли rel="begin" и rel="first" вместо rel="start" , использовали rel="end" вместо rel="last" . И ох, самостоятельно делали rel="up" для указания на «родительскую» страницу.

HTML5 включает rel="first" как наиболее распространенный вариант разных способов сказать «первая страница в серии» (rel="start" не является синонимом и оставлен для обратной совместимости). Еще добавлены rel="prev" и rel="next" как в HTML4, rel="previous" для обратной совместимости, а также rel="last" (последняя страница в серии, зеркальный к rel="first" ) и rel="up" .

Лучший способ подумать о rel="up" это посмотреть на навигацию в виде хлебных крошек (или представить ее). Главная страница это первая страница в навигации, а текущая страница находится в хвосте. rel="up" указывает на страницу, следующую за последней в хлебных крошках.

rel="icon" является вторым по популярности отношением между ссылками после rel="stylesheet" . Оно обычно используется вместе с иконкой сайта, вот так.

Все основные браузеры поддерживают такое связывание иконки со страницей. Обычно она отображается в адресной строке браузера рядом с URL или во вкладке браузера или в том и другом месте.

Новое в HTML5: атрибут sizes может быть использован для указания размера иконки.

rel="license" был включен сообществом по микроформатам. Такое отношение означает, что ссылка ведет на страницу с авторскими правами, согласно которым предоставляется текущий документ.

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

rel="noreferrer" указывает, что информация о реферере не должна утекать при переходе по ссылке. Браузеры не поддерживают это отношение, однако оно недавно было добавлено в браузерный движок Webkit и в конечном итоге появится в Safari, Chrome и других браузерах, основанных на этом движке.

rel="pingback" указывает адрес пингбэк-сервера. Как поясняется в спецификации, «пингбэк» это способ для блога автоматически оповещать сайты, ссылающиеся на него. Это создает обратную связь - способ пройти назад по цепочке ссылок вместо «прямого прохода». В блогах, частности WordPress, пингбэк-механизм используется для уведомления авторов, что вы ссылаетесь на кого-то при создании новой записи.

rel="prefetch" сообщает, что превентивная выборка и кэширование указанного ресурса, вероятно, будет полезна и скорее всего пользователю понадобится этот ресурс. Поисковые системы иногда добавляют на страницу результатов поиска, если они полагают, что верхние результаты более популярны других. Посмотрите исходный код результатов поиска Google для CNN через Firefox и сделайте поиск по ключевому слову prefetch . Mozilla Firefox является пока единственным браузером, поддерживающим rel="prefetch" .

rel="search" говорит, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. Так, если вы хотите полезно использовать rel="search" , укажите на OpenSearch-документ, который описывает, как браузер может формировать адреса для поиска ключевых слов по текущему сайту. Формат OpenSearch поддерживается браузером Internet Explorer начиная с версии 7.0 и Mozilla Firefox с версии 2.0.

rel="sidebar" показывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера. Что это значит? В Opera и Firefox это реализовано так: когда я щелкаю по ссылке, открывается окно для добавления ссылки в панель закладок. Internet Explorer, Safari и Chrome игнорируют rel="sidebar" и покажут обычную ссылку.

rel="tag" сообщает, что метка непосредственно связана с текущим документом. Понятие «метка» (теги, категории) было придумано компанией Technorati для помощи в систематизации постов блога. Ранее блоги и руководства и называли их «метки Technorati». Вы правильно поняли: коммерческая компания убедила весь мир добавить метаданные, которые сделают труд компании проще. Прекрасная работа! Синтаксис позже был стандартизирован сообществом по микроформатам, где его просто назвали rel="tag" . В большинстве систем блогов, которые позволяют связывать категории, ключевые слова или метки с постами, ссылки маркируются через rel="tag" . Браузеры ничего особого с такими ссылками не делают, поскольку они в действительности предназначены для поисковых систем.

Новые семантические элементы в HTML5

HTML5 не просто делает существующую разметку компактнее, он также определяет новые семантические элементы.

	Элемент определяет основной документ или раздел приложения. В данном контексте это тематическая группировка содержания, как правило, с заголовком. Например, разделами могут быть главы, вкладки в диалоговом окне с вкладками или пронумерованные разделы диссертации. Главная страница веб-сайта может быть разбита на разделы для вступления, вывода новостей, контактной информации.
	Элемент представляет собой раздел навигационных ссылок, содержащий ссылки на другие страницы. Не все группы ссылок должны заключаться в тег - только разделы, состоящие из основных блоков навигации. В частности, в подвале страницы часто содержится краткий список ссылок, таких как: условия обслуживания, главная страница, страница с авторскими правами. Для подобных случаев вполне достаточно тега , без использования .
	Элемент задает компонент страницы, предназначенный для самостоятельного распространения или повторного использования, например в синдикации. Это может быть сообщение форума, журнальная или газетная статья, запись в блоге, пользовательский комментарий, интерактивный виджет, гаджет или любой другой независимый контент.
	Этот элемент представляет раздел страницы, имеющий косвенное отношение к содержанию и который можно отделить от контента. В полиграфии такие участки часто выделяют плашкой. Тег может быть использован для вывода цитат, боковых панелей, рекламы, навигации через и другого контента, который считается отдельным от основного содержания страницы.
	Элемент задает заголовок раздела и применяется для группирования нескольких тегов – , когда заголовок включает несколько уровней, таких как подзаголовки, альтернативные названия или лозунги.
	Представляет собой группу из вступительных или навигационных средств. Элемент обычно содержит заголовок раздела (теги – или ), но это не обязательно. также может быть использован для обертывания раздела содержания, формы поиска, или соответствующих логотипов.
	Задает нижний колонтитул для раздела содержания или подвал для страницы. Элемент обычно содержит информацию о разделе, такую как: имя автора, ссылки на соответствующие документы, авторские данные и тому подобное. Колонтитулы не обязательно должны выводиться в конце раздела, как это обычно делается.
	Представляет собой либо время в 24-часовом формате, либо точную дату, которую при желании можно совмещать со временем и указанием часового пояса.
	Помечает фрагмент документа или выделяет его в справочных целях.

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

Длинное отступление о том, как браузеры обрабатывают неизвестные элементы

Каждый браузер имеет основной список HTML-элементов, которые он поддерживает. Например, список элементов Mozilla Firefox хранит в nsElementTable.cpp. Элементы вне этого списка рассматриваются как «неизвестные». Вот две главные проблемы, связанные с такими элементами.

Как должен быть стилизован элемент? По умолчанию

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

Как элемент должен выглядеть в DOM? Файл nsElementTable.cpp хранит информацию, какие элементы могут содержать в себе другие. Если вы написали

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

То не закрывает

Потому что Firefox знает, что

Это блочный элемент, который может содержать встроенные элементы . Так что в DOM обозначается как дочерний для

.

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

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

Профессор Маркап говорит

☞ Все браузеры отображают неизвестные элементы как встроенные, т.е. так, словно в стилях к ним добавили display: inline .

Есть несколько новых элементов, определенных в HTML5 как блочные. При этом они могут содержать другие блочные элементы, и HTML5-совместимые браузеры будут добавлять к ним display : block . Если вы хотите использовать эти элементы в старых браузерах, вам нужно задать стиль для них вручную. Вот код взятый из статьи Ричи Кларка HTML5 Reset Stylesheet , где написано много других вещей выходящих за рамки этой главы.

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

Но погодите, все еще хуже! До версии 9.0, Internet Explorer не применяет любые стили к неизвестным элементам. Например, если у вас вот такая разметка.

article { display: block; border: 1px solid red; }

...

Добро пожаловать в Инитех

Это ваш первый день.

Internet Explorer до версии 8.0 включительно не будет рассматривать тег как блочный и не покажет красную рамку вокруг статьи. Все стилевые правила просто игнорируются. Когда я писал эту главу, Internet Explorer 9 еще находился в стадии разработки, но Майкрософт заявил (и разработчики проверили), что в Internet Explorer 9 не будет этой проблемы.

Для иллюстрации различий приведен ASCII-рисунок показывающий DOM предписанный для HTML5.

Article | +--h1 (дочерний к article) | | | +--текст "Добро пожаловать в Инитех" | +--p (дочерний к article, родственный h1) | +--текст "Это ваш " | +--span | | | +--текст "первый день" | +--текст "."

В действительности Internet Explorer создает следующий DOM.

Article (без дочерних элементов) h1 (родственный article) | +--текст "Добро пожаловать в Инитех" p (родственный of h1) | +--текст "Это ваш " | +--span | | | +--текст "первый день" | +--текст "."

Существует способ обойти эту чудную проблему. Если предварительно создать фиктивный тег через JavaScript, то Internet Explorer волшебным образом признает элемент и позволит добавлять к нему CSS. Нет нужды вставлять фиктивный элемент в DOM. Простого однократного создания элемента достаточно, чтобы научить IE стилизации элемента, который он не признает.

article { display: block; border: 1px solid red }

document.createElement("article");



Welcome to Initech

This is your first day.

Это работает во всех версиях Internet Explorer, включая IE 6! Мы можем расширить эту технику, чтобы сразу создать фиктивные копии всех новых элементов HTML5 - опять же, они никогда не вставляются в DOM, так что вы их не увидите. Иначе пришлось бы беспокоиться о браузерах, не поддерживающих HTML5.

Реми Шарп написал скрипт с именем HTML5 enabling script . Скрипт прошел уже 14 версий со времени написания, но вот его основная идея.

var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(",");
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}

Фрагмент and называется . Internet Explorer интерпретирует его как установку: «если текущий браузер Internet Explorer и версии ниже 9, то выполнить этот блок». Любой другой браузер будет рассматривать весь блок как комментарий HTML. Конечным результатом является то, что Internet Explorer до версии 8.0 включительно будет выполнять этот скрипт, а другие браузеры целиком его игнорировать. Это позволяет страницам загружаться быстрее в тех браузерах, что не поддерживают данный хак.

Код JavaScript относительно простой. В переменной e хранится массив строк вроде «abbr», «article», «aside» и др. Затем в цикле обходим этот массив и создаем каждый элемент через document.createElement() . Так как мы игнорируем возвращаемое значение, элементы не добавляются в DOM. Этого достаточно, чтобы заставить Internet Explorer обрабатывать эти элементы так, как нам надо, чтобы использовать их позже на странице.

Это «позже» имеет большое значение. Скрипт должен располагаться в верхней части страницы, предпочтительно внутри , а не внизу. Таким образом, Internet Explorer будет выполнять скрипт прежде, чем он разберет теги и атрибуты. Если вы вставите скрипт в нижнюю часть страницы, будет слишком поздно. Internet Explorer уже получит неправильную разметку и построит ошибочный DOM и уже нельзя будет повернуть назад и настроить все заново.

Реми Шарп уменьшил скрипт и разместил его на Google Project Hosting . Там находится сам код скрипта и MIT-лицензия, так что вы можете использовать его в любом проекте. Если хотите, можете сделать ссылку на последнюю версию скрипта напрямую, как показано ниже.

Мой блог

Теперь мы готовы начать использовать новые семантические элементы HTML5.

Заголовки

Вернемся к . В частности, посмотрим только на заголовки.

Мой блог

...

День путешествия

...

Я уехал в Прагу!

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

Во-первых, давайте избавимся от . Хотя это типовой шаблон, он ничего не значит. Для тега не задана семантика, атрибут id тоже не несет определенного смысла. Браузеры не могут сделать какой-либо вывод на основе значения id . Вы можете заменить строку на и у нее останется такое же семантическое значение, т.е. никакое.

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

Мой блог

Много усилий пошло на создание этих усилий

...

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

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

В HTML4 элементы – были единственным способом создания схемы документа, например, такой.

Мой блог (h1) | +--День путешествия (h2) | +--Я в Праге! (h2)

Прекрасно, но это означает, что нет никакого способа для разметки слогана «Много усилий пошло на создание этих усилий». Если мы попытемся отметить его как , то добавится фантомный узел в схему документа.

Мой блог (h1) | +--Много усилий пошло на создание этих усилий (h2) | +--День путешествия (h2) | +--Я в Праге! (h2)

Может быть, мы могли бы отметить слоган как , а каждый заголовок статьи как ? Нет, это еще хуже.

Мой блог (h1) | +--Много усилий пошло на создание этих усилий (h2) | +--День путешествия (h3) | +--Я в Праге! (h3)

У нас все еще есть фантомный узел в схеме документа, но он «украл» детей, которые по праву принадлежат корневому узлу. В этом и заключается проблема: HTML4 не предоставляет способ разметки подзаголовка без добавления его в схему документа. Независимо от наших перестановок, «Много усилий пошло на создание этих усилий» будет в конечном итоге в этом графе. Именно поэтому мы остановились на семантически бессмысленной разметке вроде

.

HTML5 предоставляет решение - элемент . Он используется в качестве обрамления для двух или более связанных элементов заголовка. Что значит «связанных»? Лишь то, что взятые вместе они создают один узел в схеме документа.

Возьмем эту разметку.

Мой блог
Много усилий пошло на создание этих усилий

...

...

День путешествия

...

Я в Праге!

Созданная схема документа.

Мой блог (h1 и hgroup) | +--День путешествия (h2) | +--Я в Праге! (h2)

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

Статьи

Вновь обратимся к и посмотрим, что можно сделать с этим кодом.

Октябрь 22, 2009

День путешествия


...

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

Октябрь 22, 2009

День путешествия


...

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

Октябрь 22, 2009

День путешествия



...

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

В HTML 4 единственным путем формирования схемы документа было использование – . Если вы хотели иметь лишь один корневой узел в схеме, то должны были ограничиться одним . Но спецификация HTML5 устанавливает алгоритм генерации схемы документа, включающий в себя новые семантические элементы. Этот алгоритм говорит, что создает новый раздел, иными словами, новый узел в схеме документа. А в HTML5 каждый раздел может содержать собственный тег .

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

Зайду с другой стороны. В HTML4 нет универсального элемента для заголовков. Есть шесть строго пронумерованных тегов – , которые должны быть вложены в указанном порядке. Это хреново, особенно если ваша страница «сборная», а не «авторская». Эта проблема решается новыми элементами для разделов и правилами для имеющихся заголовков. Если вы используете новые элементы для разделов, я могу дать вам эту разметку.

Заголовок

Бла-бла...

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

Профессор Маркап говорит

☞ В реальности все немного сложнее, чем я сказал. Новые «явные» элементы разделов (например, внутри ) могут взаимодействовать самым неожиданным образом со старыми «неявными» элементами разделов ( – ). Ваша жизнь будет проще, если вы станете использовать только один подход, но не оба сразу. Если придется на странице включить оба подхода, проверьте результат в HTML5 Outliner и убедитесь, что схема вашего документа осмысленна.

Дата и время

Интересно, не так ли? Конечно, не так интересно как спускаться голышом на лыжах с Эвереста и петь гимн США, но довольно захватывающе, насколько это позволяет семантическая верстка. Продолжим с нашим примером. Я выделил следующую строку.

Октябрь 22, 2009

День путешествия

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

Октябрь 22, 2009

У элемента три части:

машинный шаблон времени;

понятный для человека текст;

необязательный атрибут pubdate.

В данном примере атрибут datetime указывает только дату, не время. Формат такой: четыре цифры года, две цифры месяца и две цифры дня, разделенные дефисом.

Октябрь 22, 2009

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

Октябрь 22, 2009 13:59 Крск

Заметьте, я изменил и содержание текста - то, что находится между и - в соответствии с машинным шаблоном. На самом деле это не обязательно. Текст может быть любым, главное правильное значение даты/времени в атрибуте datetime. Вот валидный HTML5.

в четверг

И это тоже валидный HTML5.

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

Октябрь 22, 2009

Если вам не нравится «голый» атрибут, то есть альтернатива.

Октябрь 22, 2009

Что означает pubdate ? Одно из двух. Если располагается внутри , то это дата публикации статьи, если не внутри , то это дата публикации всего документа.

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

Октябрь 22, 2009


День путешествия

Lorem ipsum dolor sit amet...

Навигация

Одна из наиболее важных частей любого веб-сайта это навигация. На сайте CNN.com вверху каждой страницы имеются вкладки, ссылающиеся на разные новостные разделы сайта: «Entertainment», «Tech», «Travel» и др. У Google на страницах результатов поиска есть аналогичная полоса в верхней части страницы, чтобы опробовать другие службы Google - «Картинки», «Видео», «Карты» и др. В страница содержит навигацию в заголовке по разным разделам нашего гипотетического сайта - «главная», «блог», «галерея» и «обо мне».

Вот как панель навигации исходно выглядит.

• главная


• блог


• галерея


• обо мне

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

Кто заботится о семантике навигации? В первую очередь люди с ограниченными возможностями. Почему? Рассмотрим такой сценарий: ваши движения ограничены и пользоваться мышью вам трудно или невозможно. Чтобы компенсировать это, вы можете использовать дополнение браузера, которое позволяет переходить к основным навигационным ссылкам. Или подумайте об этом: если вы плохо видите, можно использовать специальную программу под названием «экранный ридер», которая преобразует текст в речь. Как только вы получите заголовок страницы, следующая важная информация о странице это основные навигационные ссылки. Если вы хотите перейти к ним, то скажете вашему ридеру перепрыгнуть к панели навигации и начать читать. Если вы хотите, можете сказать ридеру пропустить навигацию и начать читать основное содержание. В любом случае, выявленные навигационные ссылки важны программно.

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

• главная


• блог


• галерея


• обо мне

Спроси профессора Маркапа

☞ В. Ссылки «пропустить» совместимы с элементом ? Нужны ли такие ссылки в HTML5?

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

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

Подвал

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

© 2009 Марк Пилгрим

Это валидный HTML5. Если вам нравится код, оставьте его. Но HTML5 предоставляет для этих целей специальный элемент - .

© 2009 Марк Пилгрим

Что можно поместить в подвал? Наверное то, что вы добавили сейчас в . Это ответ по кругу, но это действительно так. В спецификации HTML5 говорится: «подвал обычно содержит информацию о разделе, такую как: автор, ссылки на соответствующие документы, авторские данные, и тому подобное». В нашем примере это указание авторского права и ссылка на страницу об авторе. Глядя на некоторые популярные сайты, я вижу большой потенциал у подвала.

• На CNN подвал содержит авторские права, ссылки на переводы, а также ссылки на условия обслуживания, конфиденциальность, страницы «О нас», «Контакты» и «Справка». Все полностью можно добавить в .
• У Google симпатичная главная страница, внизу ссылки «Рекламные программы», «Решения для предприятий», «Всё о Google»; авторские права, ссылка на политику конфиденциальности. Все это может быть внутри контейнера .
• В подвале моего блога содержатся ссылки на другие мои сайты плюс авторские права. Определенно подходит для элемента . Замечу, что ссылки сами по себе не должны оборачиваться элементом , поскольку это не навигация по сайту, а всего лишь коллекция ссылок на другие мои проекты.

В наше время в моде «толстые подвалы». Посмотрите на сайт W3C. Подвал содержит три столбца, помеченных как «Navigation», «Contact W3C» и «W3C Updates». Код выглядит примерно так.

Navigation

• Home


• Standards


• Participate


• Membership


• About W3C

Contact W3C

• Contact


• Help and FAQ


• Donate


• Site Map

W3C Updates

• Twitter


• Identi.ca

Copyright © 2009 W3C

Чтобы преобразовать это в семантический HTML5, я хотел бы сделать следующие изменения:

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

Окончательный код может выглядеть примерно так.

Navigation

• Home


• Standards


• Participate


• Membership


• About W3C

Contact W3C

• Contact


• Help and FAQ


• Donate


• Site Map

W3C Updates

• Twitter


• Identi.ca

Copyright © 2009 W3C