• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
‘тоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → Основные теги HTML

Основные теги HTML

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

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

Основные HTML теги

Оглавление
1. <p></p> — создание абзацев на странице
2. <b> и </strong> — выделение жирным
3. <i> — курсивный шрифт
4. <u> — подчеркнутый шрифт
5. <a> — создание гиперссылок
6. <h1> — заголовки в контенте
7. <center> — выравнивание по центру
8. <sub> — подстрочный шрифт
9. <sup> — надстрочный шрифт
10. <big>, <small> — уменьшить/увеличить размер шрифта
11. <ul> — создание списка
12. <table> — создание таблиц
13. <br> — перенос строки
14. <hr> — горизонтальная линия
15. <img> — вывод изображения
16. <font> — для форматирования текста
17. <form> — вывод форм
18. <div> — блочный элемент
19. <!--ком--> — комментарии в коде

Список тегов html

1. HTML тег <p></p> (для абзацев)

<p></p> — выводит текстовый абзац (допускает атрибуты style, class, id). Самый распространенный тег, поскольку в него чаще всего помещают текст (впрочем он для этого и создан).

Например, html код:

<p>Текстовый абзац номер один</p> <p>А это другой абзац</p>

Преобразуется на странице в следующее:

Текстовый абзац номер один

А это другой абзац

К тегу можно ещё приписать параметр style:

<p style="стиль"></p>

С помощью этих различных значений можно редактировать внешний вид шрифта. Про эти параметры можно прочитать в отдельном уроке: стили в html и свойство css font.

Также можно прописать атрибуты CLASS и ID. Например:

<p class="style1"></p> <p id="id_style1"></p> <p class="style1" id="id_style1"></p>

2. HTML тег <b> и </strong> (выделение жирным)

<b></b> и <strong></strong> — два тега, которые позволяют сделать шрифт жирным. Разницы между этими тегами нет.

Приведем пример. Html код:

<b>жирный текст</b>

Преобразуется на странице в следующее:

жирный текст

Также можно прописать атрибуты CLASS и ID (как и в случае с <p>).

Примечание

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

Читайте также: как сделать жирный шрифт html



3. HTML тег <i> (создание курсива)

<i></i> — курсивный шрифт (допускает параметр style, class, id)

Например, html код:

<i>курсивный текст</i>

Преобразуется на странице в следующее:

курсивный текст

Читайте также: как сделать курсивный текст в html


4. HTML тег <u> (подчеркнутый текст)

<u></u> — подчеркнутый шрифт (допускает параметр style, class, id)

Например, html код:

<u>подчеркнутый текст</u>

Преобразуется на странице в следующее:

подчеркнутый текст

Читайте также: как сделать подчеркнутый текст html


5. HTML тег <a> (создание гиперссылки)

<a href="links"></a> — создает ссылку на странице (допускает параметр style, class и другие).

Например, html код:

<a href="https://zarabotat-na-sajte.ru/">текст ссылки</a>

Преобразуется на странице в следующее:

текст ссылки

Все параметры и атрибуты тега <a> будут рассмотрены в отдельном уроке: html тег <a>.


6. HTML тег <h1> (заголовки в контенте)

<h1></h1>,...,<h6></h6> — заголовочные теги внутри контента (допускает параметр style, class, id). Причем чем меньше цифра, тем больший вес и размер (по умолчанию) имеет текст, заключенный в эти теги.

Например, html код:

<h1>Заголовок h1</h1>

Тег <h1> используют для названия страницы (также как и тайтл)

Необходимо использовать эти теги только по назначению, т.е. только когда в статье необходим заголовок. Это связано с тем, что теги <h1></h1>,...,<h6></h6> имеют большое влияние на поисковые машины. Если их использовать правильно, то шансы попасть на верхние строчки выдачи очень высоки.

Более подробно про эти теги читайте в 14 уроке: HTML теги h1-h6


7. HTML тег <center> (выравнивание)

<center></center> — выравнивает контент по центру.

Например, html код:

<center>Этот текст будет в центре</center>

Преобразуется на странице в следующее:

Этот текст будет в центре
Примечание

Рекомендуется не использовать тег <center></center>, а вместо него использовать такие конструкции:

  • <p style="text-align:center">...</p> — для текста
  • <div style="text-align:center">...</div> — для всего (например, изображение)

8. HTML тег <sub> (подстрочный текст)

<sub></sub> — выводит подстрочный шрифт.

Например, html код:

Обычный текст, <sub>подстрочный текст</sub>

Преобразуется на странице в следующее:

Обычный текст, подстрочный текст

9. HTML тег <sup> (надстрочный текст)

<sup></sup> - выводит надстрочный шрифт.

Например, html код:

Обычный текст, <sup>надстрочный текст</sup>

Преобразуется на странице в следующее:

Обычный текст, надстрочный текст

10. HTML тег <big>, <small>

<big></big>, <small></small> — выводит шрифт на один пиксель больше/меньше текующего размера (допускает параметр style, class, id).

Например, html код:

Обычный шрифт, <big>этот шрифт больше на один пиксель</big>

Преобразуется на странице в следующее:

Обычный шрифт, этот шрифт больше на один пиксель

11. HTML тег <ul> (создание списков)

<ul><li>...</li></ul> — выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между <li> и </li>.

Например, html код:

Список: <ul> <li>первый элемент списка</li> <li>второй элемент списка</li> </ul>

Преобразуется на странице в следующее:

Список:
  • первый элемент списка
  • второй элемент списка

Более подробно про списки читайте в 13 уроке тег <ul> — создание списков в HTML


12. HTML тег <table> (создание таблиц)

<table></table> — создает таблицу (допускает параметр style, class). Каждая новая строка создается тегами <tr></tr>, а столбец <td></td>.

Например, html код:

<table border="1"> <tr><td>1-строка 1 элемент</td><td>1-строка 2 элемент</td></tr> <tr><td>2-строка 1 элемент</td><td>2-строка 2 элемент</td></tr> </table>

Преобразуется на странице в следующее:

1-строка 1 элемент1-строка 2 элемент
1-строка 1 элемент1-строка 2 элемент

Все возможности тега <table> будут рассмотрены в отдельном уроке: html тег <table>.



13. HTML тег <br> (перенос строки)

<br/> — переход на следующую строку, представляет собой одиночный тег.

Например, html код:

Строка 1 <br/>2-строка <br/>3-строка А этот текст будет на 3ей строке, поскольку перехода не было

Преобразуется на странице в следующее:

1-Строка
2-строка
3-строка А этот текст будет на 3ей строке, поскольку перехода не было

14. HTML тег <hr> (горизонтальная линия)

<hr/> — чертит линию, представляет собой одиночный тег (допускает параметр style, class).

Например, html код:

Какой-то текст над линией <hr> А этот текст будет уже под линией

Преобразуется на странице в следующее:

Какой-то текст над линией
А этот текст будет уже под линией

15. HTML тег <img> (вывод картинки)

<img src="ссылка_на_изображение"> — выводит изображение, представляет собой одиночный тег (допускает параметр style, class).

Например, html код:

<img src="http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg">

Преобразуется на странице в следующее:

Все возможности тега <img> будут рассмотрены в отдельном уроке: html тег <img>.


16. HTML тег <font> (форматирование текста)

<font></font> — для форматирования текста, изменения стиля и т.п. (допускает параметр style, class, id). Его вес в глазах поисковых машин отсуствует, поэтому его можно использовать сколько хотите.

Например, html код:

<font style="color:green; font-size:17px;">Этот текст зеленый, а его размер 15 пикселей</font>

Преобразуется на странице в следующее:

Этот текст зеленый, а его размер 17 пикселей
Примечание

Аналогичным тегом является <span></span>.

Более подробно с font можете ознакомиться в статье: тег <font>


17. HTML тег <form> (создание формы)

<form></form> — создание формы на странице (допускает параметр style, class).

Например, ввод логина и пароля, любые кнопки, любая форма регистрации — все это формы.

Подробное описание этого тега читайте: тег <form> — создание html форм.


18. HTML тег <div> (создание блоков)

<div></div> — служит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега <div> задача упростилась. Практически все сайты содержат <div> блоки, как удобную альтернативу таблицам.

Подробное описание этого тега читайте в статье: html тег <div>.


19. HTML тег <!--ком--> (комментарии)

<!--комментарий--> — служит для добавления комментариев в коде html. Все, что заключено между <!-- и --> является комментарием и не отображается на интернет странице.

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

<body> <!--верхушка сайта--> <div class="top">Здесь содержится верхушка сайта</div> <!--конец верхушки сайта--> <!--левое меню--> <div class="leftblock">Левая часть сайта, здесь может быть различное меню, реклама и т.д.</div> <!--конец левого меню--> <!--контент страницы--> <div class="content">Содержательная часть страницы</div> <!--конец контента страницы--> </body>

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


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

Ссылка на следующий урок:
Урок 4. Style в html



Читайте также:
• Как скруглить углы через CSS
• Как сделать карту изображений (карта ссылок)
• Как сделать обтекание картинки текстом
• Пробел html
• Кнопка html
• Как создать сайт с нуля — пошаговая инструкция
• Как сделать якорь ссылки
• Коды символов для HTML
• Коды и названия html цветов для сайта

← Перейти в каталог html уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2025 - Zarabotat-Na-Sajte.ru