какие теги определяют видимую часть документа

Составлено : 15 мая 2008 года

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

. Если вы не разделите абзацы тэгом

, ваш документ будет выглядеть как один большой абзац.

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

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

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

Комментарии html

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

Комментарии могут встречаться в документе где угодно и в любом количестве.

Заголовочная часть документа html

Основные положения

Все тэги HTML начинаются с » » (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

Некоторые тэги, такие, как

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

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

HTML начало

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

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

HTML-тэги могут быть условно разделены на две категории:

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

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

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

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

На открытии данной конференции глава представительства произнес:

И постараюсь сделать ее хорошой.

Источник

HTML-теги и их атрибуты при SEO-оптимизации

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

Основные составные части языка HTML

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

Чаще всего любой HTML-документ включает в себя следующие блоки:

Тег

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

Важность метатегов

Метатег description

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

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

Метатег robots

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

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

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

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

Атрибут all представляет собой набор инструкций, аналогичных «index, follow», противоположным значением является «none».

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

Метатег с атрибутом «charset»

Операционная система Windows, использующая кириллицу, применяет значения атрибута «utf-8» или «windows-1251».

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

Метатег «viewport»

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

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

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

Метатег keywords

Ранее содержимое данного блока, который включает ключевые слова, описывающие контент страницы, достаточно сильно влияло на положение сайта в поисковой выдаче. Но вследствие действий большинства вебмастеров, пытавшихся внедрить в этот тег максимальное количество ключевых слов, он утратил свою важность для поисковых систем. Тем не менее, наличие и грамотное заполнение данного метатега все еще оказывает определенное влияние на поведение поисковых ботов Яндекс и Google. Чтобы максимально оптимизировать страницы, рекомендуется применять грамотно оформленный метатег keywords: либо не заполнять этот тег вообще нигде на страницах сайта, либо под каждую страницу прописывать уникальный набор ключевых слов.

Атрибуты next и prev

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

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

Оптимизаторам следует принимать во внимание, что теги «next и prev» Google уже несколько лет не поддерживает. Поисковик обрабатывает страницы пагинации как и любые другие страницы на сайте. Яндекс же никогда не учитывал этот тег.

Атрибут canonical

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

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

Атрибут alternate

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

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

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

Работы по оптимизации контента

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

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

В первом случае фрагмент текста, который следует особым образом выделить, связывается с выбранным стилем через атрибуты «class» или «id». При использовании атрибута «style» необходимо будет указать правила CSS. Второй способ используется ограниченно, т.к. при массовом добавлении атрибута к тегам значительно увеличивается объем кода. Соответственно, увеличивается и время загрузки страниц, что негативно сказывается на поведенческих факторах.

Для создания на веб-страницах таблиц используют тег

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

Использование заголовков Н1-Н6

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

Именно этот тег рассказывает поисковым роботам, а затем – и пользователям, о содержании конкретной страницы. Кроме того, просмотрев заголовки, пользователь сможет сразу определить общую структуру статьи и понять, какую информацию он сможет получить. Либо принять решение об отказе от просмотра. При распределении подзаголовков по странице важно соблюдать их иерархию – после подзаголовка Н2 должен идти подзаголовок Н3 и т.д.

Для разделения любого текста на параграфы применяется двойной тег

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

Применение списков

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

При размещении списков используются теги:

Акцентирующие теги

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

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

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

Представление ссылок в разметке

Согласно регулярно выходящим рекомендациям поисковых систем, текст ссылки должен

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

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

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

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

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

Источник

• ← антхилл в мобайл легенд что
• Разбираемся с понятием развал схождения в автомобильном мире →