В этом уроке мы рассмотрим распространённые ошибки, которые могут возникать в HTML-разметке. Понимание этих ошибок и способов их исправления поможет вам создавать более корректный и стабильный HTML-код.
Каждый открывающий тег (кроме одиночных) должен иметь соответствующий закрывающий тег. Пропуск закрывающего тега может привести к неправильному отображению содержимого.
Правильно:
<p>Это параграф.</p>
Неправильно:
<p>Это параграф.<p/>
Некоторые теги требуют обязательные атрибуты для правильной работы. Например, тег <img> требует атрибут src для указания источника изображения.
Правильно:
<img decoding="async" src="image.jpg" alt="Описание изображения">
Неправильно:
<img alt="Описание изображения">
HTML имеет определённые правила вложения тегов. Например, тег <li> должен быть внутри <ul> или <ol>, и тег <p> не может содержать другие блочные элементы.
Правильно:
<ul>
<li>Элемент списка</li>
<li>Ещё один элемент</li>
</ul>
Неправильно:
<p>Этот абзац
<div>Содержимое блока</div>
</p>
DOCTYPE указывает браузеру, какую версию HTML следует использовать для интерпретации документа. Отсутствие DOCTYPE может привести к неожиданному отображению страницы.
Правильно:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Документ</title>
</head>
<body>
<p>Содержимое страницы</p>
</body>
</html>
Неправильно:
<html>
<head>
<meta charset="UTF-8">
<title>Документ</title>
</head>
<body>
<p>Содержимое страницы</p>
</body>
</html>
Некоторые теги устарели и больше не поддерживаются в HTML5. Например, <font> и <center> заменены CSS-свойствами.
Правильно:
<p style="text-align: center;">Центрированный текст</p>
Неправильно:
<center>Центрированный текст</center>
alt для изображенийАтрибут alt в теге <img> является обязательным для обеспечения доступности и SEO. Без этого атрибута изображение может быть недоступным для пользователей с нарушениями зрения.
Правильно:
<img decoding="async" src="logo.png" alt="Логотип компании">
Неправильно:
<img alt="41. Ошибки в HTML-разметке" decoding="async" src="logo.png">
Некоторые ошибки могут возникать из-за неправильного использования атрибутов. Например, отсутствие кавычек вокруг значения атрибута.
Правильно:
<input type="text" name="username" value="JohnDoe">
Неправильно:
<input type=text name=username value=JohnDoe>
Метатеги должны быть расположены внутри <head>. Их неправильное размещение может вызвать ошибки в интерпретации страницы.
Правильно:
<head>
<meta charset="UTF-8">
<meta name="description" content="Описание страницы">
<title>Документ</title>
</head>
Неправильно:
<html>
<head>
<title>Документ</title>
</head>
<meta charset="UTF-8">
<meta name="description" content="Описание страницы">
</html>
HTML имеет специальные символы, которые должны быть представлены в виде сущностей, чтобы избежать ошибок отображения.
Правильно:
<p>Текст с символом & и < и >.</p>
Неправильно:
<p>Текст с символом & и < и >.</p>
Понимание и исправление ошибок в HTML-разметке помогает создать более корректный и функциональный код. Соблюдение стандартов и правил HTML предотвращает проблемы с отображением и обеспечением доступности веб-страниц.
Создайте HTML-документ, содержащий следующие элементы:
alt.Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Пример документа">
<title>Ошибки в HTML-разметке</title>
</head>
<body>
<p>Правильно закрытый параграф.</p>
<p>Неправильно закрытый параграф
<img alt="41. Ошибки в HTML-разметке" decoding="async" src="image.jpg"> <!-- Без атрибута alt -->
<img decoding="async" src="image.jpg" alt="Описание изображения"> <!-- С атрибутом alt -->
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ul>
<div>
<p>Этот блок должен быть внутри <p>.</p>
</div>
<center>Устаревший тег</center>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
