Главная / Сайтостроение / Основное о тегах html

Основное о тегах html

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

Теги html и теги в блогах

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

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

Что такое теги и зачем они вообще

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

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

Где можно увидеть html разметку текста

Если вы работаете на Вордпресс или Blogspot — в редакторе переключите окно на HTML.

html разметка в вордпресс

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

html разметка в коде страницы

Особенности тегов

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

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

<strong>

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

<strong>выделение текста</strong>

А вот, как выглядит эффект этого тега в визуальном редакторе: выделение текста

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

<p>Внутри предложения <strong>пара слов</strong> может выделяться</p>

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

Зачем нам вообще нужно знать о тегах

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

<big>...</big>

который увеличивает размеры шрифта в первых абзацах статей Блоготея.

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

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

Читайте также

Как оптимизировать картинки для блога?

Как оптимизировать картинки для блога?

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

Один комментарий

  1. Вячеслав

    Реанимированные комменты

    tanichka:
    09.11.2012 в 01:56
    ну и зачем ты увеличиваешь шрифт первого абзаца?
    Вообще теги h1 и h2 уже есть как название блога и заголовок статьи. поэтом у в статье разумней использовать h3, 4 и т.д.

    katyaru:
    09.11.2012 в 10:24
    Затем, что это улучшает юзабилити. Читатель быстрее видит, о чем статья, просматривая анонсы.
    В разных шаблонах — по-разному. У меня, например, на странице блога названия статей в заголовках h2. А в шаблоне одной записи — h1… А название блога у меня графическое…

    VolNa:
    09.11.2012 в 11:29
    Дааа… Я под тегами совсем другое подразумевала. Интересно, что дальше..? Надо СЕОобразовываться! smile

    katyaru:
    09.11.2012 в 13:34
    Вот-вот, некая путаница существует — нужно ее устранить!

Добавить комментарий

Ваш e-mail не будет опубликован.