<html>
<head>
<title> </title>
</head>
<body>
<div>
<h1></h1>
<p></p>
</div>
<div.empty></.empty>
<ul>
<li.first></li.first>
<li></li>
<li></li>
</ul>
</body>
</html>
Ну, во-первых, и открывающий, и закрывающий тег имеют одинаковое название…
Чтобы задать класс, нужно написать class=“название_класса” внутри открывающего тега.
По поводу самого “дерева” сказать ничего не могу, потому что весь код не видно.
У вас весьма оригинальй стиль форматирования текста
<div.empty></.empty>
неверно, имеется в виду <div class="empty"></div>
. То же самое с li.first
.