А закрыл ли ты тег?

    Работаю в большом проекте, 16 человек, распределенная работа. Часто возникает ситуация, когда после очередного апдейта проекта обнаруживается, что какой-нибудь div находится совсем не там, где ему полагается быть. Напимер отваливается правая колонка и подло подстраивается под основной. Сразу же начинаются попытки выяснить причины столь некорректного поведения: просматривается CSS, возносятся молитвы к FireBug. Но в итоге все оказывается тщетно, т.к. скорее всего кто-то просто банально забыл закрыть тег.

    Иногда это можно вычислить, просмотрев все измененные за какой-то промежуток времени шаблоны. Но какой промежуток просматривать? Вчера все работало, сегодня нет. За это время были залиты изменения в десятки, а то и сотни файлов. И начинается кропотливый поиск.

    А вот если бы была утилитка, которая могла бы проверять наличие таких ситуаций.
    Вооружаюсь гуглом и начинаю планомерный поиск. Час-два серфинга не приводят ни к каким результатам. Конечно-же есть всяческие онлайн валидаторы кода, начиная с самого de facto W3C'шного, но он, зараза, слишком умный и проверяет ВСЕ, выводит множество error'ов и warning'ов, которые часто влияют друг на друга, и чтобы с помощью него в коде найти подло закравшийся незакрытый тег, нужно потратить много нервов и времени.

    И вот на этой грустной ноте нерешенной проблемы обращаюсь к вам, хабралюди. Какими средствами вы пользуетесь, когда нужно просто найти незакрытые теги, но не нужно (пока-что) отвлекаться на всяческие незаданные alt'ы для картинок и прочие менее критические ошибки?

    Комментарии 80

      0
      Во, недавно столкнулся с такой же проблемой, будет очень интересно узнать кто как лечит :)
      • НЛО прилетело и опубликовало эту надпись здесь
        +7
        В вашу среду разработки не встроен Tidy ? Во-вторых, есть плагин для фаерфокса, тот же Tidy. https://addons.mozilla.org/en-US/firefox…
          +3
          Да, и если у вас множество error-ов и warning-ов, то стоит задуматся о качестве кода.
            +1
            Именно - одна из причин почему нужно соблюдать стандарты.
            0
            +1. Сразу делаю валидный код, и потом не приходится долго искать, где лажа.
            0
            Можно не допускать такого: htmlpurifier
              –2
              вообще это весьма нетривиальная задача — анализ и транслирование кода. у меня в институте чуть мозг не взорвался, когда учили компиляторы писать. еслиб все было так просто, то движки браузероы сами бы закрывали незакрытые теги.
                –3
                Найти незакрытый тэг так же просто как найти незакрытую скобку в математическом выражении. Принцип тот же, и математиком быть необязательно.
                  –1
                  Случилось так, что я - математик. У меня даже диплом есть. И вот что я скажу - понять, что в математическом выражении не хватает скобки не сложно. Но вот найти где именно это скобка должна стоять - очень сложная задача.
                    –3
                    По-моему, задачу авто-закрытия тэгов вы сами и придумали.
                      –1
                      Слив защитан? Или будет еще какая-нибудь нелепая версия?
                        +1
                        Без всякого сарказма, просто просветите нас, как относится "нетривиальная задача — анализ и транслирование кода" к проблеме топика: "когда нужно просто найти незакрытые теги".
                          0
                          Вас, это кого? Тех, кто так легко и играюче рассуждает о математических выражениях? Попробую.

                          Все очень просто. Есть код html (xml, css, разное), который написал верстальщик. Есть посетитель сайта, которому пришел этот код в виде текста. Есть браузер, который АНАЛИЗИРУЕТ и ТРАНСЛИРУЕТ код в виде, например, таблицы фотографий с голыми бабами на экране монитора.

                          Так вот. Браузеру нужно понять текст, который написал верстальщик и корректно его отобразить. А это сложно. А сложно на научном языке и значит НЕТРИВИАЛЬНО.

                          Кажется, я все объяснил. Большими буквами выделены ключевые слова из твоего вопроса.
                            0
                            Нетривиально - это значит нестандартным, не очевидным способом, пускай и легким по исполнению.
                            Вот только что нетривиального в обычном анализаторе лексем написанным в 3 строчки на любом скриптовом языке, я как и видимо тов. denver понять увы не могу...
                            А задачу авто-закрытия тегов броузерами вы сами и придумали.
                              0
                              Так разве в последнем параграфе топика не ставится эта задача?

                              И вот на этой грустной ноте нерешенной проблемы обращаюсь к вам, хабралюди. Какими средствами вы пользуетесь, когда нужно просто найти незакрытые теги, но не нужно (пока-что) отвлекаться на всяческие незаданные alt'ы для картинок и прочие менее критические ошибки?


                              Я в своем комменте и пишу, что очень трудно сделать такую утилиту, чтоб она искала такую с первого взгляда простую вещь, как незакрытый тег. А уже потом свели разговор, в русло: "А что сам браузер не исправляет эту ошибку налету?"
                                –2
                                Математик, представь что тэги это разные скобки - закрывающиеся и открывающиеся:
                                ( ... { ... } ... [ ... { ... ] ... ( ...
                                Иди начиная слева направо и считай скобки. В каком порядке они открываются в таком и должны закрываться. Достаточно ≤1 прохода, чтобы определить скобку которая была не закрыта.

                                Когда поймешь принцип, замени скобки на тэги. Надеюсь это не подорвет твой мозг.
                                  0
                                  Я извиняюсь ч то вмешиваюсь в чужое обсуждение, но...
                                  Теги, например , очень часто бывают вложены друг в друга. Будем считать их за круглые скобки.
                                  Тогда ((()) может быть исправлено и как ()(()) и как ((())). Алгоритм исправления недетерминирован для HTML.
                                  Если имелись ввиду различные тэги, то они могут и пересекаться, напр. , так что пример не понятен.
                                    +1
                                    Исправлять будет человек.
                                    Задача состоит в том, чтобы _найти_.
                                    Для этого достаточно простенького рекурсивного парсера.
                                      0
                                      Приведу контрпример нерекурсивной структуры:
                                      <u><b>Hello, World!</u></b>
                                      Можно локализовать ошибку рекурсивным парсером (выполнять до тех пор пока на границах передаваемого отрезка есть два парных тега).
                                      Я правильно понял твою мысль? Тогда собственно дело за реализацией. Никаких конкретных решений предложить не могу, сам я программист и верстку делаю только базовую (шаблоны). Если появится время, напишу программку на PHP.
                                      0
                                      а вы скобки в стек FIFO пихайте, тогда такого не будет :)
                                      0
                                      Мдааа... и главно так уверенно (и в тот же момент неправильно в корне) на эту тему рассуждаешь. Тебе бы в политики податься.
                                        0
                                        должен с вами не согласиться. про конструктивность критики писали не раз наверное, поэтому посторяться не буду.

                                        излагаю здесь некоторые аспекты, которые, возможно, послужили причиной вашего недовольства. итак, на самом деле, существует стандарт по коррекции кода браузерами. именно благодаря ему мы можем видеть что-либо на неправильно написанной странице. не вдаваясь в недостатки этого стандарта, хотелось бы указать, что автора интересует валидация кода (который вполне может быть синтаксически верен), с условием сохранения первоначальной верстки, т.е. совершенно недостижимая таким образом цель.

                                        из сложившегося положения я вижу единственный выход - отслеживание истории. точно описать алгоритм я пока что не берусь, однако определенно надо рассматривать некоторую разновидность деревьев кода и вести по ним историю.

                                        извиняюсь за чрезмерно утомительное сообщение и что продолжил нить рассуждения denver'а. было весьма обидно за товарища по профессии.
                                        –1
                                        очень легко ты тему поменял. я-то писал о том, что трудно найти место где тег должен быть закрыт:


                                        Случилось так, что я - математик. У меня даже диплом есть. И вот что я скажу - понять, что в математическом выражении не хватает скобки не сложно. Но вот найти где именно это скобка должна стоять - очень сложная задача.


                                        а про бредовость твоего подхода тебе уже выше за меня ответили.
                                          –1
                                          Я уже сказал тебе экс-математик, что про проблему закрытия тэгов в топике речи не шло:
                                          ...на этой грустной ноте нерешенной проблемы обращаюсь к вам, хабралюди. Какими средствами вы пользуетесь, когда нужно просто найти незакрытые теги
                                          Так что ты зря детонируешь свой мозг на эту тему.
                          • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              если бы было так, то закрывающие теги были бы не нужны.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  –3
                                  всмысли? при чем здесь стандарт? мы тут вроде мечтать собрались о классах скобок! :)
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      –1
                                      ну это в математике, а в html-то огого какие просторы для творчества. к своему стыду не могу вспомнить как выглядел учебник сканави. помню, что был такой, но вот что в нем было - не помню. уж больше 10 лет прошло с тех пор :)
                              0
                              ...Разница между математиком и программистом в том, что математик
                              делает то, что можно, так, как нужно, в то время как программист
                              делает то, что нужно, так, как можно...
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                А по-хорошему, табулировать надо с самого начала :)
                                • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              Задачу можно решить значительно проще.

                              Можно просто закидывать открывающие теги в стек, а при попадании на закрывающий тег проверять лежит ли на вершине стека такой же открывающий. если да, то убирать этот тег с вершины стека и идти дальше, если нет, то сообщать об ошибке.

                              Ваш метод значительно более общий - проверка на соответствие формальной грамматике, хотя это тоже не ахти как сложно.
                              Вопрос, есть ли для HTML общепринятая формальная грамматика?
                              0
                              как я поступаю, если рушится верстка...
                              открывается код страницы с ошибкой, и уже в ней для начала считаю все
                                0
                                А если я не закрою тэг, то шаблон не загрузится.. и упадёт с ошибкой ;)
                                  0
                                  xslt ;) ?
                                    –1
                                    Упаси бог от xslt ;)
                                    У меня валидные kid шаблоны для Turbogears
                                      +1
                                      почему? xslt — мощная вещь
                                  0
                                  Обычно использую firebug, ищу область, в которой глючит, и вычисляю "неправильные" теги. Но для этого нужно знать каждую страницу вплоть до блока.
                                    +1
                                    юзать w3c-валидатор и писать код валидный код без ошибок. Со временем привыкаешь.
                                      0
                                      Есть плагин для ФФ View Source Chart, без неё нереально вообще смотреть большой HTML код. Обычно с помощью этого и нахожу ошибки и незакрытые теги. НО всё равно надо делать валидный код, как никак стандарт, к тому же если подгонять всё под какой то броузер, вы никогда не узнаете как это будет выглядеть в будущих версиях браузеров, а так есть надежда (на МС)что в будущем все броузеры будут поддерживать стандарты. И я вообще фанат Оперы, но без ФФ и его плагинов тяжело, буду ждать от Опера штуки для веб разработчиков. Удачи.
                                        0
                                        всё равно надо делать валидный код, как никак стандарт, ...в будущих версиях браузеров...

                                        ОМГ. наша песня хороша, начинай сначала.. Ну не надоело ли еще писать прописные истины?
                                          0
                                          а не надоело ли не слушать и не пользоваться прописными истинами?
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          Как было сказано выше - CVS/SVN. Это значительно облегчает поиск ошибки и главное - исправить результат.

                                          "За это время были залиты изменения в десятки, а то и сотни файлов. И начинается кропотливый поиск."
                                          А вот это абсолютно неверное решение. Разбейте задачу на мелкие подзадачи, и тестируйте после выполнения каждой.
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              +2
                                              Пользуюсь Intellij IDEA.
                                              Парсит все на лету: html, css, js файлы и проверяет их валидность.

                                              Очень порадовало, что требует от HTML быть просто HTML, а не XML: не закрытые input, br таги считаются валидными.

                                              Думаю, такая же ситуация и с Eclipse.
                                                0
                                                Вот-вот, и я тоже. И меня пост вообще очень удивил - я не веб-девелопер (большую часть времени), но моя среда отслеживает подобные ошибки, а инструменты профессиональных веб-разработчиков такого делать не умеют. Более чем странно.
                                                0
                                                Не претендую на звание проффессионального или около-проффесионального верстальщика, но работаю под KDE в основном в Quanta+. Она обычно сама закрывает теги, где надо и не надо. При грамотной настройке эта функция бывает весьма полезной. Особенно если приучиться сначала открыть-закрыть тег, а потом уже вписывать в него данные.
                                                  0
                                                  Мне кажется что организовать эффективную распределённую работу 16 человек над одним кодом без систем контроля версий а-ля SVN/CVS очень сложно. При наличии версий можно хоть каждую версию протестировать в ходе временного промежутка, а дальше уже задача на bugfix вешается на автора опуса и к дисциплине приучает и пустой траты времени практически нет.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                      0
                                                      да
                                                      +1
                                                      в моей cms все шаблоны написаны на xslt, так что за корректностью html следит xslt-процессор
                                                        0
                                                        Я код правлю в Dreamweaver'e, там есть такая мулька аналитическая - CLOSE TAGS.
                                                        В 99% случаев помогает.
                                                          0
                                                          Пользуюсь HTML валидатором https://addons.mozilla.org/firefox/addon/249
                                                            0
                                                            На development сервере прописано
                                                            header('content-type: application/xml; charset=utf-8', true);

                                                            Мозилла и опера сразу показывают ошибки верстки с номером строки и символом.
                                                              0
                                                              как вариант загрузить (x)html в DOMDocument и смотреть не выдает ли он варнингов, и использовать Validates the document based on its DTD
                                                              DTD именно для этого и предназначен, или я ошибаюсь?
                                                              Ну и конечно проверка на валидность встроенна в PDT
                                                                –2
                                                                поиск любых ошибок надо начинать в первую очередь с синтаксической строгости документа. ставите HTML Validator для FF и всегда видите статус строгости документа.
                                                                  0
                                                                  Очевидно, что нужно использовать SVN или CVS. Сразу будет видно, что, когда, кем, в каком файле было изменено. А когда видны изменения, то несложно найти ошибку - не нужно прочесывать весь код, нужно только проверить измененные места.
                                                                    0
                                                                    Аналогично, первая мысль: проанализировать разницу между снимками кода.
                                                                      0
                                                                      Согласен, SVN - наше все. Но когда ошибка внезапно находится через неделю-две после злосчастного commit’а (да-да, бывает и так на редкопосещаемых страницах или при каких-нибудь специфических условиях), сложно вычислить последний.
                                                                        0
                                                                        да не SVN-ом единым :) TFS мое все!
                                                                      0
                                                                      Андрюха привет.
                                                                      Та что там Сыроежин сказал, как он это делает?
                                                                      Dreamweaver кстати может помочь, но поскольку юзаеться большое количество фримаркера, то варнингов будет тож достаточно много. Я юзаю Tidy, прогребать надо много ерроров и варнингов, но зато хоть есть хоть какой-нибудь список. Валидно версать вряд ли получиться - всё на шаблонах да и рефакторинг существующиего кода займёт достаточно много времени, к тому же полюбому надо будет садить возле себя сервис разработчика.
                                                                        0
                                                                        Самый правильный способ, это писать теги сразу парами.
                                                                        За три года проблем с незакрытыми тегами у меня не возникало.
                                                                          0
                                                                          Согласен. У меня самого такая-же привычка, но кроме меня в проекте еще 5 веб-дизайнеров. А во-вторых, никто не безгрешен, учитывая сложные ситуации, когда существующую функциональность необходимо переложить на совершенно новый дизайн.
                                                                          0
                                                                          как вариант можно открыть в dreamweaver и сворачивать все валидно-закрытые тэги начиная с самых глубоких( я надеюсь древовидные отступы вы ставите?)так ошибку самому можно найти довольно быстро
                                                                          Quimby походу писал о том же но я например с его слов не понял бы :)
                                                                            0
                                                                            firefox+tidy неплохо справляется с задачей поиска пары выпавших дивов, так же присутствует подавление определенных ошибок, firebag позволяет проконтролировать правильные ли стили применены к объекту.
                                                                              0
                                                                              коменты не читал, но в VS есть подсветка синтаксиса с валидацией, главное доктайп указать
                                                                                0
                                                                                да, добавлю, еще веть узел можно в MS VS свернуть, тогда вообще искать проблем не будет ;)
                                                                                0
                                                                                Все что тут написано - по большей части верно. Но когда вы занимаетесь разработкой Web 2.0 проекта в команде из 5-15 человек, то автоматическая валидация документов средствами IDE, валидатор W3C, Dreamwaver часто не спасает. Происходит это потому, что программист Пупкин захадкодил некорректный HTML в JavaScript-е, а браузеры автоматически закрывают незакрыетые теги, причем иногда корректно - иногда и нет.
                                                                                  0
                                                                                  Грузите куда хотите. Хоть в "ДримВейвер", хоть еще куда. Но не забывайте о том, что один и тот же тег в коде может закрываться в нескольких местах по условию. И как в этом случае проверить?

                                                                                  ЗЫ. Или я что-то не догоняю в воскресенье утром? ;)
                                                                                    0
                                                                                    тут просто дизайнеры собрались.
                                                                                    0
                                                                                    Вы будете смеяться, но последний раз когда у меня была проблема с незакрытым тегом меня спас... FAR Manager с плугином colorer. Он автоматически валидирует _синтаксис_, т.е. проверяет что бы количество открытых тегов совпадало с количеством закрытых, если нет - подсвечивает как ошибку не закрытый тег.
                                                                                    Обычно работаю в ZDE, но иногда удобно посматривать и фаром.
                                                                                      0
                                                                                      FAR + colorer5, только в схеме htc\common.jar:/inet/html.hrc нужно немного подправить htmlPairs (добавив туда теги div, span, td, tr...), после чего можно просто прыгать по парам ища что-то невалидное.
                                                                                        0
                                                                                        то есть тебе нужно просто вместо XHTML-валидатора использовать XML-валидатор
                                                                                          0
                                                                                          Валидатор в редакторе кода (Dreamweaver. Aptana/Eclipse) позволяет творить валидацию на лету, да еще и фильтровать ошибки/ворнинги/инфо. Полюбому, справляться надо с первыми двумя надо «под ноль».
                                                                                            +1
                                                                                            Для нахождения и исправления таких вещей в XML и HTML я использую Altova XMLSpy (http://www.altova.com/products/xmlspy/xm…). Там есть функция "Pretty Print", которая
                                                                                            выравнивает документ и ругается, если где-то что-то не так (при этом говоря, чего и где не хватает)

                                                                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                            Самое читаемое