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

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

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

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

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

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

Текстовый абзац. В принципе ничего интересного

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

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

<p style="различные значения"></p>

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

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

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

2) <b></b> и <strong></strong> - два тега, которые позволяют сделать текст жирным. Разницы между этими тегами нет. Приведем пример. Html код:

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

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

жирный текст

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

3) <i></i> - курсивный текст (допускает параметр style, class, id) Например, html код:

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

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

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

4) <u></u> - подчеркнутый текст (допускает параметр style, class, id) Например, html код:

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

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

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

5) <a href="links"></a> - создает ссылку (допускает параметр style, class и другие). Например, html код:

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

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

текст ссылки

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

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

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

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

Заголовок h6

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

7) <center></center> - выравнивает текст по центру. Например, html код:

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

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

Этот текст будет в центре

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

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

8)  - выводит подстрочный текст. Например, html код:

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

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

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

9)  - выводит надстрочный текст. Например, html код:

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

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

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

10) <big></big> / <small></small> - выводит текст на один пиксель большего/меньшего размера (допускает параметр style, class, id). Например, html код:

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

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

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

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

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

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

Список:

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

12) <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) <br/> - переход на следующую строку, представляет собой одиночный тег. Например, html код:

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

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

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

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

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

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

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

15) <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) <font></font> - для форматирования текста, изменения стиля и т.п. (допускает параметр style, class, id). Его вес в глазах поисковых машин отсуствует, поэтому его можно использовать сколько хотите. Например, html код:

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

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

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

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

17) <form></form> - создание формы на странице (допускает параметр style, class). Подробное описание этого тега читайте: html тег form.

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

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

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

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

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

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