Не всегда понятно какое место занимает тот или иной html-элемент в структуре html-документа. Данный outline-prototype, подключенный к странице, визуально отображает разные блоки.

Основыне блоки header, main, footer подсвечиваються широкой красной линией.

Блоки nav, section, article, aside подсвечиваються средней оранжевой линией.

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

1. 1й вариант с метками - outline-prototype-label.css - для базовой разметки, когда нет псевдоэлементов ::before и ::after, и нет абсолютно позиционируемых элементов. Выводит подписи основных блоков.

Внимание! Готовый макет или сайт может ломать, используйте осторожно.

2. 2й вариант безопасный - outline-prototype-safe.css - подойдёт для финальной разметки макетов, и для инспектирования блоков на готовом сайте. Ничего не ломает.

1. Можно скачать нужный вариант outline-prototype, поместить в свой проект и подключить.
2. Можно использовать CDN и подключить стили. Для этого скопируй ссылку с нужным вариантом, и подключи в своём html

• Вариант с метками outline-prototype-label.css
• Безопасный вариант outline-prototype-safe.css

3. Можно использовать CDN и подключить скрипт. Для этого скопируй ссылку и подключи в своём html outline-control.js
4. Можно применить для любого сайта, написав в консоли браузера команду

• панель переключения стилей s=document.createElement('script');s.src='https://rawcdn.githack.com/ArtMan-8/outline-prototype/9735cb1ad2dc8b759c76c94fc92f4be68d66798d/js/outline-control.js';document.body.appendChild(s);
• вариант с метками s=document.createElement('link');s.rel='stylesheet';s.href='https://rawcdn.githack.com/ArtMan-8/outline-prototype/7d7765cd572bdec952ca61280d70dd9f1781c153/css/outline-prototype-label.css';document.body.appendChild(s);
• безопасный вариант s=document.createElement('link');s.rel='stylesheet';s.href='https://rawcdn.githack.com/ArtMan-8/outline-prototype/7d7765cd572bdec952ca61280d70dd9f1781c153/css/outline-prototype-safe.css';document.body.appendChild(s);