Основное о тегах 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 разметки, на которые обращают внимание поисковики.

Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Введите свой E-MAIL:

     Katyaru 08.11.2012


    
Читайте БлоготеЙ! на Google+
Читайте БлоготеЙ! на Фейсбуке

К записи "Основное о тегах html" оставлено 4 коммент.

  1. tanichka:

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

    • katyaru:

      Затем, что это улучшает юзабилити. Читатель быстрее видит, о чем статья, просматривая анонсы.

      В разных шаблонах — по-разному. У меня, например, на странице блога названия статей в заголовках h2. А в шаблоне одной записи — h1… А название блога у меня графическое…

  2. VolNa:

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

Оставить свой комментарий


8 − = четыре

Палю тему!
Гугл в помощь
Надо подписаться!

Введите свой E-MAIL:

Delivered by FeedBurner

Дружите с Блоготеем в соцсетях


Смотрите все ВИДЕО Блоготея на YouTube


Blogotey | 


Спутник Блоготея в Tumblr

Наверх.