h5 в HTML


Содержание

Расставляем теги h1-h2 правильно — повышаем конверсию сайта

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

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

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

Зачем нужны теги h1-h6?

В теги заключается название сайта, заголовки и подзаголовки текста:

В HTML теги заголовков обозначаются h от английского « header », что в переводе означает « заголовок, шапка ». Вот пример того, как это выглядит:

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

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

Синтаксис тегов h1-h6

Наибольшей популярностью пользуются теги h1 h2 h3 .

Как правильно использовать тег h1?

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

HTML тег h1 – самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом ( заголовком страницы ). Title отражается в браузере вверху экрана с левой стороны в тот момент, когда открыта страница ресурса. Title прописывается в шапке страницы между , в то время, когда h1 — h6 указываются в самом « теле » страницы и заключаются в теги

Семантическая структура для HTML5 страницы. Семантика в HTML5

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

Семантическая структура для HTML5 страницы

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

Рисунок — Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head :

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

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные

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

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

Замечание по поводу тега H1

Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

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

Контент на странице

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

Оформление статьи

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

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime=»2015-09-30″ или с указанием часов минут и секунд datetime=»2015-09-30T15:25:55″ . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги (

) для обозначения темы секции.

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

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

Подвал сайта оформляется тегом

Заключение

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

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

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

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

в HTML

HTML includes 6 levels of headings, which are ranked by importance. These are

The rank is given in the heading name;

Browsers typically render the various headings in different sizes — with

Syntax

tag is written as

Examples

Basic tag usage

In Comparison to the Other Headings

Here’s what all six levels of headings look like.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the

tag/element.
Attribute Description
None

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the

tag , as well as with all other HTML tags.
  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the

element, as well as any other HTML5 element.
  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The align attribute is not supported in HTML5. Use the CSS text-align and/or vertical-align properties instead.

To see more detail on the two versions see HTML5

Tag and HTML4
Tag. Also check out the links to the official specifications below.

Template

Here’s a template for the

tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.
element does not actually have any local attributes (i.e. attributes that are specific to the element), but the following global attributes and event handlers are available to the element (and all other HTML elements).

For more information on attributes for this tag, see HTML5

Tag and HTML4

Tag Details

For more details about the

tag, see HTML5
Tag and HTML4

Specifications

Here are the official specifications for the

element.

What’s the Difference?

W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Теги h1-h6, заголовки в HTML

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

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

обозначает самый важный заголовок (заголовок верхнего уровня), а тег

обозначает подзаголовок самого нижнего уровня. Буква «h» в названии тега — это первая буква английского «heading».

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

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

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

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

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

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

is the most important and

the least. Display block Usage semantic | textual

elements
  • 4.2 W >5 Browser Support for headlines
  • 6 Attributes of headlines
  • Code Example

    Section Title

    Subsection Title

    Content Headings

    The six heading tags are an important part of HTML content writing. Besides the somewhat obvious need they fill (people sometimes want to put headlines on top of things), the headline tags also have SEO value, help you to be a more organized writer, and make pages more user-friendly.

    Headline Tags and SEO

    There are two things that a search engine is trying to figure out about your page:

    • What is it about?
    • How good is it?

    Generally, links to a page are used as a measure of quality (how good it is) and on-page analysis is used to figure out what the page is about. (There’s some overlap here of course: Google makes some judgments about the quality of a page by looking at the page, and also tries to figure out what the page is about by looking at what other pages say when they link to it.) One of the (many) things that Google and other search engines look at determine the content of a page is the words that appear inside heading tags. That’s why, if you are trying to rank for particular words or phrases, it’s a really idea to include those words and phrases into your headline tags.

    More organized writing

    When people write without using headline tags (say, when writing by hand or in visual editor like MS Word), they often just write in long, unbroken streams of text which go on too long. Or, worse yet, they might add visual headlines (with bold, ALL CAPS, larger text, or something else. This is very common, as people instinctively know they should break up text into smaller chunks. The problem with that is that it isn’t then clear how the different sections related to each other. Is the section headed with 15pt font supposed to be a subsection of the part headlines with 14pt bold font? Often, even the writer doesn’t know because they didn’t really think about it.

    Headline tags create a content hierarchy

    On a page with a single piece of content (which should be most pages), the main title for that content should be an

    tag. Major sections within that content should be headlined with

    . Subsections within those sections should be headed with

    , and so on. It should be possible to extract an outline from your headline tags. (In fact, we do this — look at the Contents widget at the top of the page.) This structure makes writing more organized, which (at least 99% of the time) also makes writing better.

    Headlines are good for users

    Here’s a dirty little secret about online content: readers skim. Almost no one reads every word of an online article. And there’s very little you can do about it. You certainly can’t stop it. But you can make it so that skimmers will have something to latch onto as their eyes move down the page. Headlines, if they are well-distributed and relevant to their content, give skimmers a bunch of little ways back into the text of the article. They also break up the article into seemingly-digestible bite-sized pieces, so that an antsy skimmer isn’t made anxious by a long solumn of uninterrupted text.

    And don’t forget linking

    As of HTML5, you can link to any element on a page by appending a hash-sign ( # ) and the id of the element. (In the past, you could only link to anchor elements.) By adding an id to every headline on your page, you can allow people to link to any place in your document. (Again, see how the Content links at the top of the page work.) These in-document links can be tremendously helpful, especially if you provide reference content of any sort, or if your articles are particularly long.

    Using headline tags to structure your content

    Generally speaking, there are two types of content pages: single content pages (which present a single piece of content) and index pages (which list a bunch of content). Index pages include the main blog page of a site, category and tag archives, author pages that list all the articles written by the author, and so on. Then there is also content (sidebars, widgets, footers) which is appears on nearly every page and which isn’t really “content.” How you use headline tags in these situations can have an impact on SEO and usability.

    elements

    On single content pages throughout your site, the title of that particular piece of content should almost always be in the

    tag near the top of the . Then, as mentioned above, your sections within the article can use

    On an index page, it usually makes sense to put either the site title in an

    tag, or to put the index name there: the category name, the author name, or whatever it is that defines that page. Then the titles of all the individual pieces that are listed there should have an

    element for their titles.

    In the past it has been common to use an

    tag for the site title when it appears on single-content pages.

    Opinions are mixed on this, but the trend is less and less of it. More people are simply placing the title (and, more likely, a logo img) in the header and saving the headline tags for specific on-page content. Part of your own consideration for whether to do this will likely have to do with how important is your own site’s title in relationship to your SEP goals.

    Widgets and other “non-content”

    It has also been common until recently to use

    Заголовки страницы h1, h2, h3 … h6

    Что такое html тег h1…h6?

    Теги h1, h2, h3, h4, h5 и h6 представляют из себя заголовки с первого по шестой уровень. Они определяют важность сегмента, который озаглавливают. Градация начинается от h1 — самого приоритетного, и заканчивается h6, который имеет низший приоритет из всех.

    При этом на странице может быть не более одного заголовка h1, так как именно этот тег описывает все содержимое страницы целиком.

    Заголовков h2…h6 в документе может быть сколько угодно.

    Все они имеют крайне простой синтаксис. Начинается заголовок с тега

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

    Тут находится текст заголовка

    На рисунке ниже представлен заголовок внутри HTML страницы.

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

    Пример заголовка h1

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

    Его синтаксис крайне прост:

    Заголовки страницы h1, h2, h3 … h6

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

    Пример заголовков h2…h6

    Наглядный пример вложенных заголовков h2 и h3 можно увидеть на странице https://dh-agency.ru/title/ (Для удобства, на рисунке мы убрали текст статьи)

    Роль тегов h1…h6 в SEO

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

    Подзаголовки h2, h3, h4, h5 и h6 структурируют документ разбивая его на блоки различной степени вложенности. Опираясь именно на данные теги поисковая система определяет важность того или иного отрывка текста. Не стоит весь материал озаглавливать тегом h1 или h2. От этого он не станет «весомее». Вы просто потеряете возможность «расставлять» приоритетность внутри статьи. В таком случае, робот самостоятельно определит приоритетные и второстепенные отрывки, которые в итоге могут не совпадать с Вашим видением ситуации.

    Правильно прописываем h1

    Качественный заголовок h1 должен соответствовать ряду серьезных требований.

    Кратко и понятно описывать содержимое всей страницы;

    Быть написан на том же языке, что и весь материал страницы;

    Не содержать в себе сложных аббревиатур, технических параметров и сокращений;

    Быть длинной не более 60 символов, при этом располагаться на странице в одну строку;

    (Длинные заголовки неудобны для чтения и плохо воспринимаются поисковыми системами.)

    Содержать самые важные ключевые слова страницы;

    Не содержать в себе SEO СПАМа и не быть похожим на тег keywords;

    Не вводить пользователей в заблуждение;

    Иметь уникальное содержимое;

    Быть одним на странице;

    Ошибки при написании h1

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

    Слишком длинный заголовок;

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

    Заголовки состоящие из ключевых слов;

    Наличие SEO СПАМа может повлечь за собой исключение из поисковой выдачи. Не стоит превращать содержимое тегов

    Если Ваша фирма недостаточно известна, наличие ее названия в h1 повлечет за собой потерю драгоценного места.

    Заголовки, которые не описывают суть статьи.

    В первую очередь, h1 должен описывать суть страницы, а уже потом быть привлекательным и продающим.

    Наличие множества h1 в статье.

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

    Правильно прописываем h2…h6

    Для заголовков h2…h6 требования немного мягче. Для них справедливо все указанное выше, но при этом:

    Тегов одного уровня на странице может быть несколько; (К примеру, можно иметь 3 тега h2 в одном документе)

    Они должны описывать только тот блок, который озаглавливают;

    Могут иметь длину до 80 символов;

    Содержание технических параметров, аббревиатур и сокращений допускается; (Допускается, но не приветствуется)

  • Должны содержать в себе менее частотные ключевые слова; (В сравнении с тегом h1)
  • Ошибки при написании тегов h2, h3, h4, h5 и h6 очень схожи с теми, что допускают при создании h1. Поэтому, мы не будем уделять им внимание.

    Заголовки h1, h2,…h6 для WordPress

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

    Обратите внимание, что добавлять

    в текст статьи не нужно, так как это приведет к дублированию тега. Что для SEO может иметь негативные последствия.

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

    Заголовки второго, третьего, четвертого, пятого и шестого уровня — h2, h3, h4, h5 и h6 прописываются в теле статьи напрямую в HTML разметке или при помощи визуального редактора.

    Заголовки h1, h2,…h6 для Joomla!

    Так же, как и в WordPress, в Joomla! заголовок выводится из названия статьи. Данное поле не имеет ограничений по количеству символов, поэтому ориентируйтесь на допустимые размеры заголовков.

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

    Принцип создания вложенных заголовков при помощи тегов h2, h3, h4, h5 и h6 схож с WordPress. Их так же можно добавить через редактор HTML кода или с помощью визуального оформления.

    (Вид редактора может отличаться в зависимости от версии Joomla! или установленных модулей и настроек.)

    Заголовки h1, h2,…h6 для Opencart

    В Opencart для заголовка отведено отдельное поле, которое так и называется «HTML-тег H1». Это достаточно удобно, так как название может отличаться от фактически выводимого h1.

    Как и в других CMS, никаких ограничений внутри поля тут нету.

    Заголовки второго, третьего и т.д. уровней (h2, h3, h4, h5 и h6) прописываются в статье самостоятельно. Делается это так же, как и в других системах управления при помощи HTML разметки или редактора.

    HTML5

    A vocabulary and associated APIs for HTML and XHTML

    W3C Recommendation 28 October 2014

    4.3 Sections

    4.3.1 The element

    My Book

    A sample with not much content

    Published by Dummy Publicorp Ltd.

    My First Chapter

    This is the first of my chapters. It doesn’t say much.

    But it has two paragraphs!

    It Continutes: The Second Chapter

    Bla dee bla, dee bla dee bla. Boom.

    Chapter Three: A Further Example

    It’s not like a battle between brightness and earthtones would go unnoticed.

    But it might ruin my story.

    Appendix A: Overview of Examples

    These are demonstrations.

    Appendix B: Some Closing Remarks

    Hopefully this long example shows that you can style sections, so long as they are used to indicate actual sections.

    4.3.4 The element

    The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

    In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

    Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

    User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).

    In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.

    Notice the main element being used to wrap the main content of the page. In this case, all content other than the page header and footer.

    You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publication date and other metadata about the blog post.

    In the following example, there are two nav elements, one for primary navigation around the site, and one for secondary navigation around the page itself.

    A nav element doesn’t have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

    4.3.5 The element

    The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

    The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

    It’s not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

    The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.

    The following example shows how an aside is used to mark up a pull quote in a longer article.

    The following extract shows how aside can be used for blogrolls and other side content on a blog:

    4.3.6 The , , , , , and elements

    These elements represent headings for their sections.

    The semantics and meaning of these elements are defined in the section on headings and sections.

    These elements have a given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.

    h1 – h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the Common idioms without dedicated elements section of the specification.

    As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:

    Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is best is purely an issue of preferred authoring style.

    4.3.7 The element

    The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

    When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

    A header element is intended to usually contain the section’s heading (an h1 – h6 element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

    Here are some sample headers. This first one is for a game:

    The following snippet shows how the element can be used to mark up a specification’s header:

    The header element is not sectioning content; it doesn’t introduce a new section.

    In this example, the page has a page heading given by the h1 element, and two subsections whose headings are given by h2 elements. The content after the header element is still part of the last subsection started in the header element, because the header element doesn’t take part in the outline algorithm.

    4.3.8 The element

    The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

    When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

    Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer . Bylines and other information that could be suitable for both a header or a footer can be placed in either (or neither). The primary purpose of these elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.

    Footers don’t necessarily have to appear at the end of a section, though they usually do.

    When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

    The footer element is not sectioning content; it doesn’t introduce a new section.

    Here is a page with two footers, one at the top and one at the bottom, with the same content:

    Here is an example which shows the footer element being used both for a site-wide footer and for a section footer.

    Some site designs have what is sometimes referred to as «fat footers» — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers. in some ways, a whole «front page» in the footer.

    This fragment shows the bottom of a page on a site with a «fat footer»:

    4.3.9 The element

    The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

    For example, a page at the W3C Web site related to HTML might include the following contact information:

    The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)

    The address element must not contain information other than contact information.

    For example, the following is non-conforming use of the address element:

    Typically, the address element would be included along with other information in a footer element.

    The contact information for a node node is a collection of address elements defined by the first applicable entry from the following list:

    If node is an article element If node is a body element

    The contact information consists of all the address elements that have node as an ancestor and do not have another body or article element ancestor that is a descendant of node .

    If node has an ancestor element that is an article element If node has an ancestor element that is a body element

    The contact information of node is the same as the contact information of the nearest article or body element ancestor, whichever is nearest.

    The contact information of node is the same as the contact information of the body element of the Document .

    There is no contact information for node .

    User agents may expose the contact information of a node to the user, or use it for other purposes, such as indexing sections based on the sections’ contact information.

    In this example the footer contains contact information and a copyright notice.

    The h1 – h6 elements are headings.

    The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.

    h1 – h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection. Instead use the markup patterns in the Common idioms without dedicated elements section of the specification.

    Certain elements are said to be , including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

    Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.

    For the following fragment:

    . the structure would be:

    1. Foo (heading of explicit body section, containing the «Grunt» paragraph)
      1. Bar (heading starting implied section, containing a block quote and the «Baz» paragraph)
      2. Quux (heading starting implied section with no content other than the heading itself)
      3. Thud (heading of explicit section section)

    Notice how the section ends the earlier implicit section so that a later paragraph («Grunt») is back at the top level.

    Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section’s nesting level.

    Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

    For example, the following is correct:

    However, the same document would be more clearly expressed as:

    Both of the documents above are semantically identical and would produce the same outline in compliant user agents.

    This third example is also semantically identical, and might be easier to maintain (e.g. if sections are often moved around in editing):

    This final example would need explicit style rules to be rendered well in legacy browsers. Legacy browsers without CSS support would render all the headings as top-level headings.

    4.3.10.1 Creating an outline

    There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank ( h1 — h6 ) to convey document structure.

    This section defines an algorithm for creating an outline for a sectioning content element or a sectioning root element. It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk.

    The for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. A is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections. The algorithm for the outline also associates each node in the DOM tree with a particular section and potentially a heading. (The sections in the outline aren’t section elements, though some may correspond to such elements — they are merely conceptual sections.)

    The following markup fragment:

    . results in the following outline being created for the body node (and thus the entire document):

    Section created for body node.

    Associated with heading «A».

    Also associated with paragraph «B».

    Section implied for first h2 element.

    Associated with heading «C».

    Also associated with paragraph «D».

    No nested sections.

    Section implied for second h2 element.

    Associated with heading «E».

    Also associated with paragraph «F».

    No nested sections.

    The algorithm that must be followed during a walk of a DOM subtree rooted at a sectioning content element or a sectioning root element to determine that element’s outline is as follows:

    Let current outline target be null. (It holds the element whose outline is being created.)

    Let current section be null. (It holds a pointer to a section, so that elements in the DOM can all be associated with a section.)

    Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty.

    Walk over the DOM in tree order, starting with the sectioning content element or sectioning root element at the root of the subtree for which an outline is to be created, and trigger the first relevant step below for each element as the walk enters and exits it.

    When exiting an element, if that element is the element at the top of the stack

    The element being exited is a heading content element or an element with a hidden attribute.

    Pop that element from the stack.

    If the top of the stack is a heading content element or an element with a hidden attribute

    Do nothing. When entering an element with a hidden attribute

    Push the element being entered onto the stack. (This causes the algorithm to skip that element and any descendants of the element.)

    When entering a sectioning content element

    Run these steps:

    If current outline target is not null, run these substeps:

    If the current section has no heading, create an implied heading and let that be the heading for the current section .

    Push current outline target onto the stack.

    Let current outline target be the element that is being entered.

    Let current section be a newly created section for the current outline target element.

    Associate current outline target with current section .

    Let there be a new outline for the new current outline target , initialized with just the new current section as the only section in the outline.

    When exiting a sectioning content element, if the stack is not empty

    Run these steps:

    If the current section has no heading, create an implied heading and let that be the heading for the current section .

    Pop the top element from the stack, and let the current outline target be that element.

    Let current section be the last section in the outline of the current outline target element.

    Append the outline of the sectioning content element being exited to the current section . (This does not change which section is the last section in the outline.)

    When entering a sectioning root element

    Run these steps:

    If current outline target is not null, push current outline target onto the stack.

    Let current outline target be the element that is being entered.

    Let current outline target ‘s parent section be current section .

    Let current section be a newly created section for the current outline target element.

    Let there be a new outline for the new current outline target , initialized with just the new current section as the only section in the outline.

    When exiting a sectioning root element, if the stack is not empty

    Run these steps:

    If the current section has no heading, create an implied heading and let that be the heading for the current section .

    Let current section be current outline target ‘s parent section.

    Pop the top element from the stack, and let the current outline target be that element.

    When exiting a sectioning content element or a sectioning root element (when the stack is empty)

    The current outline target is the element being exited, and it is the sectioning content element or a sectioning root element at the root of the subtree for which an outline is being generated.

    If the current section has no heading, create an implied heading and let that be the heading for the current section .

    Skip to the next step in the overall set of steps. (The walk is over.)

    When entering a heading content element

    If the current section has no heading, let the element being entered be the heading for the current section .

    Otherwise, if the element being entered has a rank equal to or higher than the heading of the last section of the outline of the current outline target , or if the heading of the last section of the outline of the current outline target is an implied heading, then create a new section and append it to the outline of the current outline target element, so that this new section is the new last section of that outline. Let current section be that new section. Let the element being entered be the new heading for the current section .

    Otherwise, run these substeps:

    Let candidate section be current section .

    Heading loop: If the element being entered has a rank lower than the rank of the heading of the candidate section , then create a new section, and append it to candidate section . (This does not change which section is the last section in the outline.) Let current section be this new section. Let the element being entered be the new heading for the current section . Abort these substeps.

    Let new candidate section be the section that contains candidate section in the outline of current outline target .

    Let candidate section be new candidate section .

    Return to the step labeled heading loop.

    Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)

    Recall that h1 has the highest rank, and h6 has the lowest rank.

    In addition, whenever the walk exits a node, after doing the steps above, if the node is not associated with a section yet, associate the node with the section current section .

    Associate all nodes with the heading of the section with which they are associated, if any.

    The tree of sections created by the algorithm above, or a proper subset thereof, must be used when generating document outlines, for example when generating tables of contents.

    The outline created for the body element of a Document is the outline of the entire document.

    When creating an interactive table of contents, entries should jump the user to the relevant sectioning content element, if the section was created for a real element in the original document, or to the relevant heading content element, if the section in the tree was generated for a heading in the above process.

    Selecting the first section of the document therefore always takes the user to the top of the document, regardless of where the first heading in the body is to be found.

    The of a heading content element associated with a section section is the number of sections that are ancestors of section in the outermost outline that section finds itself in when the outlines of its Document ‘s elements are created, plus 1. The outline depth of a heading content element not associated with a section is 1.

    User agents should provide default headings for sections that do not have explicit section headings.

    Consider the following snippet:

    Although it contains no headings, this snippet has three sections: a document (the body ) with two subsections (a nav and an aside ). A user agent could present the outline as follows:

    These default headings («Untitled document», «Navigation», «Sidebar») are not specified by this specification, and might vary with the user’s language, the page’s language, the user’s preferences, the user agent implementor’s preferences, etc.

    The following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk (either a sectioning content element or a sectioning root element), and the enter and exit arguments are callbacks that are called with the nodes as they are entered and exited. [ECMA262]

    4.3.10.2 Sample outlines

    This section is non-normative.

    The following document shows a straight-forward application of the outline algorithm. First, here is the document, which is a book with very short chapters and subsections:

    This book would form the following outline:

    1. The Tax Book
      1. Earning money
        1. Getting a job
      2. Spending money
        1. Cheap things
        2. Expensive things
      3. Investing money
      4. Losing money
        1. Poor judgement

    Notice that the title element does not participate in the outline.

    Here is a similar document, but this time using section elements to get the same effect:

    This book would form the same outline:

    1. The Tax Book
      1. Earning money
        1. Getting a job
      2. Spending money
        1. Cheap things
        2. Expensive things
      3. Investing money
      4. Losing money
        1. Poor judgement

    A document can contain multiple top-level headings:

    This would form the following simple outline consisting of three top-level sections:

    Effectively, the body element is split into three.

    Mixing both the h1 – h6 model and the section / h1 model can lead to some unintuitive results.

    Consider for example the following, which is just the previous example but with the contents of the (implied) body wrapped in a section :

    The resulting outline would be:

    This result is described as unintuitive because it results in three subsections even though there’s only one section element. Effectively, the section is split into three, just like the implied body element in the previous example.

    (In this example, «(untitled page)» is the implied heading for the body element, since it has no explicit heading.)

    Headings never rise above other sections. Thus, in the following example, the first h1 does not actually describe the page header; it describes the header for the second half of the page:

    The resulting outline would be:

    Thus, when an article element starts with a nav block and only later has its heading, the result is that the nav block is not part of the same section as the rest of the article in the outline. For instance, take this document:

    The resulting outline would be:

    1. Ray’s blog
      1. Untitled article
        1. Untitled navigation section
      2. We’re adopting a child!

    Also worthy of note in this example is that the header and main elements have no effect whatsoever on the document outline.

    4.3.11 Usage summary

    This section is non-normative.

    Element Purpose
    Example
    body
    article
    section
    nav
    aside
    h1 – h6 A section heading
    header
    footer
    4.3.11.1 Article or section?

    This section is non-normative.

    A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is «it depends on author intent».

    For example, one could imagine a book with a «Granny Smith» chapter that just said «These juicy, green apples make a great filling for apple pies.»; that would be a section because there’d be lots of other chapters on (maybe) other kinds of apples.

    On the other hand, one could imagine a tweet or reddit comment or tumblr post or newspaper classified ad that just said «Granny Smith. These juicy, green apples make a great filling for apple pies.»; it would then be article s because that was the whole thing.

    A comment on an article is not part of the article on which it is commenting, therefore it is its own article .

    Каков стиль CSS по умолчанию для заголовков? (H1, h2, h3, h4, h5)

    В HTML заголовки обозначаются (1,2,3,4,5,6).

    Мой вопрос касается следующего HTML-кода:

    я хочу написать свойство класса в CSS; который дает одинаковый размер шрифта (внешний вид); как указано в заголовке HTML. Также есть предопределенное свойство для того же самого в CSS?

    Ответ — нет, однако вы можете взломать стили. Большинство браузеров попытаются использовать эти стили

    Есть ли предопределенное свойство для CSS? который дает тот же внешний вид, что и дает?

    Стиль заголовка по умолчанию (в большинстве браузеров) — это то, что: набор различных правил CSS в сочетании с селектором Hn (и сохранен в таблице стилей браузера).

    Существует нет (простой CSS) способ автоматически копировать все эти правила.

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

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

    Стандарты кодирования в HTML5

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

    Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.

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

    Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.

    Используйте корректный тип документа

    На первой строке всегда декларируйте тип документа:

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

    Имена элементов пишите маленькими буквами

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

    • Смешение больших и маленьких букв в именах тегов считается плохой практикой
    • Разработчики обычно используют маленькие буквы (как в XHTML)
    • Написание в нижнем регистре выглядит чище
    • В нижнем регистре легче писать

    Закрывайте все HTML элементы

    В HTML5 вы не обязаны закрывать все элементы (например, элемент

    ). Тем не менее, мы все же рекомендуем закрывать все HTML элементы.

    Закрывайте пустые HTML элементы

    В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.

    Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.

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

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

    В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.

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

    • Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
    • Разработчики обычно используют маленькие буквы (как в XHTML)
    • Написание в нижнем регистре выглядит чище
    • В нижнем регистре легче писать

    Заключайте значения атрибутов в кавычки

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

    • Смешение больших и маленьких букв в значениях считается плохой практикой
    • Значения в кавычках легче читать
    • Вы ДОЛЖНЫ заключать в кавычки, если в значениях есть пробелы

    Атрибуты изображений

    При определении изображений всегда используйте атрибут «alt». Этот атрибут важен, когда изображение по какой-то причине не отображается.

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

    Пробелы и знак равно

    HTML5 допускает пробелы вокруг знака равно. Однако, когда пробелов нет, то такой код легче читать, и это лучше группирует сущности.

    Избегайте длинных строк кода

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

    Следует стараться, чтобы строка кода в длину не превышала 80 символов.

    Пустые строки и отступы

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

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

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

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

    Пропускать или нет и ?

    По стандарту HTML5 тег и тег могут не использоваться.

    Следующий код согласно стандарту HTML5 считается валидным:

    Однако мы не рекомендует пропускать теги и .

    Элемент — это корень документа. Это рекомендованное место для определения языка страницы:

    Декларация языка страницы важна как для специализированных приложений (например, программ чтения с экрана), так и для поисковых систем.

    Кроме этого, если не написать тег или тег , то это может сломать структуру DOM и XML приложения. А пропуск тега к тому же может привести к ошибками в старых браузерах (IE9).

    Пропускать ли тег ?

    Согласно стандарту HTML5 тег может не использоваться.

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

    Вы можете снизить сложность структуры HTML, пропустив тег :

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

    Метаданные

    Элемент является обязательным в HTML5. Заголовок страницы должен быть наполнен значением:

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

    Установка вьюпорта (окна просмотра)

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

    В HTML5 был введен метод, позволяющий веб-дизайнерам контролировать вьюпорт при помощи тега .

    Следует всегда использовать элемент управления вьюпортом в следующей форме на всех веб-страницах:

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

    Часть w >

    Часть initial-scale=1.0 устанавливает начальный уровень увеличения, когда страница впервые загружается браузером.

    Ниже вы можете увидеть пример веб-страницы на экране смартфона с установленным мета тегом вьюпорта и без него:

    Страница без метатега вьюпорта

    Страница с мета тегом вьюпорта

    HTML комментарии

    Короткий комментарий должен писаться на одной строке:

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

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

    Таблицы стилей

    Используйте простой синтаксис для подключения внешних каскадных таблиц стилей (атрибут type не нужен):

    Короткие правила могут записываться в сжатом виде в одну строку:

    Длинные правила следует записывать на нескольких строках:

    • Открывающие скобки размещайте на одной строке с селектором
    • Используйте один пробел перед открывающими скобками
    • Для отступов используйте два пробела
    • После каждой пары свойство-значение, включая последнюю, ставьте точку с запятой
    • Кавычки используйте только со значениями, содержащими пробелы
    • Закрывающие скобки пишите на новой строке без отступа
    • Старайтесь, чтобы длина записи на одной строке была не больше 80 символов

    Загрузка JavaScript в HTML

    Для загрузки внешних скриптов Javascript используйте простой синтаксис (атрибут type не нужен):

    Составляем правильный h1 и структуру подзаголовков

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

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

    h1 — это главный подзаголовок в статье, который обычно размещен над текстом.

    Первый заголовок должен визуально быть больше остальных заголовков на странице.

    h2-h6 — это маленькие подзаголовки, которые проставляются по принципу вложенности.

    Для чего вообще нужны заголовки?

    Для тех, кто не сильно в теме — вот в принципе неплохое видео про азы составления подзаголовков h1-h6. Если не считаете себя спецом, посмотрите:

    И для закрепления материала чуть послабее видео:

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

    В коде тег выглядит так:

    , где буква h происходит от слова «header», что в переводе значит «заголовок». Каждый уровень обозначается соответствующей цифрой.

    H-теги глазами людей

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

    Теги h1, h2, h3, h4, h5, h6 позволяют создать для читателя некую карту, по которой он сможет быстро сориентироваться в тексте. И если этими выделениями удалось зацепить внимание, то человек задержится на странице и наверняка прочтет всю статью. Проверить результат можно по поведенческим факторам. Если люди задерживаются на странице, совершают какие-либо действия – значит работа по SEO была проделана не зря.

    H-теги глазами поисковиков

    Поисковые роботы собирают с них информацию для семантического анализа. Особое значение для ботов имеют заголовки уровней h1, h2, h3. Их непоследовательное или неправильное применение может негативно сказаться на ранжировании станицы. Если в HTML-коде вообще отсутствуют h-теги, то сайту придется туго в продвижении. Уровни h4, h5, h6 менее значимы.

    Иерархия H-тегов

    Главным правилом в расстановке заголовков является их иерархия. Необязательно, чтобы теги шли друг за другом по размеру, но недопустимо в тексте использовать, например, h3, если у вас нигде не присутствует мета h2 или применять h6 без h5.

    Вот так выглядит иерархия с правильной вложенностью:

    Что за тег h1

    Тег h1 – это оглавление текста (все равно что название книги или заголовок статьи в газете).

    На каждой странице должен быть один и только один тег h1.

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

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

    Почему h1 должен различаться с Title

    Довольно важно понимать, что h1 и Title — это разные заголовки. И их соответственно надо умело комбинировать. Вот азы на эту тему:

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

    Требования по длине H1

    H1 рекомендуется делать более лаконичным, чем Title, не превышая количество символов более, чем 50. Но не случится катастрофы, если заголовок получится длиннее, когда не удается втиснуть всю суть в обозначенное количество.

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

    Правила для грамотного написания h1

    • Должен быть уникальным для всего сайта и абсолютно читабельным;
    • Не повторяет тег title, но и не противоречит ему;
    • Не стоит делать его слишком длинным (более объемным можно делать title);
    • Используется только 1 раз на каждую страницу;
    • Релевантен тексту и отображает смысловую суть материала;
    • Интересен, привлекателен для пользователя;
    • Нельзя ставить в конце точку и рекомендуется по минимуму использовать знаки препинания.

    Применение ключей

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

    Некоторые берут все ключи на страницу и из них составляют структуру статей. Сразу учтите — без классных ПФ такая россыпь ключей по подзаголовкам будет караться фильтром за переспам.

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

    Заголовок должен быть «цепляющим». Вот видео от Максима Ильяхова, спеца в области СМИ, ректора Школы редакторов и создателя сервиса «Главред»:

    Вот еще пара «приемов», которые применяются при составлении заголовков.

    Решение проблемы

    Помните, что человек всегда ищет не информацию или товары, а прежде всего – решение своих проблем, потребностей, нужд. Оперируйте именно к предполагаемой проблеме целевой аудитории

    Пример удачного заголовка: «Выпадают волосы? Остановите выпадение за неделю».
    Пример неудачного заголовка: «Можно ли остановить выпадение волос?»

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

    Заинтриговать

    Пример удачного заголовка: «Раскрываем секрет самого эффективного рецепта от выпадения волос».
    Пример неудачного заголовка: «Лучший рецепт от выпадения волос».

    Прием «экзамен»

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

    Пример удачного заголовка: «Вы уверены, что правильно боритесь с выпадением волос?»
    Пример неудачного заголовка: «Все ли вам известно о выпадении волос».

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

    Зачем нужны подзаголовки h2-h6

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

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

    h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте.

    h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.

    h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.

    Длина всех h-тегов должна быть в пределах 50 символов.

    Как правильно прописывать подзаголовки h2-h6

    • Нельзя, чтобы наименьший подзаголовок присутствовал без большего. То есть, если в тексте стоит метатег h4, то ему обязательно должны предшествовать h2 и h3.
    • Чем выше заголовок по уровню, тем крупнее должен быть и шрифт. В WordPress обычно по умолчанию настройки выставлены таким образом, что теги автоматически форматируются в правильном виде.
    • Все h-теги обязаны соответствовать содержанию контента, отображать суть информации.
    • Недопустимо использовать h1-h6 в качестве анкоров или активных ссылок.
    • Нельзя писать другие теги внутри тега h.
    • В h-тегах допускается только текст и знаки препинания.
    • В подзаголовках не должно быть переспама ключевых слов. Ключевики лучше всего задействовать в title, h1, h2, а в более мелких, таких как h3, h5, h6 делать упор на детальное раскрытие темы.

    Если в разметке страницы прописан title и основной заголовок H1, но сам текст статьи не слишком большой и не содержит в себе подзаголовков, это не является ошибкой. В ТОПе находится немало страниц, где контент идет практически сплошной полосой, разве что разделенной на абзацы. Попасть в лидирующие позиции можно и без «колдовства» над разметкой текста, делая больший упор на ПФ. Сайты на WordPress прекрасно индексируются поисковиками. Но все же применение этих тегов не только облегчает задачу, но и делает контент более легким и приятным для визуального восприятия.

    Как заполнять h-теги в WordPress

    h1 заполняется обычно в поле над текстом в записи:

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

    Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в Word заголовки автоматически отобразятся в нужных размерах. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.

    Илон Маск рекомендует:  -o-linear-gradient в CSS
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL