Не соблюдена вложенность html в более чем пяти местах
Большая вложенность тегов — плохо?
Простой 1 комментарий
Максимального уровня вложенности и в принципе количества узлов на странице не существует. При этом, однако, все упирается в возможности клиента.
Но если ты собрал кучу ненужных шагов просто так, то да, верстка скорее всего дрянь.
принципе количества узлов на странице не существует
Alex, не нужно достигать предельного значения, отнюдь, чтобы клиентские девайсы начали воспламеняется.
современные устройства спокойно пережуют и сотню.
вопрос: а надо ли?
Рекомендуется использовать БЕМ
.section__title
Элементы можно вкладывать друг в друга. Допустима любая вложенность элементов. Элемент — всегда часть блока.
Ошибки, которых следует избегать при написании HTML кода
Все, кто каждый день работает с HTML должны быть очень внимательны, так как соблюдать все правила HTML не так просто. Это очень важно, так как валидатор HTML находит все, даже незначительные, огрехи, и вы получаете код страницы с ошибками. Сегодня мы постараемся обратить внимание на наиболее распространенные из них. Уверен, что предложенные рекомендации будут очень полезны многим, а в особенности начинающим, разработчикам. Итак, добро пожаловать под
Неправильная вложенность HTML тегов
Очень важно правильно закрывать все HTML теги. Они должны закрываться в обратном порядке по сравнению с тем, как были открыты. Большинство новичков не уделяет этому должного внимания. Если теги закрыты в неправильном порядке, то вы получите ошибки при валидации, а некоторые стили могут быть не использованы. Будьте внимательны!
Использование блочных элементов внутри строчных
Все, кто хоть немного использовал HTML на практике знаю, что элемент может отображаться или в качестве блока или же как строка. Блочные элементы включая абзацы и разделы должны содержать строчные. Это логичная струтура документа, так что убедитесь, что ваш код соответствует ей.
Неиспользование аттрибута ALT
При работе с изображениями вы должны использовать аттрибут ALT. Это необходимо, так как пользователи смогут определить, что же должно быть на месте изображения, даже если используют очень медленное подключение. Это значение должно описывать суть используемого изображения. Никогда не используйте alt=«картинка». Если же изображение выполняет чисто декоративные функции, то используйте alt=»*».
Неправильные теги для выделения жирным или курсивом
Не смотря на то, что и в большинстве случаев отлично справляются со своими задачами, использование стилей для оформления текста позволяет получить гораздо большую гибкость оформления. Если же тег должен просто подчеркивать значение определенной части текста, то используйте тэги и .
Бесполезное использование переноса строки
Тег
может использоваться один раз в строке для того, что бы следующее предложение началось на следующей строчке. Многие используют этот тэг для того, что бы создать расстояние между элементами. Это использование не соответствует стандартам.
Вложенные теги HTML
Что значит вкладывать теги HTML?
Самый простой способ понять вложение — это думать о HTML-тегах как о полях, в которых содержится ваш контент. Ваш контент может включать в себя текст, изображения и связанные медиа. HTML-теги — это блоки вокруг содержимого. Иногда вам нужно разместить коробки внутри других коробок. Эти «внутренние» коробки вложены в другие.
Если у вас есть блок текста, который вы хотите выделить внутри абзаца, у вас будет два HTML-элемента, а также сам текст.
Этот текст — то, что мы будем использовать в качестве нашего примера. Вот как это будет написано в HTML:
Чтобы сделать предложение слова жирным, добавьте открывающие и закрывающие теги до и после этого слова.
Как видите, у нас есть один блок (абзац), который содержит содержание предложения, плюс второй блок ( пара сильных тегов), который отображает это слово как жирный.
Когда вы вкладываете теги, закрывайте теги в том порядке, в котором вы их открыли. Сначала вы открываете
Еще один способ думать об этом — снова использовать аналогию с блоками. Если вы поместите коробку в другую коробку, вы должны закрыть внутреннюю, прежде чем сможете закрыть внешнюю или содержащую коробку.
Добавление дополнительных вложенных тегов
Вы можете видеть, что наш внешний блок
теперь содержит два вложенных тега — и . Они оба должны быть закрыты, прежде чем та коробка, в которой они находятся, может быть закрыта.
В этом случае у нас есть коробки внутри коробок! Самым внешним полем является
Почему вы должны заботиться о вложенности
Главная причина, по которой вы должны заботиться о вложенности, — это если вы собираетесь использовать CSS. Каскадные таблицы стилей полагаются на то, что теги должны быть последовательно вложены в документ, чтобы он мог определить, где начинаются и заканчиваются стили. Неправильное вложение мешает браузеру знать, где применять эти стили. Давайте посмотрим на некоторые HTML:
Используя приведенный выше пример, если мы хотим написать стиль CSS, который будет влиять на ссылку внутри этого раздела, и только на эту ссылку (в отличие от любых других ссылок в других разделах страницы), нам потребуется использовать вложение для записи этот стиль как таковой:
Другие соображения
Доступность и совместимость с браузерами тоже важны. Если ваш HTML-код неправильно вложен, он не будет таким же доступным для программ чтения с экрана и более старых браузеров — и он может даже полностью нарушить визуальный вид страницы, если браузеры не смогут понять, как правильно отобразить страницу, поскольку элементы и теги HTML не на своем месте.
Наконец, если вы хотите написать полностью правильный и правильный HTML, вам нужно использовать правильное вложение. В противном случае каждый валидатор пометит ваш HTML как неправильный.
Избегаем распространенных ошибок в HTML5 разметке
Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.
Наблюдая за сайтами в галерее HTML5 сайтов и отвечая на вопросы пользователей, я видел множество сайтов с HTML5 разметкой. В этой статье я покажу некоторые ошибки и плохие практики разметки, которые я часто встречал, и объясню, как избежать их.
Не используйте тег в качестве обёртки для оформления
‘ы не умерли, и именно они отлично подходят в этом случае.
Принимая во внимание все вышесказанное, было бы хорошо разметить пример выше с использованием HTML5 так:
Если Вы не уверены, какой элемент использовать, то я советую Вам воспользоваться нашей блок-схемой выбора элемента (прим. переводчика: см. в самом низу записи).
Используйте и только при необходимости
, представляя заголовок секции в случае, если он состоит из нескольких уровней (подзаголовки, альтернативные заголовки и т.д.)
Избыток элементов
Я уверен, Вы прекрасно знаете, что элемент можно использовать несколько раз в документе. Поэтому часто встречается такое:
Неправильное использование
В этом случае просто уберите hgroup.
Второй случай — это еще один пример использования элемента без необходимости.
Подробнее об элементе можно почитать тут.
Не обрамляйте все ссылки в
Элемент nav представляет секцию страницы, связывающую её с другими страницами или частями текущей (секцию с навигационными ссылками).
Примечание: Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации. Часто в футерах размещают небольшой список ссылок на различные страницы сайта (Главная, Помощь, соглашение об использовании, etc). В этом случае одного footer’а должно быть достаточно. Хотя ничто не мешает использовать nav, в этом нет необходимости.
Общие ошибки в использовании элемента
Не каждое изображение
Спецификация описывает как «автономный контент, возможно, с заголовком и обычно являющийся самостоятельным элементом потока». Вот она, вся красота — элемент можно спокойно переместить из основного содержимого, например, в сайдбар.
Ваш логотип — не
Тоже самое касается и логотипа. Часто я вижу такое применение:
Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в
может быть не только изображением
Другой частый случай недопонимания элемента заключается в предположении, что его можно применять только для картинок. Но это не так. В может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании одними картинками. Наша задача как приверженцев веб-стандартов — описать контент нашей разметки.
Не так давно я писал об элементе подробнее. Советую почитать, если Вы хотите разобраться получше или освежить воспоминания.
Не используйте ненужный атрибут type
Это, возможно, наиболее общая проблема, встречаемая в HTML5 галерее. Хотя это и не ошибка, я считаю, что лучше избегать этого.
В HTML5 нет необходимости указывать атрибут type для элементов
Вместо этого Вы можете просто написать:
Помимо прочего, Вы также можете сократить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.
Некорректное использование атрибутов форм
Вы, должно быть, уже в курсе, что в HTML5 введено множество новых атрибутов форм. Мы рассмотрим их в ближайшее время, сейчас же я коротко расскажу, как делать не стоит.
Логические атрибуты
Существуют логические атрибуты также и для мультимедиа элементов и некоторых других. Описываемые мною правила применимы и для них.
Я редко встречаю их, но в случае с required я видел такое:
В конечном счете, это ничем плохим не грозит. Клиентский HTML парсер встретит атрибут required в разметке и применит соответствующие правила. Но что если сделать по-другому и написать required=«false»?
Парсер по-прежнему увидит атрибут required и применит соответствующее поведение, несмотря на то, что Вы указали ему не делать этого. Очевидно, это не то, чего Вы хотели.
Применительно к нашему примеру выше, мы могли бы написать так (в HTML):
Вложенность тегов html
Если внутри какого либо тега используется еще один или даже несколько других — это называется вложенность тегов html.
Давайте еще раз взглянем на размещенную часть кода html в листинге 1.2 
В данном примере мы видим, что размещен внутри
и является составляющей абзаца. В то же время
Под влиянием тега слово «HTML» выделено полужирным шрифтом, но все так же остается частью абзаца
Давайте рассмотрим еще один пример:
Добро пожаловать на сайт по изучению языка html
В этом абзаце мы выделили «языка html» курсивом, да еще и полужирным шрифтом. И обратите внимание: в этом примере вложен в тег . А если прописать наоборот? Вложить в тег . А никаких изменений не произойдет. Можете поэкспериментировать. Здесь нет приоритета тегов.
Далее нам надо усвоить еще одно правило написания тегов html. Очередность проставления закрывающих тегов. Иными словами — вложенный тег (и открывающий и закрывающий) должны быть внутри родительского тега.
В настоящее время браузеры научились исправлять мелкие опечатки в html-коде, но только мелкие. В противном случае страница может отобразиться не корректно.
Тег, в котором непосредственно размещен другой тег, называют родительским (родителем) для данного тега, а вложенный тег называют дочерним (потомком).
Каждый тег может иметь довольно много дочерних, а вот родительский лишь один.
Количество тегов, в которые последовательно вложен тот или иной тег, называют уровень вложенности. У некоторых страниц уровень вложенности отдельных тегов может достигать нескольких десятков.
Для более удобного чтения html-кода в нем отмечают уровень вложенности, проставляя отступ конкретного тега от левого края (листинг 1.3).
Взглянув на этот фрагмент html-кода видим, что