Рассказываем, что такое «исходный код страницы в интернете», как его открыть и какие горячие клавиши браузера за это отвечают. Разберем зачем и кому нужно смотреть исходный код и как его редактировать.
Исходный код страницы — это вид страницы на языке кода. Он выглядит как список пронумерованных строк, где каждая содержит информацию о конкретном объекте на сайте. Код страницы состоит из трех элементов:
HTML — гипертекстовая разметка, которая отвечает за всю структуру страницы. С помощью нее делают текст, блоки, основные элементы сайта.
CSS — работает в связке с HTML через теги и отвечает за визуализацию: размер, стиль, шрифты, форму, фон.
JavaScript — логический язык программирования, который отвечает за более сложные элементы. Например, анимацию, аналитику или интерактив.
Как выглядит исходный код страницы сайта
Исходный код позволяет посмотреть, как написана страница сайта в интернете и какие элементы в ней «спрятаны» за внешней оболочкой. Чаще всего исходный код смотрят SEO-специалисты, чтобы узнать:
Как собран текст страницы и какие ссылки используются.
Какие метатеги и ключевые слова использованы.
Какое описание (description) и название (title) страницы.
Подключены ли страницы к «Яндекс.Метрике», Google Analytics, скрипты, счетчики, плагины, пиксели.
Еще исходный код часто смотрят дизайнеры, программисты и верстальщики. Им может пригодится эта информация, чтобы выяснить:
Отступы у кнопок, размеры блоков, цвета и используемые шрифты.
Как встроены изображения, графика и другие медиа.
Как использован JavaScript, какие атрибуты кода применены, есть ли баги.
Читайте также:
76 ссылок, которые помогут сделать концепцию дизайна эффективнее и быстрее
Исходный код можно смотреть не только для своего сайта, но и любого другого в интернете. Для этого достаточно открыть браузер, выбрать страницу и перевести ее в режим просмотра кода.
Код страницы можно посмотреть в двух режимах:
Исходный код — загружается версия страница в формате HTML-кода.
Инспектор — запускается консоль для просмотра и управления кода.
Два способа посмотреть код: в отдельной вкладке или через консоль
Чтобы посмотреть исходный код страницы, используйте горячие клавиши в любом браузере:
Ctrl+U — посмотреть код в новой вкладе на Windows.
Ctrl+Shift+C — открыть инспектор кода на Windows.
cmd+U — открыть исходный код на MacOS.
alt+cmd+U — открыть инспектор кода на MacOS.
Если по каким-то причинам не открывается, то воспользуйтесь инструкцией для каждого браузера далее.
Нажмите правой кнопкой мыши на странице и выберите:
Посмотреть код страницы. Код откроется в отдельной вкладке.
Посмотреть код. Откроется инспектор для просмотра кода в текущей вкладке.
Как посмотреть исходный код страницы в Chrome
Чтобы пункт «Посмотреть исходный код» появился, сначала потребуется включить опцию его просмотра:
Откройте настройки браузера в меню Safari.
Перейдите во вкладку «Дополнение».
Поставьте галочку на пункте «Показывать меню „Разработка“ в строке меню».
Как включить просмотр кода в браузере Safari
После этого открываете страницу в интернете, щелкаете правой кнопкой мыши и выбираете:
Показать программный код страницы. Открыть код страницы в новой вкладке.
Проверить объект. Включить инспектора.
Как посмотреть исходный код страницы в Safari
Откройте страницу и кликните правой мышкой по любой области на экране. Выберите:
Исходный текст страницы. Код откроется отдельной вкладкой.
Просмотреть код элемента. Запустить инспектора.
Как посмотреть исходный код страницы в Opera
Откройте страницу и кликните правой мышкой. Выберите:
Исходный код страницы. Посмотреть код в новой вкладке.
Использовать свойства поддержки доступности. Это специальная технология, которая поможет другим программам читать страницы для людей с ограниченными возможностями.
Исследовать. Включает доступ к инспектору для просмотра кода страницы.
Как посмотреть исходный код страницы в Mozilla Firefox
Откройте страницу и нажмите правой кнопкой мыши по любой области. В меню доступно:
Просмотреть исходный код. Открыть код страницы в отдельной вкладке браузера.
Проверить. Включить инспектора на странице.
Как посмотреть исходный код страницы в Microsoft Edge
Откройте страницу и нажмите правой клавишей мыши:
Просмотреть код страницы. Открыть код в новой вкладке.
Исследовать элемент. Запустить инспектор кода.
Как посмотреть исходный код страницы в «Яндекс.Браузере»
На телефоне инспектор недоступен, но можно открыть исходный код с помощью строки «view-source:url-сайта». Например, вот так можно посмотреть страницу Workspace — «view-source:workspace.ru».
Как посмотреть исходный код страницы на телефоне
<Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
12254 тендера
проведено за восемь лет работы нашего сайта.
Вы можете редактировать сайт и изучать его структуру.
Через инспектор можно менять код страницы внутри своего браузера — это никак не влияет на сам сайт: после перезагрузки сайт вернется в исходное положение. Редактирование страницы может пригодится, чтобы:
менять блоки и их содержимое для проверки их отображения или тестирования;
делать скриншоты для себя или в качестве технических заданий для копирайтеров, программистов или дизайнеров.
Как отредактировать код на сайте:
В режиме инспектора нажмите на курсор около вкладки «Элементы» (Elements).
Выберите курсором интересующий элемент сайта: блок, текст, картинку, заголовок.
Как посмотреть исходный код элемента страницы
В итоге над элементом появится информация о примененных CSS-стилях, а во вкладке «Элементы» (Elements) — конкретная строка в HTML-коде. Ее можно редактировать. Например, изменить текст — в нашем примере это строка h1.
Как найти элемента сайта в его исходном коде
Кликаем два раза и в окне «Элементы» (Elements) пишем что угодно. Изменение сразу отобразится на сайте.
Как изменить элемент сайта с помощью инспектора
Также можно менять CSS-стили. Например, изменить размер отображаемой картинки. Выберите элемент сайта и в разделе Стили (Styles) пролистайте в самый низ, где предлагают изменить размер изображения. Введите новые значения и сохраните.
Как изменить CSS-стиль через исходный код
Читайте также:
10 лучших бесплатных платформ для создания сайтов для писателей
Вы можете проверить заголовки, тайтл и дескрипшн любой страницы. Для этого откройте режим просмотра кода в новой вкладке и через поиск (Ctrl+F) ищите следующие строки:
title — название страницы,
description — описание страницы,
h1-h6 — заголовки,
alt — теги для изображений.
Как посмотреть тайтл и дескрипшн через исходный код
Эти данные отвечают за продвижение статей через поисковики. Тайтл и дескрипшн отображается в заголовке и сниппете карточки в поисковике, а h1-h2 отвечают за логику всего документа, что тоже влияет на выдачу. Alt — описывают содержимое картинок, что пригодится для соответствующего поиска.
Параметры страницы, который можно найти в ее исходном коде
Подробнее о SEO-продвижении и способах улучшить свои позиции в поисковиках читайте в статьях:
«Внутренняя оптимизация сайта: все, что нужно знать о техническом SEO»
«Как оптимизировать картинки для SEO-продвижения и привлечь дополнительный трафик»
«Как сделать расширенные сниппеты в выдаче „Яндекса“ и Google»
Смотреть, читать и менять исходный код страницы может каждый пользователей браузера, но любые внесенные изменения работают только в браузере. Просмотр кода доступен для любого сайта — это не обязательно должен быть ваш ресурс. Например, посмотреть исходный код страницы конкурента, можно изучить, какие SEO-методы он использует для продвижения, как верстает страницы и какой код использует в работе.
Задачи на тендерной площадке Workspace в категории «SEO»
Даже если вы не разработчик, эта информация поможет составить грамотное техническое задание, которое можно разместить на нашем сайте Workspace и найти здесь исполнителя. Если же вы сами является специалистом, то Workspace поможет найти заказчика — регистрируйтесь, указывайте свои компетенции и находите новые проекты.
