Работа с тегами

Часто HTML-файл с которым вы работаете, или HTML-подобный язык разметки, типа того, что встречается в Angular или VueJS, содержит много строк кода и в длину превышает 1000 строк. Очень легко допустить в разметке ошибку, например, забыть скобку тега или кавычку атрибута. Это две самые частые ошибки в вёрстке. Чтобы этого не произошло, опытные разработчики набирают теги следующим образом:

Иногда тег содержит атрибуты, т.е. дополнительные свойства, влияющие на отображение тега. Атрибут записывается в формате ключ="значение" и пишется в открывающем теге. Кавычки в этом случае набираются тоже парно. Вот так:

Вложенные теги сдвигаются на табуляцию (клавиша Tab) вперёд. Чаще однако, используют 2 или 4 пробела для сдвига вложенного тега вперёд. При этом оборачивающий тег называется «родителем», а вложенный «потомком». Часто среда разработки настроена так, что нажимаешь табуляцию, а печатаются два или четыре пробела. Вот так выглядит набор двух тегов родитель-потомок на практике:

Если теги идут непосредственно в тексте, как правило, в этом случае они отвечают за оформление, то нет необходимости что-то куда-то переносить. Ниже текст параграфа идёт одной длинной строкой, которую переносит среда разработки:

<div class="content">
	<p>До открытия убиквитин-зависимой <a href="#">системы деградации белков</a> считалось, что деградация белков в клетке происходит, главным образом, за счёт лизосом. <strong>Лизосомы</strong> — это мембранные органеллы с кислой внутренней средой, содержащей протеазы.</p>
</div>

Браузер не обращает внимания на символы переноса строки, пробелы и табуляции за пределами тега. Визуальное сохранение иерархии необходимо для того, чтобы исходник оставался читаемым для человека.

Посмотрите, как просто читается иерархия вложенных друг в друга списков:

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Товары</a>
		<ul>
			<li><a href="#">Вид товаров №1</a></li>
			<li><a href="#">Вид товаров №2</a></li>
			<li><a href="#">Вид товаров №3</a></li>
		</ul>
	</li>
	<li><a href="#">Услуги</a></li>
	<li><a href="#">О нас</a></li>
	<li><a href="#">Контакты</a></li>
</ul>