Html теги —
Содержание:
- и
- …
- Что за тег h1
- Зачем нужны подзаголовки h2-h6
- Как заполнять h-теги в WordPress
- Примеры составления заголовков H2
- About Sectioning Content Element Tags
- Что такое и что означает H1, H2, H3, H4
- Attributes¶
- How to style <h1>-<h6> tag?
- Как правильно прописывать подзаголовки h2-h6
- Где работать с разметкой статьи (важно)
- Важность иерархии ..
- Примеры CSS H1, H2
- Заголовки h3-h6
- Раздел HEAD.
- HTML5’s New Usage Rules
Советы для названия заголовков
Советы ниже актуальны для заголовков всех уровней, будь то первый уровень <h1> или какой-то из уровней ниже.
Заголовки должны:
- выстраиваться в иерархическом порядке;
- не оканчиваться точкой;
- иметь смысл, передавать идею следующего за ним текста (а не просто для «пусть будет»);
- быть даже в небольших статьях, которые можно разделить на несколько частей;
- не иметь грамматических ошибок (наличие таковых может снизить релеватность заголовка).
Другие советы, которые можно дать при составлении заголовков:
- не стоит злоупотреблять заголовками и делать на странице множество <h2>…<h6> — поисковые боты могут расценить это как переоптимизацию сайта либо спам;
- в заголовках должны быть прямые вхождения ключевых слов, так как это повысит релевантность страницы в отношении этого запроса; однако слишком большая плотность ключевых слов не пойдет в плюс – поисковые боты будут игнорировать подробные заголовки из-за переоптимизации;
- заголовки должны быть уникальными (повторяющиеся заголовки поисковые системы могут не учитывать);
- заголовок должен быть близок к началу документа (то есть к началу HTML-кода): чем выше заголовок, тем более высокое значение он имеет (по сравнению с другими элементами страницы);
- желательная длина заголовка – не более 60 символов; это связано с поисковыми системами, которые воспринимают определенное количество символов (и длинный заголовок могут обработать не полностью).
Отдельно можно сказать о дизайне заголовков – будет здорово, если все заголовки на странице будут отличаться от другого текста (даже если речь идет не о <h1>, а о <h5> или <h6>). Можно как-то стилистически выделять заголовки, например, ставить их на цветную плашку или выделять шрифтом.
А подзаголовки можно нумеровать, при этом ставить цифры в виде картинок. И удобно, и красиво.
What is an H1 tag?
The <H1> HTML tag is the first header tag visible on a page. It is used for the title of a page or post. When viewed in HTML code, the H1 value is enclosed in <h1></h1> tags.
To make the text stand out, the H1 tag is usually formatted differently than the rest of the page tags.
Look at the example below.
The H1 tag has the value of “On-Page SEO” and when viewed in HTML is looks like this:
H1 tag
The easier way to understand the use of the H1 tag is to imagine that you are writing an outline of a large document. The main title of your document will be your <H1>, your main points the <H2>, and sub-points the <H3>.
H1 Tag Vs Page Title
One of the most important elements for SEO purposes is the title tag (<title></title>) and should not be confused with the H1 tag.
Let’s see below how these two differ and why you should care.
The main differences between the two are:
- The title tag is shown in the SERPS (search engine result pages). It is used as the main heading of the snippet in the search results.
- The title tag is not shown visually on a page but it is part of the page header <header></header> and it is also shown in the browser title.
- The <H1> tag is shown to users while browsing a page.
- The title tag is a strong signal to search engine crawlers on what the page content is all about.
Что такое заголовки H1 и H2?
Заголовками называются слова, словосочетания или фразы, обобщающие смысл информации, следующей после них. Нам вовсе необязательно перечитывать весь текст статьи в журнале или газете, чтобы понять, о чем же в ней будет идти речь. Мы бросаем взгляд на заголовки и подзаголовки и решаем, интересен ли нам этот материал, стоит ли ее читать. Если мы открываем учебник или инструкцию, то с помощью заголовков нам легко найти именно ту информацию, которая нам нужна. Словом, заголовки не только привлекают читателей, но и служат их удобству.
Тексты на сайтах также должны иметь заголовки. Этому существует как минимум 2 причины:
1. Заголовки структурируют текст, делают его более удобным для чтения. Сплошной текст (часто его называют «простыней») труден для восприятия, читать его не хочется. А так как поведенческие факторы (совокупность действий посетителей на сайте) сегодня учитываются поисковыми системами, вы заинтересованы в том, чтобы пользователь прочел текст на вашем ресурсе, а не закрыл страницу, испугавшись «простыни».
2. Заголовки дают понять поисковым системам, какая информация содержится в той или иной части текста. Опираясь на заголовки, поисковики оценивают, насколько данная информация соответствует ожиданиям пользователей. Именно поэтому они так важны при оптимизации текстов.
Теперь вы понимаете, что пренебрегать использованием заголовков в текстах на страницах сайта не стоит? Тогда следуем дальше!
Что же обозначают термины H1 и H2? Нам придется немного затронуть вопросы, касающиеся html-верстки
Н1 и H2 (а, точнее,
и
) – html теги, которые показывают важность текста, следующего после них. Их еще называют тегами акцентирования
В html-документе это выглядит так:
На веб-странице такие заголовки по умолчанию имеют разное форматирование:
Вообще-то, существует 6 уровней заголовков: от H1 до H6. Соответственно, наибольший вес имеет заголовок H1, заголовок H2 является второстепенным, а заголовок шестого уровня H6 наименее значим. Однако для сео продвижения наиболее важны заголовки H1 и H2. О правилах их использования для оптимизации текстов мы и поговорим.
Что такое заголовки?
При слове «заголовок» вы могли подумать о теге <title> — но нет, в этой статье речь пойдет о тегах <h1>…<h6>.
Разница между этими тегами заключается в уровнях: <h1> — это заголовок первого уровня, <h2> — заголовок второго уровня и так далее. Чем выше уровень, тем более важным считается блок после заголовка; то есть тег <h6> будет наименее значимым заголовком из всех представленных. В свою очередь тег <h1> считается наиболее важным из всех этих тегов и вторым по значимости для SEO-продвижения (первый по значимости – тег <title>, который определяет заголовок документа).
Эти теги используются для того, чтобы логично оформить содержание страницы, структурировать ее для того, чтобы текст был разбит на логические части, и материал более легко воспринимался читателями.
Важное дополнение: теги
…
не используются для выделения текста; если вам нужно выделить фразу жирным, используйте тег , а не
(если стиль этого заголовка просто выделение жирным)
Что за тег h1
Тег h1 – это оглавление текста (все равно что название книги или заголовок статьи в газете).
В плане привлекательности для пользователя он имеет главное значение. Но для SEO-продвижения больший вес будет иметь Title.
Title – это тоже заголовок, но прописывается он не только для людей, но и для роботов. Он отображается не на самой станице, а только во вкладке браузера и в сниппете в качестве активной ссылки на сайт. Фактически title является альтернативным, но главным заголовком для html-документа. Если он отсутствует, то поисковая система берет за основу h1 и использует его в серпе.
Почему h1 должен различаться с Title
Довольно важно понимать, что h1 и Title — это разные заголовки. И их соответственно надо умело комбинировать
Вот азы на эту тему:
https://youtube.com/watch?v=U6ODRKPEJ_M
Пренебрежение правилами уникализации и релевантности заголовков может привести к тому, что сайт попадет под фильтр
Последнее время поисковые системы стали уделять особое внимание качеству контента и его SEO-настройкам. Дубли, переспам, хаотичное расставление заголовков, их несоответствие содержимому карается
Требования по длине H1
H1 рекомендуется делать более лаконичным, чем Title, не превышая количество символов более, чем 50. Но не случится катастрофы, если заголовок получится длиннее, когда не удается втиснуть всю суть в обозначенное количество.
Специальные плагины для WordPress позволяют проанализировать правильное заполнение всех мет прямо в редакторе.
Правила для грамотного написания h1
- Должен быть уникальным для всего сайта и абсолютно читабельным;
- Не повторяет тег title, но и не противоречит ему;
- Не стоит делать его слишком длинным (более объемным можно делать title);
- Используется только 1 раз на каждую страницу;
- Релевантен тексту и отображает смысловую суть материала;
- Интересен, привлекателен для пользователя;
- Нельзя ставить в конце точку и рекомендуется по минимуму использовать знаки препинания.
Применение ключей
Главные ключевые фразы, в первую очередь, должен содержать title. Но следует их писать и в h1. И там, и там лучше это делать в самом начале. Но лучше бы ключевые слова не дублировали друг друга в этих двух тегах. Нужно использовать разные словоформы или разбавленные вхождения в h1 и прямые в title.
Зачем нужны подзаголовки h2-h6
Теги от h2 до h6 располагаются уже в теле самой статьи, структурно разделяя ее на тематические абзацы, и в коде HTML-документа, выделяя его значимые элементы. Они также идентифицируются поисковыми роботами для семантического анализа страницы.
Нужны для того, чтобы иерархично обозначать все важное и стоящее внимания пользователя на странице. Такая структура помогает человеку быстрее сориентироваться в информации и оценить ее соответствие своим запросам
h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте
h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.
h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.
Длина всех h-тегов должна быть в пределах 50 символов.
Как заполнять h-теги в WordPress
h1 по умолчанию заполняется в поле над статьей:
Чтобы сделать подзаголовки h2-h6, надо выделить необходимый элемент или поставить курсор на нужную строку и, наведя курсор на вкладку «заголовки», выбрать нужный, кликнув по нему.
Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в Word заголовки автоматически отобразятся в нужных размерах. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.
Правильная расстановка заголовков в тегах h1, h2, h3, h4, h5, h6 может дать отличный результат для SEO сайта. По этому, не жалейте времени на настройку.
h1-h6 заголовки имеют чрезвычайно важное значение. Не стоит ими пренебрегать, но и злоупотреблять тоже не стоит
Заголовки могут как поднять, так и опустить сайт.
Примеры составления заголовков H2
Каким образом составляются заголовки H2? Их в тексте может быть несколько. Как правило, они конкретизируют заголовок H1 и структурируют весь текст. Вернемся к нашему примеру со страницей, на которой представлена женская обувь. Для данной страницы можно написать продающий текст, в котором будут описаны преимущества моделей, предлагаемых покупательницам, и представлена таблица размеров. Также на странице пользователь сможет найти каталог обуви с фото и ценами. При этом заголовки в тексте могут быть такими:
Если вы вспомните поисковые запросы, которые мы используем для продвижения нашей страницы в данном примере, то поймете, что в заголовки H2 мы включаем расширенные запросы, которые имеют более низкую частотность. Они могут быть представлены в непрямом вхождении (их можно склонять, «разбавлять» другими словами). А главное – они конкретизируют наш заголовок H1 и сигнализируют поисковой системе о том, что текст, идущий после них, действительно отвечают поисковым запросам, прописанным в заголовке страницы (Title).
About Sectioning Content Element Tags
There are only four sets of element tags you can use to denote content sections within your webpage, but they can be a little tricky to wrap your mind around at first.
They are:
The two you are likely to use the most are and tags. They are similar to one another, but with an important distinction.
tags should be used where a piece of content could be taken out of a page completely and still make sense by itself with no surrounding content.
tags, on the other hand, should be used for content that is grouped together according to a theme, but makes sense only in the context of the content surrounding it.
For detailed examples on how to use each of these tags, take a moment to check out these W3C pages:
tags are designed to indicate major navigation blocks on a webpage, such as a menu bar or pagination. They shouldn’t be applied to regular links, only to significant sections that are wholly dedicated to navigation.
tags could effectively be described as the «everything else» element for content that is neither article, section nor navigation. W3C prescribes this tag for use when something is tangentially related to the content around it, but is separate from the main content of the page, such as sidebars, blogrolls and so on.
For more information on and tags visit:
Что такое и что означает H1, H2, H3, H4
В качестве дополнение к введению, к этой статье, следует обобщить все, о чем пойдет речь. Все эти непонятные слова и буквы — HTML теги.
Не буду вдаваться в подробности сайтостроения и вообще в теорию данной сферы. Скажу лишь, что при верстке страницы сайта, любая информация обрамляется HTML тегом, для того, чтобы браузеры смогли правильно ее идентифицировать.
Это касается не только различных технических частей кода сайта, но и обычного текста. В нашем случае — статьи.
Что означает H1, H2, H3, H4
Тег H1 — это главный заголовок страницы (в нашем случае статьи). Он должен быть единственным в тексте и по своей сути обязан отражать главную мысль самой статьи.
Теги H2, H3, H4 (и следующие) — это подзаголовки. Согласно цифре, они выстраиваются в тексте в древовидном виде. Например:
- Тег H2 — это подзаголовок второго уровня, после главного заголовка;
- Тег H3 (и далее) — это подзаголовки третьего уровня и ниже. Иначе говоря, подподзаголовки.
Как использовать H1, H2, H3, H4
Любой тег в HTML разметке (за редким исключением) имеет две части: открывающую и закрывающую. Части тега, в свою очередь, обрамляются символами «больше» и «меньше».
Выглядит это так:
- <h1> — открывающий тег заголовка;
- </h1> — закрывающий тег заголовка.
По такому принципу используются все остальные теги (H2, H3, H4 и т.д.).
Между открывающим и закрывающим тегом, располагается текст заголовка.
Например, в данной статье это выглядит так:
Пример:
Разметка заголовка тегом H1
Заголовок H1 используется один раз, в самом начале документа. Все последующие подзаголовки уже являются тегами H2, H3, H4 и т.д. (в зависимости от вложенности).
Выглядит это так:
Иерархия заголовков в документе
Attributes¶
Attribute | Value | Description |
---|---|---|
align | leftrightcenterjustify | Defines the vertical alignment of the tag content. Not supported in HTML 5. |
The <h1> to <h6> tags support the Global Attributes and the Event Attributes.
How to style <h1>-<h6> tag?
Common properties to alter the visual weight/emphasis/size of text in <h1>-<h6> tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in <h1>-<h6> tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for <h1>-<h6> tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for <h1>-<h6> tag:
- CSS text-shadow property adds shadow to text.
- CSS text-align-last property sets the alignment of the last line of the text.
- CSS line-height property specifies the height of a line.
- CSS letter-spacing property defines the spaces between letters/characters in a text.
- CSS word-spacing property sets the spacing between words.
Как правильно прописывать подзаголовки h2-h6
- Нельзя, чтобы наименьший подзаголовок присутствовал без большего. То есть, если в тексте стоит метатег h4, то ему обязательно должны предшествовать h2 и h3.
- Чем выше заголовок по уровню, тем крупнее должен быть и шрифт. В WordPress обычно по умолчанию настройки выставлены таким образом, что теги автоматически форматируются в правильном виде.
- Все h-теги обязаны соответствовать содержанию контента, отображать суть информации.
- Недопустимо использовать h1-h6 в качестве анкоров или активных ссылок.
- Нельзя писать другие теги внутри тега h.
- В h-тегах допускается только текст и знаки препинания.
- В подзаголовках не должно быть переспама ключевых слов. Ключевики лучше всего задействовать в title, h1, h2, а в более мелких, таких как h3, h5, h6 делать упор на детальное раскрытие темы.
Если в разметке страницы прописан title и основной заголовок H1, но сам текст статьи не слишком большой и не содержит в себе подзаголовков, это не является ошибкой. В ТОПе находится немало страниц, где контент идет практически сплошной полосой, разве что разделенной на абзацы. Попасть в лидирующие позиции можно и без «колдовства» над разметкой текста, делая больший упор на ПФ. Сайты на WordPress прекрасно индексируются поисковиками. Но все же применение этих тегов не только облегчает задачу, но и делает контент более легким и приятным для визуального восприятия.
Где работать с разметкой статьи (важно)
Многие авторы используют для написания статей текстовые редакторы, аналогичные Word или непосредственно его.
В таких редакторах заниматься разметкой текста — нет смысла. Во-первых, эти программы сами по себе используют HTML для разметки документов. Во-вторых, даже если пытаться в них что-то сделать — редактор превратит это все, в итоге, в абракадабру, которая совершенно не подойдет для заказчика.
В техническом задании просят использовать разметку лишь для того, чтобы быстро вставить текст на сайт. А испорченный Вордом материал, редактировать никто не будет и гарантированно вернут на доработку.
Именно поэтому, для разметки следует использовать специализированные редакторы. Саму статью можно написать где угодно, но работать с тегами следует в правильном редакторе.
Я советую использовать Sublime Text. Удобный и бесплатный редактор, который заточен именно под работу с кодом.
Кстати, для разметки текста, который будет вставлен в визуальный редактор на сайте, можно использовать стандартные стили Word. Которые, в свою очередь, соответствуют HTML тегам.
Важность иерархии ..
В html коде страницы первым должен быть тег <h1>. Нельзя сначала делать заголовок <h2>, потом <h1>. Аналогично и с другими номерами тегов. Вот правильное использование тегов:
Т.е. каждый более низкий тег всегда располагается во вложении более высокого. Это и есть правильная иерархия. При этом не допускаются резкие переходы с <h1> на <h4>, с <h2> на <h5> и т.п.
Помимо такой иерархии нужно еще соблюдать и иерархию в плане размеров шрифтов. Т.е. более важные заголовки должны иметь более большой шрифт. Хотя подтверждающих фактов тому, что поисковые системы анализируют стили, которые находятся в .css файлах пока никто не объявлял, но негласно есть такое правило среди вебмастеров и оптимизаторов.
Может ли заголовок <h1> и <title> совпадать?
На этот вопрос сейчас разгораются споры. С одной стороны логично, чтобы <title> и <h1> совпадали. Но с другой стороны это как бы дублирование название страницы. Вообще чаще всего заголовки будут разными, поскольку в <h1> вряд ли можно и имеет смысл писать слова «Купить, цена, фото», а в тайтле такие слова наоборот используются. Отвечая на вопрос — делайте так, чтобы было все понятно пользователю и смотрелось естественно.
Сколько может быть заголовков <h2>, <h3>?
Заголовочных тегов <h2>—<h6> может быть несколько на странице, все зависит от размера контента. Количество контента на один заголовок должно быть адекватным. Другими словами не должно быть так, что после заголовка <h2> идет 5 предложений, потом опять <h2> и опять маленький абзац. В таких случаях скорее всего лучше вообще не использовать заголовочные теги.
Не стоит путать заголовочные теги <head> и h1-h6. Одни нужны для поискового робота, другие для поискового робота и пользователей.
Примеры CSS H1, H2
Все примеры будут реализованы по принципу стилизации
заголовков моим методом (пример, сайт sitear.ru).
CSS стилизация H1 заголовка
В данном пункте остановимся на реальных примерах стилизации h1 заголовка. Примеры, громко
сказано, так как, у каждого сайта уникальный дизайн. Приведу один,
универсальный пример стилизации H1.
Мою идею стилизации заголовков вы уже поняли, хочу дополнить ее, используя в background-image прозрачность,
которую легко можно сделать в фотошопе. Пример смотрите ниже.
CSS код:
.heading { width:500px; background: #888;} h1 {height:70px; background: url(left.png) left top no-repeat; color:#FFF; line-height: 50px;} h1 strong {height:70px; display:block; margin-left:60px; padding: 6px 60px 0px 0px; background: url(right.png) right top no-repeat;}
Исходные картинки:
HTML код:
<div class="heading"> <h1><strong>Текст h1 заголовка</strong></h1> </div>
Как видите исходные картинки имеют полупрозрачность, а в
классе heading, меняя
значение background, можно
добиться следующих результатов:
CSS h1 + h2 (совместная стилизация)
Стилизировать h1 и h2 вместе,
уместно при наличии эпилога, или маленького вступления к статье на вашем сайте, которое можно поместить в тег h2.
Например:
H1 – Стилизация
h1, h2 заголовков;
H2 – Учимся оформлять h1, h2 заголовки на css.
Это мой пример, вероятней всего у вас своя идея, как оформлять страницы сайта.
Пример css h1 +
h2, схож с пред идущим,
рассмотрим css код.
.left{height:100px; background: url(left.png) left top no-repeat;} .right{ width:500px; height:100px; display:block; margin-left:45px; padding: 0px 45px 0px 0px; background: url(right.png) right top no-repeat;} h1 {color:#FFF; font-size:18px; padding:15px;} h2 {color:#CCC; font-size:16px; padding:5px;}
Исходные картинки:
HTML код:
<div class="left"> <div class="right"> <h1>Текст H1 заголовка</h1> <h2>Маленькое вступление, или описание статьи, заключенное в H2 тег.</h2> </div> </div>
Отображение:
Суть совместной (h1 + h2) стилизации
заголовков, схожа с пред идущим примером, только в этом случае используются div блоки.
CSS стилизация H2 заголовка
Стилизация h2
заголовка дело не хитрое. Но, раз уж наша статья касается стилизации h1 и h2 заголовков, мы рассмотрим все до
конца.
Как правило, тег h2, используют для выделения подпунктов статьи или другого
материала на сайте. Например, как на сайте sitear.ru.
Я бы советовал создавать, скромные, неброские, но удобные h2 заголовки. Мне очень нравится идея,
как организовано на Википедии. Советую и вам создать подобно. Это просто и
удобно. Например:
<style> h2 {font: bold 18px Arial; color:#595; border-bottom:#CCC solid 1px; margin-top:25px;} </style> <h2>Пример стилизации h2 заголовка</h2> <p>Lorem ipsum dolor sit amet, <a href="http://sitear.ru">consectetuer adipiscing</a> elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <h2>Еще подраздел вашей статьи</h2> <p>Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.</p>
Отображение:
Просто, удобно и кроссбраузерно.
Надеюсь, вам помогла моя статья. Если остались вопросы
или предложения по поводу css стилизации h1, h2 заголовков,
пишите в комментарии.
Дальше: Конвертация трафика сайта
Заголовки h3-h6
Все заголовки начинаz с h3 и до h6 несут в себе уточняющую и дробящую страницу на подразделы роль, но это используется крайне редко. У вас должна быть просто очень огромная статья, чтобы можно было выстроить такую иерархию из подразделов страницы и задействовать все типы заголовков.
Основные требования к h3-h6
- Нельзя, чтобы наименьший подзаголовок присутствовал без большего. То есть, если в тексте стоит тег h4, то ему обязательно должны предшествовать h2 и h3.
- Чем выше заголовок по уровню, тем крупнее должен быть и шрифт. В WordPress обычно по умолчанию настройки выставлены таким образом, что теги автоматически форматируются в правильном виде.
- Все h-теги обязаны соответствовать содержанию контента, отображать суть информации.
- Недопустимо использовать h1-h6 в качестве анкоров или активных ссылок.
- Нельзя писать другие теги внутри тега h.
- В h-тегах допускается только текст и знаки препинания.
- В подзаголовках не должно быть переспама ключевых слов. Ключевики лучше всего задействовать в title, h1, h2, а в более мелких, таких как h3, h5, h6 делать упор на детальное раскрытие темы.
Раздел HEAD.
Раздел HEAD содержит техническую информацию о веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д. Единственным обязательным тегом в разделе HEAD является тег <title>.
Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он не полностью поместится в заголовке веб-браузера:
<title>Заголовок страницы</title>
Текст, расположенный между тегами <title> и </title> используется в результатах, выдаваемых поисковыми машинами, в качестве текста ссылки на эту страницу. По этой причине заголовок должен максимально полно описывать содержание веб-страницы. |
С помощью одинарного тега <meta> можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой на веб-страницу:
<meta name="description" content="Описание содержимого страницы"> <meta name="keywords" content="Ключевые слова через запятую">
В разделе HEAD могут быть расположены также теги <base>, <link>, <script>, <style> и другие. Все эти теги мы рассмотрим в дальнейшем по мере изучения материала. |
HTML Введение
HTML Базовые теги
HTML5’s New Usage Rules
Yes, it’s true. You can now use as many sets of tags as are required, via HTML5. But that doesn’t mean they should be freely added in arbitrary locations.
Just as there were rules of tag usage that came from old document outlines, so too are there now new rules based on the HTML5 document outlining algorithm.
Here they are at a glance:
- Use one set of tags per sectioning root or content section.
- There should always be a level heading between the opening tag and the first content section, to label the overall document.
- When a level heading is to be used to label a content section, it should be the first heading that appears in the section, because the first heading is always interpreted as the section’s label.
- If a level heading is used to label a content section, any other headings used in that section should be H2 or lower in order to create an accurate document outline.
As I mentioned above, section labels don’t absolutely have to be tags. The HTML5 spec permits any heading tag to act as the label for a section, from through to . Again however, I always recommend using level tags to markup article content.
But if you do decide to use a tag other than for a section label, just ensure you follow the same rules as listed above, replacing in each rule with your chosen tag.