Основные теги 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=”https://zarabotat-na-sajte.ru/ссылка_на_изображение”> — выводит изображение, представляет собой одиночный тег (допускает параметр 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 уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.