Теги и элементы HTML
Узнайте, что такое теги и элементы и как они работают.
«Теги и элементы HTML» — бесплатный урок HTML for Kids на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.
Теги и элементы HTML
Добро пожаловать в следующий урок! Сегодня мы изучим теги и элементы HTML. Это строительные блоки каждой создаваемой Вами веб-страницы.
Что такое теги HTML
Теги HTML — это специальные ключевые слова, заключённые в угловые скобки <>. Они сообщают браузеру, что делать с содержащимся внутри них содержимым.
Пример тега:<h1>
Обычно теги образуют пары: открывающий тег и закрывающий тег.
Пример:
<h1>Hello</h1>Что такое элементы HTML
Элемент HTML — это сочетание открывающего тега, содержимого и закрывающего тега.
Например:
<h1>Welcome to My Page</h1>Типы тегов
Существует два основных типа тегов:
- Парные теги: у них есть открывающий и закрывающий тег. Пример:
<p>Paragraph</p> - Самозакрывающиеся теги: им не нужен закрывающий тег. Пример:
<img />
Часто используемые теги
Вот несколько основных тегов HTML, которые Вы будете часто использовать:
<h1> to <h6>: заголовки от самого крупного до самого мелкого<p>: абзац<a>: ссылка<img>: изображение<br>: разрыв строки
Давайте рассмотрим пример:
<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="An example image" />
<br />Атрибуты в тегах
Атрибуты предоставляют дополнительную информацию об элементе. Они размещаются внутри открывающего тега.
Пример:
<a href="https://example.com"
target="_blank">Visit Example</a>
Вложенность тегов
Можно поместить один тег внутрь другого. Это называется вложенностью.
Пример:
<p>This is a <strong>bold</strong> word.</p>
Порядок закрытия вложенных тегов
Запомните: всегда закрывайте внутренний тег перед внешним.
Пример: собираем всё вместе
Вот пример, объединяющий всё изученное:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Example</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a <strong>simple</strong> paragraph of text.</p>
<a href="https://example.com" target="_blank">Click here to learn more</a>
<br />
<img src="image.jpg" alt="A beautiful view" />
</body>
</html>Отличная работа
Поздравляем! Вы изучили теги, элементы, атрибуты и вложенность HTML. Это строительные блоки каждой создаваемой Вами веб-страницы. В следующем уроке мы напишем Вашу первую HTML-страницу с настоящим содержимым!
Часто задаваемые вопросы
Урок «Теги и элементы HTML» бесплатный?
Да — полный текст урока «Теги и элементы HTML» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.
Чему я научусь в уроке «Теги и элементы HTML»?
Узнайте, что такое теги и элементы и как они работают. Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Теги и элементы HTML»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое HTML?
- Структура HTML: строительные блоки
- Теги и элементы HTML
- Создание первой HTML-страницы