Чат веб-разработчиков
Теги в HTML

Теги как основа HTML-страницы

Привет! Ну что, сделали свою первую страничку? Молодцы! Теперь давайте поговорим о тегах: что это такое и зачем они нужны.

Создание web страницы с помощью HTML осуществляется с использованием тегов. Каждый тег содержит в себе определенный элемент. А все вместе они образуют именно ту страницу, которая отображается в окнах браузеров. Это и есть те самые основы HTML. Давайте поговорим о них более подробно.

Любой тег, вне зависимости от его назначения и месторасположения, размещается между символами < и >, расположенными в начале и конце тега, соответственно.

Пример: <p>.

Парные теги

Теги бывают двух видов. К первому относятся парные, включающие в себя две составляющие, от чего и получили свое название. Эти составляющие называются открывающимися и закрывающимися тегами. Закрывающийся тег отличается от своей пары наличием символа /, который ставится сразу после <.

Пример:

Код доступен только после покупки курса HTML для начинающих.

Ко второму типу тегов относятся одиночные. И, как следует из названия, они не имеют пары в виде второго, закрывающего тега.

Одиночные HTML-теги

При создании страницы с помощью HTML основное назначение парного тега заключается в том, чтобы отметить начало и конец определенного текстового фрагмента. Однако, используются также теги, задача которых не имеет ничего общего с выделением текстовых фрагментов.

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

К числу таких тегов относятся: <br>, <hr>, <img>.

Пример:

Код доступен только после покупки курса HTML для начинающих.

Если вы где-то увидите вот такой формат записи одиночного тега <br/>, то знайте, что так они выставлялись в более ранних версиях HTML. Но сейчас, когда появился HTML 5, слэш использовать не обязательно.

Атрибуты HTML-тегов

Также в разговоре об основах HTML нельзя не упомянуть об атрибутах тегов. Для определенных тегов использование атрибутов не являются обязательным, но вполне допустимо. А в некоторых случаях – они нужны однозначно.

Примером такого случая может быть тег <img>, который предназначен для того, чтобы вставлять на страницу изображение. Обязательным атрибутом для данного тега является src, с помощью которого можно указать, а где же именно находится картинка. Это делается для того, чтобы браузер смог открыть изображение. Если адрес картинки будет указан без атрибута, изображение на странице не отобразится.

Как правило, в большинстве случаев теги и атрибуты прописываются в HTML вот так:

Код доступен только после покупки курса HTML для начинающих.

У тега может быть как один, так и несколько атрибутов. Ниже вы можете видеть примеры.

Код доступен только после покупки курса HTML для начинающих.

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

Читайте также
Комментарии


AnnaVyushkova
AnnaVyushkova

Добрый день, если я не ошибаюсь(а если да, то сорян), то в домашнем задании Вы написали <img src="logo.jpg>, а как же закрывающая кавычка?

ivashkevich
ivashkevich

Добрый день! Конечно же это ошибка! Спасибо большое, исправил.

adianon
adianon

Не знал о нововведениях, раньше в сообщениях использовал тег <img>, где он был парный и меду ними вставлял адрес, где непосредственно хранится изображение.

Freeman
Freeman

Классный сайтец, Артём красава.

Freeman
Freeman

Артём, подскажите, я делаю себе конспект, в формате html, как мне корректно отобразить в браузере такую запись: <h2>Tags:</h2>
<p> "<p>Абзац</p>" </p>, и пр.?

ivashkevich
ivashkevich

Добрый день :)
Для вывода кода нужно использовать преформатированный текст - https://webshake.ru/post/694

ghoul
ghoul

так, а где задания?

ivashkevich
ivashkevich

К этому уроку их нет :)

ghoul
ghoul

все, разобрался)

izovsk
izovsk

<head>
<title>
<h1> /Парные /
<meta> / Одиночный/

ivashkevich
ivashkevich

Всё верно =)

Zilana
Zilana

<head> - парный
<title> - парный
<h1> - парный
<meta> - одинарный

ivashkevich
ivashkevich

Всё верно