Основные HTML теги для блогеров-новичков + шпаргалка

основные html теги фото

Программированием я стала интересоваться еще в школе. Мне было интересно создавать сайты (и кое-что похожее на простенький сайт я делала). Я нашла пару ресурсов, где подробно объяснялись азы HTML и CSS. Это языки разметки. Я достаточно успешно их освоила так, что даже в школе помогала всем своим одноклассникам на уроках информатики. Но после поступления в ВУЗ интересы немного поменялись, да и просто не было времени и возможностей тренироваться дальше в этом направлении. Потом я стала писать тексты на заказ и мне потребовалось знание HTML тегов. Когда ты пишешь оптимизированные статьи, то некоторые заказчики требуют, чтобы копирайтер сам прописывал основные теги. Ну а после у меня появился первый блог по рукоделию и там мне тоже нужны были базовые знания HTML. Да и вообще, думаю, ты в курсе в каком веке мы живем и разбираться в основных элементах языка разметки точно не повредит.

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

Базовые теги

<!DOCTYPE html>

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

<html> </html>

Этот тег всегда идет после предыдущего тега и включает в себя все другие теги. То есть только после него ты можешь писать остальные.

<head>…</head>

Представь, что HTML – это человек. У каждого человека есть голова, так вот в мире программирования голова обозначается как <head> </head> (несложно запомнить, если знаешь английский, потому что «head» — это голова). Этот тег помогает поисковым роботам и браузерам понять, что за сайт находится перед ними. В этом теге прописывается самая важная информация о блоге или сайте. Например, посмотри на вкладку с этой страничкой. Что там написано? Название этого поста, а если перейдешь на главную моего блога, увидишь что там написано «Анна Чернякова – Копирайтинг, блогинг, заработок для женщин». Вся эта информация содержится как раз в этом теге.

<body> </body>

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

Метатеги

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

<title>Здесь пишут название</title>

Этот тег используется для того, что написать название статьи, блога, сайта или любого другого ресурса.

<meta name=»description» content=»Здесь пишут описание странички»/>

Этот тег поможет поисковым роботам понять, о чем страничка.

<meta name=»Keywords» content=»Здесь пиши ключевые слова»>

Для поисковых роботов также работает и этот тег. Он дает понять, о чем сайт, благодаря прописанным ключевым словам.

Форматирование текста

<h1>Твой текст здесь</h1>, <h2> Твой текст здесь </h2>…

В этой статье я использовала подзаголовки. Создать их можно с помощью тегов <h1>Твой текст здесь</h1>, <h2>Твой текст здесь</h2> и далее по возрастанию. Обычно больше <h4>…</h4> никто не использует.

<h1 style=»text-align:center»>

Чтобы заголовок отображался по центру, поставь это тег. Чтобы заголовок отобразился справа, вместо «center» поставь «right», а слева — поставь «left».

<center>…</center>

Чтобы твой текст был виден посередине экрана, используй этот тег.

<p>…</p>

Этот HTML тег поможет сделать абзацы в тексте.

<p style=»text-align:center»>

Чтобы абзац отображался по центру, поставь это тег. Чтобы абзац отобразился справа, вместо «center» поставь «right», а слева — поставь «left».

<strong>Здесь пиши твой текст</strong>

Хочешь выделить слово жирным шрифтом? Пиши этот тег.

<blockquote>Твоя цитата здесь</blockquote>

Этот тег поможет вставить цитату в текст.

<ol>

<li>1 пункт</li>

<li>2 пункт</li>

<li>3 пункт</li>

</ol>

Это поможет создать нумерованный список.

<ul>

<li>1 пункт</li>

<li>2 пункт</li>

<li>3 пункт</li>

</ul>

А этот тег поможет создать маркированный список.

Ссылки

<a href=»Твоя ссылка здесь»>Текст ссылки</a>

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

<a href=»Здесь ссылка» rel=»nofollow»>Текст ссылки</a>

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

Картинки

<img src=»ссылка на картинку» alt=»Здесь описание картинки»/>

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

<a href=»Ссылка на сайт»><img src=»ссылка на картинку» alt=»Здесь описание картинки»/>

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

<img src=»ссылка на картинку» alt=» Здесь описание картинки » align=»left»/>

Если тебе надо, чтобы картинка отобразилась на странице слева, пиши этот тег. Если справа, то вместо «left» пиши «right», а в центре – «center».

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