Как найти незакрытый тег html

Как найти незакрытый тег html

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.3k31 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 😀

Happy programming

-skycoder

answered Feb 24, 2015 at 5:26

TheCodingKlam's user avatar

0

Источник

МАСТЕР

Мудрец

(15697)


7 лет назад

Самый удобный способ – это подсветка конечного тега (к примеру, в notepad++) и написание кода с отступами. Тогда легко найти незакрытый тег или тег с ошибкой.

И даже если это не ваш код и отступов нет, тогда сделайте их. И вы натолкнетесь на ошибку. Видите на скрине, не только подсветка тегов, но и соединение линией. Еще в notepad++ (да и в других) есть возможность скрыть какой либо блок

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

Fender SkopУченик (201)

7 лет назад

Дельные советы, блин, а я все думаю, чего это у меня весь текст то черный… Все правил в .txt. Спасибо.

Alex

Гуру

(3826)


7 лет назад

Видимо хреново учился,
например курсы от Специалиста…, там советуют проверять парные теги подсветкой, чтоб в дальнейшем не искать..

Источник

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

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

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, так мы будем переходить от одного дива к следующему. Тот, который не подсветится фиолетовым цветом – и есть искомый незакрытый тег.

Источник

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Нет Access-Control-Allow-Origin с использованием настройки OneSignal
  • 0Установка высоты абсолютно позиционированного элемента div по высоте его содержимого
  • 1График зависимостей. Параллельная обработка
  • 1Как сделать запрос к инвертированному индексу с нефиксированным количеством ключевых слов?
  • 1получить размер InputStream в Java
  • 0проверка во время компиляции с помощью const char * (nullptr)
  • 1Как удалить элемент управления Textbox, созданный динамически в WPF Grid?
  • 1Java сравнение данных массива независимо от размера или порядка
  • 0Вывод вектора списков в C ++
  • 1Как открыть разговор в WhatsApp на определенный номер с намерением
  • 1Как установить значения пользовательского элемента управления из класса
  • 1Нужно ли Promise.promisifyAll () в каждом файле модуля?
  • 0Как написать тестовый модуль для сервиса, который возвращает обещание
  • 0Структура индекса для вторичного поиска по ключевым словам
  • 0Угловой JS передает массив строк в директиву
  • 1Возникает какая-то ошибка при использовании jplist JS
  • 0AngularJS: тестирование фабрики, которая возвращает обещание, в то же время высмеивая сервис, который использует $ http
  • 0MySQL: возможно ли ПОЛУЧИТЬ ПОЛЕ в ОБНОВЛЕНИИ?
  • 0заставить код jquery работать для динамически добавляемого контента
  • 0Как создать функцию обновления на nodejs / mongodb?
  • 0new-выражение и delete-выражение для константной ссылки и константного указателя
  • 1Клавиатура Android не отображается при нажатии поля ввода в единстве?
  • 1Использует ли эта реализация сортировки слиянием взаимную рекурсию?
  • 1Visual Studio Code Sencha Ext JS Расширение Проблема
  • 0Почему статическая переменная класса не может быть размещена в стеке?
  • 1Тестирование toString, но это не удается?
  • 0Что означает typedef cell (* proc_type) (const std :: vector <cell> &); делать?
  • 0Приложение Angular показывает только скорректированный динамический контент после обновления
  • 1Насколько эффективна эта хеш-функция?
  • 1Полный список цветов Excel с xlsxwriter
  • 1Когда перезапускается viewpager, он продолжает выполнять предыдущий фрагмент
  • 0обработка параллелизма в cron php
  • 0Развертывание текстовых файлов в C ++
  • 0JQuery Растянутое отображение портретных фотографий
  • 0В пользовательском интерфейсе jQuery не работают вкладки пользовательского интерфейса jQuery (карта Google V3)
  • 0Поле Microsoft Access Number с буквами
  • 1Как получить доступ к веб-сервисам в клиентском приложении?
  • 0Использование веб-сервиса: от C # до php
  • 1как получить куки-файлы двух серверов 1. запускает приложение (HTTP), 2. запускает сервер websocket (WS)?
  • 1Как сопоставить результат с оператором return действия, возвращающего объект в Struts 2?
  • 1Разве этот код не должен сделать всю картинку черной?
  • 1Как преобразовать список из списка слов в виде строк?
  • 0Причудливая шкатулка с URL
  • 1Почему VisualTreeHelper.GetChildrenCount возвращает 0 элементов управления верхнего уровня?
  • 1Игра в понг в p5.js – фоновое изображение не загружается должным образом
  • 1Поместите карту Java в JSON
  • 1Нижний список подсписков основан на длине наименьшего подсписка
  • 0Диапазон значений HSV для выборки изображения, как сделано Adobe
  • 3Как проверить пользовательскую функцию потерь в керасе?
  • 0Вызов функции шаблона через макрос для строкового параметра?
Источник

бесплатные легкие редакторы HTML … онлайн-сервисы проверки HTML, которые могут выделять незакрытые теги?

Используйте линтер-вну.

linter-vnu – это пакет для редактора Atom, который использует Nu Html Checker (v.Nu) для проверки документов HTML или XHTML.

Раскрытие информации: Я разработчик линтер-вну.

linter-vnu использует другой пакет Atom, linter, для интеграции v.Nu и Atom.

Например, если вы откроете следующий test.html файл в Atom:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8"/>
<title>Test HTML document</title>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</body>
</html>

(с заведомо пропущенным закрытием </div> тег)

то Atom (а точнее линтер-вну, спасибо линтеру и v.Nu) выдает следующие сообщения об ошибках:

  • Незакрытый элемент «div». в строке 8 столбец 1 в test.html
  • Конечный тег для «тела» виден, но есть незакрытые элементы. в строке 10 столбец 1 в test.html

и отмечает эти строки в редакторе красными точками.

Если щелкнуть «at …» (текст с гиперссылкой) в сообщении об ошибке, точка вставки редактора переместится в соответствующую строку, и под строкой появится всплывающее окно с текстом ошибки («Незакрытый элемент« div »». ).

Если вы сохраните свой HTML-документ с расширением файла .xhtml, и откройте его в Atom, затем v.Nu проверит ваш документ как XHTML (XML), а не как HTML, с немного другими сообщениями. В этом случае всего одно сообщение об ошибке:

  • обязательный символ (найдено «b») (ожидается «d») в строке 10 столбец 3

где строка 10 содержит закрывающую </body> тег. v.Nu ожидал </div> тег вместо этого; он был доволен </ – ожидался закрывающий тег – но ожидалось, что имя элемента будет начинаться с «d» для «div», а не «b» для «тела».

По состоянию на ноябрь 2016 г. я делаю следующие претензии:

  • v.Nu – лучший вариант для проверки (X) HTML (5).
  • linter-vnu – лучший вариант для интерактивного использования v.Nu в редакторе. сам линтер-вну тривиален; это всего лишь несколько строк «связующего» кода. Что делает его лучшим вариантом, так это редактор Atom и пакет Atom linter.

Я приветствую встречные претензии и вопросы по этим претензиям. Я был бы счастлив, если бы мне показали, что я ошибаюсь, и мне покажут что-нибудь получше. Особенно если, как v.Nu и linter-vnu, бесплатно.

Источник

Добавить комментарий