HTML (HyperText Markup Language) — это язык разметки, используемый для создания веб-страниц. HTML определяет структуру веб-контента с помощью элементов и тегов. В этом уроке мы изучим основные элементы HTML, как правильно их использовать и какие распространённые ошибки следует избегать.
<!DOCTYPE html>Этот тег указывает на тип документа и версию HTML. В большинстве современных веб-страниц используется следующая строка:
<!DOCTYPE html>
<html>Тег <html> является контейнером для всего содержимого веб-страницы. Он начинается с <html> и заканчивается </html>:
<!DOCTYPE html>
<html>
<!-- Содержимое страницы -->
</html>
<head>Внутри тега <head> размещаются метаданные, такие как заголовок страницы, ссылки на стили и скрипты:
<head>
<title>Моя первая веб-страница</title>
<meta charset="UTF-8">
</head>
<body>Внутри тега <body> размещается всё видимое содержимое веб-страницы:
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый параграф.</p>
</body>
<h1> — <h6>)Заголовки используются для создания заголовков различных уровней:
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<p>)Параграфы используются для создания текста:
<p>Это пример параграфа.</p>
<a>)Ссылки используются для перехода на другие страницы или ресурсы:
<a href="https://www.example.com">Перейти на Example</a>
<img>)Изображения добавляются с помощью тега <img>, который не имеет закрывающего тега:
<img decoding="async" src="image.jpg" alt="Описание изображения">
<ol>)Тег <ol> используется для создания нумерованных списков, а тег <li> — для элементов списка.
<ol>
<li>Элемент первый</li>
<li>Элемент второй</li>
<li>Элемент третий</li>
</ol>
<ul>)Тег <ul> используется для создания маркированных списков, а тег <li> — для элементов списка.
<ul>
<li>Элемент первый</li>
<li>Элемент второй</li>
<li>Элемент третий</li>
</ul>
<div>Тег <div> используется как контейнер для группировки других элементов и применения к ним стилей с помощью CSS.
<div>
<h2>Заголовок в контейнере</h2>
<p>Текст в контейнере.</p>
</div>
<span>Тег <span> используется для группировки текста внутри других элементов с целью применения стилей.
<p>Это <span style="color: red;">красный</span> текст.</p>
1.Неправильное закрытие тегов
Каждый открывающий тег (кроме одиночных) должен иметь соответствующий закрывающий тег.
<!-- Правильно -->
<p>Текст параграфа</p>
<!-- Неправильно -->
<p>Текст параграфа
2.Отсутствие обязательных атрибутов
Некоторые теги требуют обязательные атрибуты. Например, тег <img> требует атрибут src:
<!-- Правильно -->
<img decoding="async" src="image.jpg" alt="Описание изображения">
<!-- Неправильно -->
<img alt="Описание изображения">
3.Отсутствие обязательных атрибутов
Не используйте устаревшие теги, такие как <center> и <font>. Вместо этого используйте CSS для стилизации.
<!-- Правильно -->
<p style="text-align: center;">Центрированный текст</p>
<!-- Неправильно -->
<center>Центрированный текст</center>
4. Отсутствие метатега <meta charset="UTF-8">
Не забывайте добавлять метатег для указания кодировки.
<head>
<meta charset="UTF-8">
</head>
В этом уроке мы рассмотрели основные теги HTML и их правильное использование. Понимание основ HTML — это первый шаг к созданию веб-страниц. Избегайте распространённых ошибок и следите за актуальными стандартами.
Создайте простую веб-страницу, содержащую следующие элементы:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Моя первая веб-страница</h1>
<p>Это описание моей первой веб-страницы. Я учусь создавать HTML-разметку.</p>
<a href="https://www.example.com">Перейти на Example</a>
<img decoding="async" src="image.jpg" alt="Описание изображения">
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
