как проверить свой код html
Как проверить правильность (валидность) готового HTML-кода
Берём валидатор, подключаем хинтер и запасаемся терпением… Главное, не перепутать последовательность!
Если вдруг вы задавались вопросом: «Как проверить, правильный (валидный) ли у меня HTML-код?» — эта статья для вас. Разберёмся, зачем вообще нужен валидный код, на что он влияет и почему это важно.
Зачем нужна валидация кода
Правильный, валидный html-код — это код, написанный по спецификации W3C, в которой собраны стандарты и рекомендации по удобству и универсальности Всемирной сети.
При написании кода стоит придерживаться этих правил. Они в целом довольно похожи на правила обычного, привычного нам русского языка. Например, если вы не закроете тег (в русском языке — не закончите правильно абзац текста) — будет нарушена структура и смысловая составляющая. Проверка кода на валидность позволяет увидеть все подобные ошибки и исправить их.
Но конечно, дело не только в структуре. Ваш код могут смотреть как другие разработчики, так и браузер, а также поисковые машины. И чтобы страница быстрее загружалась, правильнее обрабатывалась, а поисковые машины верно понимали смысл всех тегов, важно писать валидный код.
Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик
Валидатор
Для того чтобы быстро, удобно и в автоматическом режиме проверять свой код, существует помощник — валидатор W3C. Он используется повсеместно (хотя есть и другие), так как придуман и написан консорциумом W3C — теми, кто создал и поддерживает стандарт языка.
Как им пользоваться? Давайте посмотрим на примере простого HTML-фрагмента.
Валидатор позволяет выбрать, в каком именно виде вы передадите ему информацию: по ссылке на сайт из интернета, загрузите файл или же просто скопируете и вставите код в специальное поле.
Если ваш сайт пока ещё не выложен на хостинг, оптимальным вариантом будет вставка кода. Если же уже на нём — выбирайте первый вариант, по ссылке.
Попробуем вставить некий код в поле для ввода.
Теперь, когда код вставлен, остается лишь нажать check. У валидатора есть ещё и другие настройки: выбор версии языка HTML (за который и так отвечает DOCTYPE), а также группировка ошибок по типу.
Что именно проверяет валидатор?
Валидатор оценивает синтаксическую составляющую кода: смотрит на пропущенные или ошибочные теги, проверяет, верно ли вы закрыли тот или иной блок кода.
Результаты, выданные валидатором, делятся на две категории: предупреждения и ошибки. В нашем варианте кода как раз есть и те и другие.
Предупреждения — это какие-то незначительные неточности в коде, которые не сломают сайт, но не соответствуют стандартам кода.
Ошибки — более серьёзные проблемы, которые могут повлиять на работу кода в целом. Это могут быть как грубые ошибки — например, неверная вставка тега в тег, неверное закрытие тега и т.д., так и менее значимые — отсутствие атрибута alt, незаполненный тег title.
Рекомендация: просто исправлять всё, что там есть, чтобы осталось лишь заветное зелёное уведомление о том, что всё правильно. Правильность кода — залог его корректной и долговечной работы, а также плюс при работе в команде с другими верстальщиками\backend-разработчиками.
Как ещё можно проверять верстку
Помимо классического валидатора есть ещё один тип инструментов — так называемые хинтеры. Как правило, это плагины для редакторов кода, которые при написании кода автоматически подчеркивают ошибки и указывают, что нужно исправить. Один из таких плагинов — HTMLHint для редактора VS Code.
Хинтер работает по определённым правилам, которые довольно схожи с правилами валидатора. Но в идеале стоит проверять верстку как хинтером, так и валидатором, чтобы точно всё исправить.
Со списком правил хинтера можно ознакомиться по ссылке.
Правильный HTML-код крайне важен. Стандарты языка придуманы не просто так. Даже если ошибка кажется несущественной, она может повлиять на логическую сторону кода (например, отсутствие alt — описания изображения).
Всегда проверяйте свой код, обращайте внимание на частые ошибки, чтобы в будущем их не совершать. Научиться профессионально создавать сайты и писать валидный html можно на курсе по веб-вёрстке.
Как научиться читать код сайта и зачем это нужно, если вы не программист
Часто возникают ситуации, когда необходимо проанализировать содержимое веб-страницы: посмотреть description, узнать размер какого-то элемента или просто выяснить, какой используется шрифт. С помощью опции «Просмотреть код» можно узнать не только это, но и многое другое – практически всю подноготную сайта.
Для каких целей нужен навык чтения кода и как в несколько кликов посмотреть содержимое сайта? Об этом и многом другом поговорим в сегодняшней статье.
Зачем мне нужен исходный код сайта?
Думаете, если вы не программист или верстальщик, то код вам вряд ли понадобится? На самом деле, он может помочь в разных ситуациях. Код может быть полезен:
Еще несколько возможностей при просмотре кода страницы: выгрузка картинок с исходным размером, просмотр сайта в адаптивном режиме, возможность изменять содержимое веб-страницы. Последнее работает в локальном режиме – изменения будут применены только на текущем ПК до тех пор, пока страница не будет обновлена.
Как узнать код сайта
Прежде чем переходить к просмотру кода сайта, давайте сначала разберемся, что же включает в себя код любого веб-ресурса. Как правило, это список пронумерованных строк с информацией о том или ином элементе сайта. Если открыть код главной страницы Timeweb, то мы увидим, что в четвертой строке установлен заголовок документа:
Как видите, здесь все логично и понятно.
Подробнее о том, что представляет собой код сайта, мы поговорим в следующем разделе, а пока давайте рассмотрим основные способы его просмотра.
Способ 1: Функция «Посмотреть код»
Открываем страницу, код которой нужно просмотреть, и кликаем по любой области правой кнопкой мыши. В отобразившемся меню выбираем «Посмотреть код». Также вы можете воспользоваться комбинацией клавиш «CTRL+SHIFT+I».
В результате мы попадаем в инспектор браузера – на экране появляется дополнительное окно, где сверху находится код страницы, а снизу – CSS-стили.
Обратите внимание на то, что запуск инструмента разработчика выполнялся в Google Chrome. В другом браузере название кнопки запуска может отличаться.
Способ 2: «Просмотр кода страницы»
Если в предыдущем случае мы могли открыть всю подноготную сайта, то сейчас нам будет доступен лишь HTML-код. Чтобы его посмотреть, находим на сайте пустое поле и кликаем по нему правой кнопкой мыши, затем выбираем «Просмотр кода страницы» (можно воспользоваться комбинацией клавиш «CTRL+U»). Если вы кликните правой кнопкой по элементу сайта, то кнопка «Просмотр кода страницы» будет отсутствовать.
После этого нас перенаправит на новую страницу со всем исходным кодом:
Здесь мы также можем посмотреть все содержимое страницы, однако узнать CSS и изменить данные у нас не получится.
Что такое HTML и CSS
Например, часто используется такая конструкция:
Это мой первый сайт!
Подобных тегов более сотни, для их изучения рекомендую обратиться к справочнику.
CSS – это помощник HTML, который позволяет преображать страницу как угодно: можно настраивать цвета элементов, изменять их положение, размер и форму, добавлять адаптивность и многое другое. Подключение CSS выполняется непосредственно в HTML-файле с помощью специального тега.
Рассмотрим на небольшом примере, как работают стили:
Каждый сайт, который вы встречаете, использует связку HTML и CSS. Стоит упомянуть, что еще есть язык программирования JavaScript, который позволяет оживлять страницу. Например, он может активировать формы обратной связи, создать сложную анимацию, установить всплывающие окна и многое другое. Обычным пользователям разбираться в нем не нужно от слова совсем. Если вы собираетесь вести аналитику сайта или просто интересуетесь его содержимым, то в знаниях JavaScript нет никакой необходимости.
Как я могу использовать код
Выше мы рассмотрели лишь основные моменты, связанные с кодом сайта – научились просматривать его и узнали, что такое HTML и CSS. Теперь давайте применим полученные знания на практике – посмотрим, как всем этим пользоваться.
Вариант 1: Редактирование контента
Как мы уже говорили ранее, можно поменять контент страницы внутри своего браузера. Изменения будем видеть лишь мы, но это дает нам возможность посмотреть альтернативный вариант размещения элементов.
Например, доступна возможность изменять содержимое текста – для этого достаточно выбрать нужный текст, кликнуть по нему правой кнопкой мыши и перейти в «Посмотреть код». После этого перед нами отобразится инспектор с выделенным текстом.
В среде разработчика мы можем заменить текст, расположенный в данном теге. Чтобы это сделать, находим его в коде, кликаем по нему двойным щелчком мыши и заменяем на другой. Ниже пример: мы поменяли «Виртуальный хостинг» на «Классное решение».
Чтобы отменить внесенные изменения, достаточно воспользоваться клавишей «F5» – страница будет обновлена, а весь контент станет исходным.
Аналогичным образом мы можем поменять CSS-стили через нижнее окно, но для этого потребуются некоторые знания. Подробную информацию рекомендую посмотреть в CSS-справочнике.
Вариант 2: Скачивание картинок
Сейчас мы можем напрямую загружать картинки с сайта, но по некоторым причинам это получается далеко не всегда. В таких случаях остается только один способ – выгрузить картинку через код. Сделать это довольно просто:
Аналогичным образом мы можем выгрузить и фоновое изображение, но его стоит искать через CSS-стили в атрибуте background.
Вариант 3: Просмотр SEO-элементов
С помощью кода можно посмотреть основные SEO-теги. Сделать это можно следующим образом:
Подобные элементы можно посмотреть и через инспектор кода.
Как посмотреть исходный код на телефоне
Функционал мобильных браузеров сильно ограничен – посмотреть код сайт через инспектор мы не можем. Доступен только вариант с отображением всего HTML-кода страницы. Чтобы им воспользоваться, необходимо перед ссылкой прописать «view-source:». Например, для https://timeweb.com/ru это будет выглядеть так:
Если нужны расширенные возможности для устройства на Android, то можно поискать специальные приложения, например, VT View Source.
Заключение
ТОП 5 онлайн-валидаторов кода: HTML, CSS, XML, W3C
Валидатор — это онлайн-парсер, который сканирует веб-код страницы и проверяет на синтаксические, стилистические и другие ошибки, а также анализирует соответствие кода современным веб-стандартам (например, W3C). Часто, именно ошибки в коде приводят к разным проблемам сайтов, связанными с поисковой оптимизацией (ПС не могут просканировать и проиндексировать сайт), отображением в браузерах на разных устройствах. В данной статье я подобрал для вас наиболее удобные и эффективные онлайн валидаторы кода, которыми пользуюсь сам.
W3C HTML Validator
W3C — это Всемирный Консорциум Веб-паутины, определяет стандарты для всех веб-сайтов и веб-приложений. С помощью онлайн-валидаторов W3C можно проверить веб-код на ошибки.
Инструмент поможет:
Форк этого валидатора размещен в сервисах Site24x7. Кому интересно, может попробовать.
W3C CSS Validator
Бесплатный сервис проверки CSS-кода от W3C. Может проверить страницу по указанному URL, загруженному файлу или набранному коду. Поддерживает все версии CSS.
W3C RSS Validator
Бесплатный сервис для проверки синтаксиса RSS/ATOM ленты от W3C.
FIND-XSS.NET
Онлайн-сервис с базовым набором инструментов для проверки веб-страниц. Имеет достаточно простой и понятный в использовании интерфейс. Прекрасно подойдет для всех, кому в W3C валидаторах сложно разобраться.
Dr.Watson Validator
Неплохой, простенький инструмент, который помимо проверки синтаксиса HTML, дает еще такую информацию как: код ответа страницы, проверка количества слов в тексте, анализ ссылок, проверка совместимости с поисковыми системами и так далее.
XML Schema Validator
Сервис проверяет XML документы, а также XHTML.
Code Beauty Java Script Validator
Простой онлайн-валидатор Java Script, который позволит быстро проверить код на ошибки, указав URL, вставив в форму или с помощью загрузки файлом.
PHPLint Online
Онлайн-валидатор PHP кода от итальянского веб-разработчика Умберто Сальси. Умеет проверять PHP-код (5.6, 7.4), так и различные php-модули. Содержит много интересных для применения настроек.
Знаете другие инструменты, которые не попали в данный список? Пожалуйста, напишите в комментариях!
Как просмотреть исходный HTML код веб-страницы
Все интернет-браузеры позволяют посетителям просматривать исходный HTML-код любой веб-страницы, которые они посещают. В этой статье вы найдете информацию о различных способах просмотра исходного кода веб-страницы в основных браузерах.
Ограничение на просмотр исходного кода.
При просмотре исходного кода веб-страницы следует понимать, что информация и код, которые обрабатываются самим сервером, не будут отображаться.
Например, сайт на WordPress вначале формирует страницу на сервере с помощью языка программирования PHP, а затем отправляет сформированную страницу посетителю сайта. Другими словами, вы можете просматривать код готовой веб-страницы, но не сможете просмотреть исходный код PHP.
Это правило применяется ко всем серверным скриптам, SSI и программному коду. Следовательно, вы не можете просматривать исходный код скриптов, используемый в поисковых системах, форумах, опросах, чатах и так далее.
Но HTML код, код файлов CSS, а также код JavaScript, вы просмотреть сможете, причем, прямо в браузере.
Просмотр исходного кода в Google Chrome
Чтобы просмотреть исходный код веб-страницы в Google Chrome, выполните следующие действия.
Нажмите Ctrl + U на клавиатуре вашего компьютера.
Щелкните правой кнопкой мыши пустую часть веб-страницы и выберите «Просмотр кода страницы» во всплывающем меню.
И тогда откроется новая вкладка, в которой вы сможете увидеть HTML код страницы.
Вы также можете просмотреть код элементов. Для этого, нажмите Ctrl+Shift+I, или воспользуйтесь контекстным меню. В результате, вам откроется окно, в котором вы сможете увидеть код каждого отдельного элемента на веб-странице, включая отвечающий за него элемент в файле стилей CSS.
Просмотр кода страницы в Яндекс Браузере.
В этом браузере все похоже. Открываете нужную страницу, и нажимаете либо клавиши Ctrl + U, либо кликаете правой клавишей мыши, и выбираете пункт меню – Просмотреть код страницы
Просмотр HTML кода в Mozilla Firefox
Чтобы просмотреть исходный код веб-страницы в Mozilla Firefox, выполните следующие действия.
Нажмите Ctrl + U на клавиатуре вашего компьютера.
Щелкните правой кнопкой мыши пустую часть веб-страницы и выберите «Исходный код страницы» во всплывающем меню.
Откройте Mozilla Firefox и перейдите на нужную веб-страницу.
Нажмите клавишу Alt, чтобы открыть строку меню браузера.
Выберите Инструменты, Веб-разработка, а затем Исходный код страницы.
Для просмотра кода элементов на страницы, нажмите клавиши F12 или Ctrl + Shift + I. В этом случае, вы сможете просмотреть код выбранного вами элемента на сайте.
Просмотр в Microsoft Edge
Чтобы просмотреть исходный код веб-страницы в Microsoft Edge, выполните следующие действия.
Нажмите Ctrl + U или F12 на клавиатуре вашего компьютера.
Щелкните правой кнопкой мыши пустую часть веб-страницы и выберите «Просмотр исходного кода» во всплывающем меню.
Для просмотра кода элемента, в этом же меню кликните на Проверить.
Откройте Microsoft Edge и перейдите на нужную веб-страницу.
Щелкните значок с тремя точками в правом верхнем углу экрана.
В появившемся раскрывающемся меню выберите Другие инструменты.
Теперь выберите Средства разработки.
Просмотр кода HTML с телефона на Андроид в браузере Гугл Хром.
Откройте браузер Google Chrome на своем телефоне Android.
Откройте веб-страницу, исходный код которой вы хотите просмотреть.
Под строкой с адресом, нажмите на значок редактирования.
Переместите курсор в самое начало URL-адреса.
Введите view-source: и нажмите Enter или Go.
Заключение.
Как видите, просмотреть исходный HTML код страницы, совсем не сложно. В других браузерах, просмотр кода страницы делается подобным же образом.
Следует помнить, что исходный код может быть очень сложным (и чем сложнее просматриваемый веб-сайт, тем более сложным может быть код этого сайта). В дополнение к структуре HTML, из которой состоит страница, вы также можете просмотреть файлы CSS (каскадные таблицы стилей), которые определяют внешний вид этого сайта. Кроме того, многие веб-сайты могут включать различные файлы сценариев, которые выполняются на стороне пользователя.
Вероятно, будет включено несколько файлов сценариев. Фактически, каждый из них служит для своих особенностей. Одни сценарии, нужны для красивого размещения форм на странице, другие сценарии нужны для показа рекламы. Честно говоря, исходный код сайта может показаться огромным и сложным, особенно если вы новичок в этом.
Не расстраивайтесь, если вы не можете сразу понять, как работает этот сайт. Просмотр исходного кода HTML — это только первый шаг в этом процессе. Наращивая свой опыт, с каждым разом вы сможете все лучше понимать этот код, и переносить интересные фишки на свой сайт. И в конечном итоге, весь этот исходный код, перестанет для вас быть таким сложным и непонятным.
Ну а если у вас остались вопросы, то задавайте их в разделе с комментариями.
HackWare.ru
Этичный хакинг и тестирование на проникновение, информационная безопасность
Статический анализ исходного кода веб-сайта в браузере
Этот пост предназначен преимущественно для начинающих охотников участвующих в bug bounty (поиск ошибок и уязвимостей за вознаграждение) без или с небольшим опытом в анализе HTML и JavaScript кода, но я надеюсь, что более опытные хакеры также найдут что-то интересное 🙂
Идея этого поста родилась в моей голове когда один из моих недавних твитов с совсем простой подсказкой собрал много внимания в сообществе:
Если вы открыли url в браузере и ничего не увидели кроме пустой страницы, не надо думать, что там ничего нет. ВСЕГДА проверяйте исходный код. Там может быть пучок JavaScript или к примеру закомментированный исходный код от сервера:
Поскольку эта простая подсказка на самом деле является верхушкой айсберга, вместо размещения подобных подсказок в Twitter, где их легко потерять, я решил собрать парочку из них в одном посте. Я надеюсь, некоторые из вас найдут их полезными.
Итак, давайте тогда начнём!
Набор инструментов
Любой современный веб-браузер сегодня имеет набор встроенных инструментов разработчика. Для их включения вы можете использовать Ctrl+Shift+I, CMD+Option+I (macOS), кнопку F12 или просто найдите нужную опцию в меню браузера — это зависит от операционной системы и браузера, которые вы используете. Хотя в этом посте я буду использовать последнюю версию Chromium, нет больших различий (кроме пользовательского интерфейса) если вы используете Firefox, Safari, Chrome или Edge. Это ваш выбор, но я нашёл Chrome Developer Tools самыми функциональными (Chrome Developer Tools или просто DevTools доступны в Chrome, Chromium, Brave, Opera или в любом другом основанном на Chromium браузере). Инструменты разработчика доступны по умолчанию, то есть их не нужноу станавливать отдельно. Если у вас есть веб-браузер — значит у вас уже есть Инструменты разработчика.
Другой инструмент, который неплохо было иметь установленным, это IDE (интегрированная среда разработки) или любой редактор кода с подсветкой синтаксиса HTML и JavaScript. Всё зависит от ваших предпочтений, вы можете выбрать Visual Studio Code. VSCode доступна для основных операционных систем по адресу: https://code.visualstudio.com/. Полностью бесплатная, с открытым исходным кодом IDE — это NetBeans, поддерживает несколько языков программирования, в том числе подсветку синтаксиса HTML и JavaScript. Адрес для скачивания NetBeans: https://netbeans.org/
Также неплохо бы установить NodeJS (и ознакомиться с её работой — для этого буквально тысячи отличных источников в Интернете). Адрес: https://nodejs.org/en/download/package-manager/
Интерпретатор Python это следующая обязательная для меня вещь (если вы используете операционную систему на основе *NIX, то вероятно у вас он уже установлен. Если вы пользователь Windows, то вам нужно самостоятельно установить Python). Возможность программировать на Python бесценна, и я рекомендую каждому попробовать это даже если вы никогда не написали ни одной строчки кода на любом языке программирования.
NodeJS очень полезен для запуска и тестирования кода JavaScript в терминале (этого же самого вы можете достигнуть используя браузер, но мы вернёмся к этому позже и обсудим некоторые плюсы и минусы). Python полезен для создания ваших собственных скриптов, таких как инструменты, быстрые рабочие концепты (Proof of Concept) и настоящие эксплойты — я также позже в этой статье презентую некоторые из моих собственных инструментов. Если вы лучше знакомы с другим интерпретируемым языком (Ruby, PHP, Perl, Bash и так далее), вы также можете использовать их по своему желанию. Главное преимущество таких языков в том, что скрипт может быть запущен без компиляции, прямо из командной строки, они на 100% портативны между различными платформами и имеют множество функций, встроенных в тысячи библиотек или модулей, доступных по всему вебу.
Окей, наконец-то пришло время взяться за работу.
Исследование исходного кода HTML
Давайте не на долго вернёмся к моему твиту, которы я процитировал ранее. Как вы можете заметить, скриншот демонстрирует веб-сайт, который выглядит как будто на нём нет контента, только белая, пустая страница.
Но если вы взгляните на исходный код (используя CTRL+U или CMD+Option+U на macOS) вы можете увидеть изобилие кода (к сожалению, я не могу дать url сайта со скриншота, поскольку он взят с приватной программы bug bounty (награждение за найденные уязвимости). Почему эти элементы не могут быть видны в браузере?