Код HTML5 ошибки. Вложенность. Структура. Валидация.
Пример исправной структуры HTML5 страницы
<!DOCTYPE html> <!-- Декларирует / объявляет HTML5 -->
<html lang="ru"> <!-- Обязательно указать язык -->
<head> <!-- Секция заголовков и служебной информации * -->
<title>title</title> <!-- Титульный заголовок - не должен быть пустым -->
</head>
<body> <!-- Основное тело содержимого, контент документа -->
<img src="img.jpg" alt="picture" title="picture"> <!-- Минимум атрибутов для картинки, это путь и alt описание ... Очень хорошим тоном считается дублировать описание alt в теге title для корректной работы парсеров программ для людей с ограниченными возможностями и получения дополнительной информации браузерами -->
<script></script> <!-- Скрипт, при объявлении, в заголовках - не должен содержать никакой лишней информации -->
</body>
</html> <!-- Обязательно закрывать тело документа и протокол гипертекстовой разметки -->
<!-- Тег для вставки комментариев - не влияет на качество или работоспособность HTML кода ))) -->
Созданный, таким образом, каркас HTML5 документа - без проблем пройдёт W3C валидацию, без единой ошибки ))) ...
Влияние дополнительных тегов на качество кода.
Однако, подготовленный код тестовой странички может содержать избыточное количество различных тегов, контента и информации, затрудняющих верификацию и отладку разметки ... Самый распространённый пример ошибок, кроме опечаток - нарушение вложенности или очерёдности тегов в структуре HTML ...
Яркий пример : размещение скриптов счетчиков, статистики, рекламы и иных служебных подсистем - в секцию HEAD ... Обычно их рекомендуют размещать, как можно - выше, чтобы получать максимальную отдачу от использования ... Обычно, чтобы не нарушать пользовательскую разметку - их оборачивают в теги DIV и SPAN, с назначением стилевых и исполнительных ID идентификаторов ...
Например :
div class="class" id="123"
script text/javascript
/script
/div
noscript /noscript
...
Мало того, что разработчики скриптов совершенно не заморачиваются очисткой JS кода от устаревших тегов, так и может возникнуть ситуация, когда внедрённый код - попадает выше тега TITLE ... Сложившиеся обстоятельства провоцируют возникновение ряда ошибок, отголоски которых, наблюдаются - на много строк ниже по коду от места аварии ))) ...
Например, внедряя внешний код в HEAD * : DIV - не может быть в структуре дома HTML - выше TITLE ... С непривычки, и в объёмном коде - устанете искать эту неочевидную ошибку ))) ... Ведь, внедряемый и структурно правильный код - внедряется в исправный документ - откуда же ожидать подвоха ? ... Автоматом валятся NOSCRIPT и первый DIV ниже по коду ... Плюс - различные вариации побочных ошибок, связанных со сдвигом структуры DOM интерфейса макета ... И, кто бы мог подумать ))) ...
Еще один пример ...
p pre text /pre /p
div pre p text /p /pre /div
Логическое желание отформатировать вывод параграфом P внутри тега предварительно отформатированного текста PRE, который должен быть представлен точно так, как написан источнике - неизбежно приведёт к ошибке : элемент P не разрешен как дочерний элемент PRE в этом контексте ... И - автоматическое подавление парсером кода - дальнейших ошибок из этого поддерева ... То есть, PRE в P, включать - можно ; а наоборот - нельзя (нарушение вложенности тегов) ...
То же самое, относится и ко вложению тегов PRE и CODE - при форматировании кода программирования на страницах сайта ... PRE - форматирует вывод, а CODE - указывает разметку ; обратное вложение, также - не допускается ...
pre
code
IF %A%==%B% (SET C=%D%)
/code
/pre
Обычно разработчики скриптов и внешнего года - запрещают его модификацию, вплоть до исключения из партнёрства ... Но я всегда клал, кладу и буду ложить болт на ихние амбиции, поскольку терпеть не могу, когда парсеры проверки валидации HTML, как слепого котёнка - тыкают меня в обнаруженные гадости, причём - совершенно не моего производства ))) ... Поэтому, не касаясь технической стороны внедрённого кода, я всегда, в наглую - исправляю стилистику и добавляю все ALT, TITLE, удаляю TYPE text/javascript из скриптов, потому что, это никоим образом, на работоспособность внедрённого кода - не влияет ))) ...
Внедряя дополнительные теги в свой HTML5 код, хорошей практикой будет следование их минимальной атрибутике и вложенности, с проверкой общей валидации на ресурсе W3C / координатор разработки стандартов всемирного интернета - для следования рекомендуемым практикам веб разработки ...
Раздел computer : список всех страниц ...