Как найти незакрытый div

A unclosed div problem almost make me crazy. It is very difficult to track especially when the page is long and complex.

<div>
   <span>
       <b>Text</b>
       <a href="/">Title <span>another test</span>
   </span>
</div>

How can I find unclosed HTML-tags on a website?

Any suggestions?

Mark Rotteveel's user avatar

asked Jun 7, 2011 at 22:25

3

As stated already, running your code through the W3C Validator is great but if your page is complex, you still may not know exactly where to find the open div.

I like using tabs to indent my code. It keeps it visually organized so that these issues are easier to find, children, siblings, parents, etc… they’ll appear more obvious.

EDIT: Also, I’ll use a few HTML comments to mark closing tags in the complex areas. I keep these to a minimum for neatness.

<body>

    <div>
        Main Content

        <div>
            Div #1 content

            <div>
               Child of div #1

               <div>
                   Child of child of div #1
               </div><!--// close of child of child of div #1 //-->
            </div><!--// close of child of div #1 //-->
        </div><!--// close of div #1 //-->

        <div>
            Div #2 content
        </div>

        <div>
            Div #3 content
        </div>

    </div><!--// close of Main Content div //-->

</body>

answered Jun 7, 2011 at 22:32

Sparky's user avatar

SparkySparky

97.9k25 gold badges199 silver badges284 bronze badges

8

answered Jun 7, 2011 at 22:27

rockerest's user avatar

rockerestrockerest

10.4k3 gold badges37 silver badges67 bronze badges

4

I know that there have already been some good answers, but I came across this question with a Google Search and I wish someone would have pointed out this online checking tool…

http://www.tormus.com/tools/div_checker

You just throw in a URL and it will show you the entire map of the page. Very useful for a quick debug like I needed.

answered Jul 17, 2013 at 17:19

Noah Whitmore's user avatar

1

1- Count the number of <div in notepad++ (Ctrl + F)
2- Count the number of </div

Compare the two numbers!

Bo Persson's user avatar

Bo Persson

90.4k31 gold badges145 silver badges203 bronze badges

answered Feb 20, 2013 at 19:39

Milad's user avatar

MiladMilad

1451 silver badge1 bronze badge

3

If you use Dreamweaver you could easily note to unclosed div. In the left pane of the code view you can see there <> highlight invalid code button, click this button and you will notice the unclosed div highlighted and then close your unclosed div. Press F5 to refresh the page to see that any other unclosed div are there.

You can also validate your page in Dreamweaver too. File>Check Page>Browser Compatibility, then task-pane will appear Click on Validation, on the left side there you’ll see ► button click this to validate.

Enjoy!

answered Apr 11, 2013 at 10:38

Bhojendra Rauniyar's user avatar

Taking Milad’s suggestion a bit further, you can break your document source down and then do another find, continuing until you find the unmatched culprit.

When you are working with many modules (using a CMS), or don’t have access to the W3C tool (because you are working locally), this approach is really helpful.

CRABOLO's user avatar

CRABOLO

8,56739 gold badges41 silver badges68 bronze badges

answered Mar 13, 2013 at 2:20

RogerRoger's user avatar

RogerRogerRogerRoger

3863 silver badges9 bronze badges

Div tags are easy to spot for me. Just download the file, scan it or so with netbeans, then continue debugging it. Or you can use the Google chrome developer kit, and view the page source. I’m a bit of a weird developer, I don’t always use the «best» stuff. But it works for me.

I’ll link you with some developer stuff I use

http://www.coffeecup.com/free-editor/

http://www.netbeans.org

Those are just a few of the good ones out there. I’m open to more suggestions to this list :D

Happy programming

-skycoder

answered Feb 24, 2015 at 5:26

TheCodingKlam's user avatar

0

Ситуация: есть страница товара. На ней, при косметических правках кода/установке плагинов, полезла верстка — все блоки под блоком товара переместились вправо. Потенциально — проблема в незакрытом блоке кода.

Вопрос: как найти незакрытый блок верстке или исправить ее в общем? Спасибо.

9 ответов

Как уже говорилось, запуск вашего кода с помощью W3C Validator велик, но если ваша страница сложная, вы все равно можете не знать, где найти открытый div.

Мне нравится использовать вкладки для ввода моего кода. Он держит его визуально организованным, так что эти проблемы легче найти, детей, братьев и сестер, родителей и т.д…. они станут более очевидными.

EDIT: Кроме того, я буду использовать несколько комментариев HTML, чтобы отметить теги закрытия в сложных областях. Я держу их как минимум для аккуратности.

<body>

    <div>
        Main Content

        <div>
            Div #1 content

            <div>
               Child of div #1

               <div>
                   Child of child of div #1
               </div><!--// close of child of child of div #1 //-->
            </div><!--// close of child of div #1 //-->
        </div><!--// close of div #1 //-->

        <div>
            Div #2 content
        </div>

        <div>
            Div #3 content
        </div>

    </div><!--// close of Main Content div //-->

</body>

Sparky
07 июнь 2011, в 22:37

Поделиться

Я сделал онлайн-инструмент под названием Unclosed Tag Finder, который будет делать то, что вам нужно.

Вставьте свой HTML-код, и он даст вам выход, например: «Закрывающий тег в строке 188 не соответствует открытому тегу в строке 62».

Jonathan Aquino
17 май 2013, в 18:31

Поделиться

rockerest
07 июнь 2011, в 23:31

Поделиться

Я знаю, что уже были хорошие ответы, но я столкнулся с этим вопросом с помощью Google Search, и я бы хотел, чтобы кто-то указал на это онлайн-инструмент проверки…

http://www.tormus.com/tools/div_checker

Вы просто вводите URL-адрес, и он покажет вам всю карту страницы. Очень полезно для быстрой отладки, как мне было нужно.

Noah Whitmore
17 июль 2013, в 19:12

Поделиться

Использовать блокнот ++. вы можете легко найти их

http://notepad-plus-plus.org/download/

Или вы можете Просмотреть источник с FIREfox Unclosed divs будет отображаться в RED

Thilanka De Silva
19 июнь 2013, в 05:32

Поделиться

1- Подсчитайте количество <div в блокноте ++ (Ctrl + F)
2- Подсчитайте количество </div

Сравните два числа!

Milad
20 фев. 2013, в 20:28

Поделиться

Если вы используете Dreamweaver, вы можете легко заметить незакрытый div. На левой панели окна кода вы можете увидеть кнопку <> highlight invalid code, нажмите эту кнопку, и вы заметите, что незакрытый div выделен, а затем закройте незакрытый div. Нажмите F5, чтобы обновить страницу, чтобы увидеть, что там есть любой другой незакрытый div.

Вы также можете проверить свою страницу в Dreamweaver. File>Check Page>Browser Compatibility, появится панель задач Нажмите на Validation, на левой стороне вы увидите кнопку ►, чтобы щелкнуть это, чтобы подтвердить.

Наслаждайтесь!

Bhojendra Nepal
11 апр. 2013, в 12:20

Поделиться

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

Когда вы работаете со многими модулями (используя CMS) или не имеете доступа к инструменту W3C (потому что вы работаете локально), этот подход действительно полезен.

RogerRoger
13 март 2013, в 02:23

Поделиться

Знаки Div легко заметить для меня. Просто скачайте файл, сканируйте его или нет с помощью netbeans, а затем продолжите его отладку. Или вы можете использовать набор разработчика Google Chrome и просмотреть источник страницы. Я немного странный разработчик, я не всегда использую «лучшие» вещи. Но это работает для меня.

Я свяжу вас с некоторыми материалами разработчика, которые я использую

http://www.coffeecup.com/free-editor/

http://www.netbeans.org

Это лишь некоторые из хороших. Я открыт для большего количества предложений в этом списке: D

Счастливое программирование

-skycoder

TheCodingKlam
24 фев. 2015, в 06:32

Поделиться

Ещё вопросы

  • 1данные с функцией return против возврата простого объекта данных
  • 0setTimeout window.open не может принять this.href
  • 0Окно браузера Chrome
  • 0Как сделать так, чтобы моя программа принимала несколько слов
  • 0оставаясь на той же странице, используя заголовок местоположения в php
  • 0Загрузить изображение в ASP.NET
  • 1Коллекционер для самой быстрой минорной gc
  • 0Qt mac переключается между панелями без изменения окна
  • 0MySQL конвертировать строку в дату с миллисекундами
  • 0Подождите, пока звук не закончится, чтобы использовать страницу
  • 0Сделайте все экземпляры части слова курсивом
  • 0Mvc; Вернуть загружаемый файл в представление
  • 0Не удается найти объекты $ parent scope в директиве Angular
  • 1Не удалось выполнить сертификацию приложения Manifest
  • 1Питонический способ вставить запятую перед заглавными буквами [Regex] [duplicate]
  • 1Откройте PDF, если он уже загружен, если нет, загрузите PDF, используя менеджер загрузок
  • 1Google Script не может прочитать свойство «0»
  • 0img и вертикальное выравнивание текста
  • 0facebook v4 sdk class Ошибка изменения T_OBJECT_OPERATOR в файле FacebookSession.php
  • 1Есть ли ярлык, чтобы повторить последнее сканирование StyleCop
  • 0Функция заголовка php перенаправляет только на локальные страницы
  • 0jQuery UI Ссылки в заголовке аккордеона не работают
  • 0Создайте объект JSON динамически Angular
  • 1Есть ли возможность программно менять квадратные клавиши с помощью Reader SDK?
  • 0Как выбрать МАКСИМАЛЬНУЮ дату из левого объединения нескольких таблиц
  • 1Android — сопоставить родительский элемент при просмотре видео
  • 0используя один и тот же вид на страницах
  • 1Распаковка кортежей в списке списков с определенным порядком
  • 0Паспорт логин — mysql
  • 0Как прочитать конкретное строковое значение с помощью JSoup
  • 1Изображение Android не вращается после 1-го запуска с помощью ViewPropertyAnimator
  • 0ошибка: ожидаемый неквалифицированный идентификатор при использовании форсированного мьютекса
  • 0Linq Query не удалось объединить запись двух таблиц
  • 1Выполнение пакетного файла с зависимостью пути в c #
  • 0Durandal Transition — Ожидается, что «activeView» будет нулевым, но, похоже, оно сохранит свое прежнее состояние?
  • 0Как показать изображение и контент из базы данных на страницу PHP?
  • 0Система маршрутизации для Custom Framework с компонентами Symfony
  • 0Доступ к защищенным статическим членам суперкласса подклассами в C ++
  • 1Создать массив объекта, когда сканер читает текстовый файл
  • 1как получить куки-файлы двух серверов 1. запускает приложение (HTTP), 2. запускает сервер websocket (WS)?
  • 0Как добавить элемент в div в angularjs?
  • 0Как обновить количество, выполнив несколько запросов?
  • 0Объект является нулевым или не является объектом в Internet Explorer 8
  • 0метод виджета не вызывается
  • 1Информация о подписчике класса «SynchronousHelper» не совпадает с информацией о подписчике других классов в том же пакете
  • 1Лучший способ создать этот класс Locus
  • 1Параметр Deep Link IO ветви не появляется в реагировать родной
  • 0Отображение Dialong с эффектами в зависимости от выбора меню — jQuery UI
  • 0Переход на другую страницу (через HTML5, CSS3 и JS) в iPad по Swipe (с анимацией слайдов)
  • 0JQuery Как процитировать динамическую строку

0 Пользователей и 1 Гость просматривают эту тему.

  • 12 Ответов
  • 6891 Просмотров

Нужно найти незакрытый div. А возможно удалить «остатки модуля» на сайте jack-auto.ru — справа вверху (он задевает шапку и обрезает текст в основной части страницы).
То есть необходимо найти в тексте index.php шаблона часть, отвечающую за этот модуль.
Посодействуйте, ЗНАЮЩИЕ  :(

http://my-files.ru/tmzg.index.php

« Последнее редактирование: 14.06.2013, 16:39:16 от Jack-NN »

Записан

Через FireBug посмотрите, либо я что то не понимаю, как должно выглядеть.
Вроде бы все открыто и закрыто.
Разве что футер у вас не читабелен. Белый фон, белый текст.

Записан

Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно

Через FireBug посмотрите, либо я что то не понимаю, как должно выглядеть.
Вроде бы все открыто и закрыто.
Разве что футер у вас не читабелен. Белый фон, белый текст.

Чтобы найти незакрытые дивы надо смотреть исходный код страницы, а не то что показывает FireBug .

Вставьте весь код страницы в Notepad++ — в нем по умолчанию настроена подсветка синтаксиса — и вы сразу найдете незакрытый div… но попробуйте для начала его закрыть и посмотрите результат — может его удаление не приведет ни к чему хорошему, а закрытие восстановит статус-кво… Пробуйте.
В Notepad++ незакрытый div будет черным текстом…

В Notepad++ незакрытый div будет черным текстом…

Разве ? Может если настроить дополнительно ? С настройками по умолчанию точно не будет черным показывать .

Разве ? Может если настроить дополнительно ? С настройками по умолчанию точно не будет черным показывать .

Все верно, там просто при клике на открытый тег показывает и закрытый — то есть либо методом клика на открытом находишь незакрытый, либо настройки меняешь.

Вопрос разрешился иначе. Изменением ширины wrapper в index.php шаблона на 100%  *DRINK*
Всем спасибо!
NotePad возьму себе на заметку!

Чтобы найти незакрытые дивы надо смотреть исходный код страницы, а не то что показывает FireBug .

не факт!
исходный код — это то, что получил и ПРЕОБРАЗОВАЛ браузер! Mozilla многое исправляет для без проблемного отображения и незакрытый div для нее как семечки, она его проглатывает, но как видно дальнейшее построение ломается, Mozilla просто считает — что это такая верстка, что так и было задумано.
так что только сам шаблон копошить надо!

Вопрос разрешился иначе. Изменением ширины wrapper в index.php шаблона на 100%  *DRINK*
Всем спасибо!
NotePad возьму себе на заметку!

значит и не было незакрытого дива? это вам кто такое направление поисков дал? )))) на фрилансах небось за 5 копеек кого нашли?))))

Незакрытый div там остался .
Исходный код это то, что приходит в браузер . А то, что показывает FireBug и другие инспектора кода уже построенная браузером страница .

значит и не было незакрытого дива? это вам кто такое направление поисков дал? )))) на фрилансах небось за 5 копеек кого нашли?))))

Здесь же и дали это направление поиска. Кто именно не помню. Через пару дней зашел и увидел, что двух моих созданных тем не стало вобще. Как будто и не было(( Как это так?

Тема: как определить незакрытые элементы в коде  (Прочитано 3949 раз)

0 Пользователей и 1 Гость просматривают эту тему.

fg0987

Как можно определить незакрытый элемент в исходном коде (ctrl+U)? Валидатор пишет, что перед </body> есть незакрытый тег (скорее всего это один <div>), но вот как его найти, кода очень много и вручную смотреть у меня не получается?


kiff

Проги разные есть — Dreamweaver, HTMLPad2010, WeBuilder 


Igoritaly

У меня тоже самое, не ставится новая тема для smf из официального репозитория, в исх коде красный </body> перед </html>.

Обнаружен конечный тег «body», но имеются незакрытые элементы.

Если чекнуть проверку XHTML — _http://validator.w3.org/check?uri=referer получаем следующее:

Validation Output: 1 Error
    Error
   Line 1392, Column 7: end tag for «div» omitted, but OMITTAG NO was specified
    </body></html>
    You may have neglected to close an element, or perhaps you meant to «self-close» an element, that is, ending it with «/>» instead of «>».
    Info
   Line 78, Column 2: start tag was here
       <div id=»main_b»>

Получается у меня не закрыт блок main_b? ::)


CoBa7

Я так делаю. Блокнот Notepad ++, нажимаем для поиска «Ctrl + F», в поле «Найти» вставить <div и нажать кнопку «Искать далее». Находим первый див. Теперь закрываем окно поиска и нажимаем кнопку F3, так мы будем переходить от одного дива к следующему. Тот, который не подсветится фиолетовым цветом — и есть искомый незакрытый тег.


Понравилась статья? Поделить с друзьями:
  • Как найти среднее моду чисел
  • Как найти старую песню с пластинок
  • Как составить договор образцы договоров
  • Как в лего ворлд найти оборотня
  • Как найти начальную высоту в физике