Базовые HTML теги которые должен знать каждый. Часть 1-я.

Базовые HTML теги которые должен знать каждый.

Для начинающих HTML разметка похожа на иностранный язык, когда мы учимся как его правильно читать, писать и говорить на нем. Эта статья для тех кто только начинает изучение HTML. Также она будет полезна, для тех кто работает с веб-разметкой. Это контент-менеджеры, копирайтеры и маркетологи — люди которым может пригодится форматирование статей и контента для веб-сайтов.

Скорее всего вы сталкивались постингом статей на сайт с CMS (системой управления сайтами), такими как WordPress, Joomla! или любая другая. Все эти системы в конечном счете используют HTML для оформления контента.

В этом посте вы познакомитесь с техникой как избежать опасных ошибок и базовыми HTML тегами которые помогут вам оформлять веб-контент.

Как не поломать сайт при переносе текста из Word’a в веб

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

Опасный лишний код

Также этот лишний код опасен и может в буквальном смысле повредить разметке и внешнему виду сайта, из-за чего вся структура страницы расползется на несвязанные блоки. Подвал сайта окажется не внизу, а в правой колонке — в сайдбаре, а сам сайдбар (боковая колонка) расползется на части.

Такое случается когда в текст попадает незакрытый тег <div>, или наоборот, когда </div> закрывается два раза, и таким образом ломает весь внешний виде страницы. Именно поэтому важно проверять HTML код вставленного фрагмента перед онлайн публикацией. Также такое может случится когда вы копируете текст с других сайтов, для того чтобы перепостить у себя на сайте.

Как правильно копировать из MS Word в веб-редактор

Чтобы предотвратить такие вещи необходимо сначала вставить скопированный фрагмент в текстовый редактор который не поддерживает форматирование, например Блокнот в Windows. И затем заново скопировав и Блокнота — вставить фрагмент текста в веб-редактор. И уже потом выделить заголовки, жирный и курсивный текст в веб редакторе, проставить ссылки и так далее.

Зачем проверять HTML разметку

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

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

Как отредактировать HTML разметку новости или статьи

В большинстве CMS (систем управления сайтами) используется визуальный текстовый редактор WYSIWYG (what you see is what you get | что видишь то и получаешь). В таком редакторе вы можете найти кнопку, которая переключает режим из визуального, в режим HTML. Как правило такая кнопка сопровождается иконкой с изображением скобок, которые используются в HTML разметке, вот такими: </>
Итак, нажав на эту кнопку, весь текст в редакторе будет обрамлен различными HTML тегами. И сейчас я расскажу вам про основные из них. Что они означают и как их применять. Начиная с этого момента вы сможете смотреть какой лишний код добавляют в текст редакторы на подобии MS Word и сможете сами удалять этот лишний код, оставляя только необходимое форматирование. Таким образом вы сэкономите массу работы редактору и веб-мастеру, который занимается вычиткой текста и форматирования перед публикацией.

HTML теги которые должен знать каждый веб-редактор

Тег для абзацев: <p> paragraph

Начнем с основ. В HTML мы работаем с тегами, которые обернуты в скобки-уголки <>. По наличю таких скобок мы можем понять что перед нм HTML тег. Например тег для абзацев. <p>. Когда мы хотим разбить текст на абзацы то мы используем этот тег. Обычно оборачивая текст в абзацы — не надо переживать за его размер, цвет и отступы. Как правило в CMS и в CSS шаблоне сайта уже прописаны стили для абзацев, и все что нам остается просто оформить ими нужный текст.

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

Пример:

<p>Внутри пишем текст абзаца. И после закрываем тег. Это первый абзац.</p>
<p>Вот еще один абзац на странице. Это второй абзац.</p>

Как видим закрывающий тег отличается наличием косой черты — </p>.
Открывающий — <p>. Закрывающий — </p> Между открывающим и закрывающим помещаем текст абзаца. Теперь вы умеете разграничить текст по абзацам.

Тег для заголовков:<h> header

Теперь давайте коснемся не только тегов, но и затронем немного SEO (search engine optimization или оптимизация сайтов для поисковых систем). SEO помогает пользователям находить ваши статьи на поисковых сайтах — в Google, Яндекс и других. Тегам для Заголовков — отводится очень важная роль. Так как они помогают определить что за контент или статья находится на странице, о чем она, какие темы она содержит.

Как правило заголовок статьи оформляется заголовком первого уровня, и помещается в тег <h1></h1>. h — означает heading, 1 — означает первый уровень. В статье помимо главного заголовка могут быть и подзаголовки — для разделов и подразделов. Для них предусмотрены заголовки второго, третьего, четвертого уровней и так далее. Всего существует 6 уровней заголовков, от <h1> до <h6>. На практике довольно редко встречаются статьи с использованием <h5> и <h6>, но такое бывает. В примере ниже приведен блок текста состоящий из заголовков и абзацев.

<h1>Заголовок статьи</h1>
<p>Вступительный абзац.</p>
<h2>Подзаголовок 2-го уровня</h2>
<p>Абзац с текстом</p>
<h3>Подзаголовок 3-его уровня</h3>
<p>Еще абзац текста.</p>

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