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

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

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

Список тегов 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="http://zarabotat-na-sajte.ru/">текст ссылки</a>

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

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

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

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

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

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

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

 - выводит подстрочный текст.

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

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

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

9. Html тег <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 уроке HTML тег <ul> - подробное описание с примерами

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>

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

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

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

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

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

Строка 1
<br/>2-строка
<br/>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>

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

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

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

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

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

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

18. Html тег <div> (создание формы)

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

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

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

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

<body>
	<!--верхушка сайта-->
	<div class="top">Здесь содержится верхушка сайта</div>
	<!--конец верхушки сайта-->

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

	<!--контент страницы-->
	<div class="content">Содержательная часть страницы</div>
	<!--конец контента страницы-->
</body>

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

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

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

Читайте также:
• HTML тег <a> - подробное описание с примерами
• HTML тег <table> - подробное описание с примерами
• HTML тег <img> - подробное описание с примерами
• HTML тег <form> - подробное описание с примерами
• HTML тег <div> - подробное описание с примерами
• Описание заголовочных тегов html
• Как скруглить углы в HTML через CSS
• Как сделать карту изображений (карта ссылок)
• Как сделать обтекание картинки текстом

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