HTML - 2. Базовые теги



  • Все HTML документы начинаются с объявления декларации: <!DOCTYPE html> (будем использовать html 5).
  • Следом идёт тег <html> </html>.
  • Внутри которого объявляем видимую область: <body>...содержимое, которое будет отображаться на странице... </body>.

Базовая структура HTML документа

<!DOCTYPE html>
<html>
    <body>

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

       <p>Параграф.</p>

... остальное содержимое ...

    </body>
</html>

Рассмотрим несколько базовых тегов.

Заголовки

Определяются парными тегами <h..> с 1 по 6 уровень.

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

Параграф

Определяется парным тегом <p>.

<p>Параграф.</p>
<p>Ещё один параграф.</p>

Ссылки

Определяются парными тегами <a>.

<a href="http://www.proglang.su">Ссылка на сайт</a>

Обратите внимание, что адрес страницы, указан в атрибуте href="<адрес страницы>". Атрибуты используются для определения дополнительных характеристик тега.

Изображения

Определяются одиночным тегом <img />.

Использует атрибуты: src - путь к изображения (указывается относительно текущего местополодения документа. В данном примере картинка лежит в той же папке, что и сам документ), alt - альтернативный текст, width и height - размеры изображения.

<img src="logo.jpg" alt="Логотип" width="104" height="142" />

Закрывающий тег в одиночный тегах не используется! Одиночные теги закрываются в открывающем теге - <img />.

Перенос на новую строку

Определяются одиночным тегом <br />.

<p>Мой <br/> параграф.</p>

Горизонтальная линия

Определяются одиночным тегом <hr>.

<p>Параграф.</p>
<hr>
<p>Ещё один параграф.</p>
<hr>
<p>И ещё один.</p>

Результат примеров. * Переключайте режимы кликая по ссылкам (Result, Html).

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

<p>Параграф.</p>
<p>Ещё один параграф.</p>

<a href="http://www.proglang.su">Ссылка на сайт</a>

<img src="http://proglang.su/app/templates/default/img/main/panda.png" alt="Логотип" width="200" height="200" />

<p>Мой <br/> параграф с переносом.</p>

<p>Параграф и линия снизу.</p>
<hr>
<p>Ещё один параграф и ещё одна линия снизу.</p>
<hr>
<p>И ещё один.</p>

See the Pen html базовые теги by proglang (@proglang) on CodePen.


Тег <head>

Содержит мета-данные, которые не отображаются на странице.

<!DOCTYPE html>
<html>
    <head>
        <title>Документ HTML</title>
        <meta charset="UTF-8">
    </head>
    <body>
    .
    .
    .
    </body>
</html>

Тег <title>

Определяет заголовок документа.

Тег <meta>

Может использоваться для определения набора символов и другой информации для html документа.

Теги не чувствительны к регистру (записи идентичны: <p> и <P>).