<div>Second DIV
<p>Paragraph Two -
<a href="#">link C</a>
<a href="#">link D</a>
</p>
<p>Paragraph Three -
<a href="#">link E</a>
<a href="#">link F</a>
</p>
<p>Paragraph Four -
<a href="#">link G</a>
<a href="#">link H</a>
</p>
<div>Third DIV
<p>Paragraph Five -
<a href="#">link I</a>
<a href="#">link J</a>
</p>
<p>Paragraph Six -
<a href="#">link K</a>
<a href="#">link L</a>
</p>
<p>Paragraph Seven -
<a href="#">link M</a>
<a href="#">link N</a>
</p>
</div>
<p>Paragraph Eight -
<a href="#">link O</a>
<a href="#">link P</a>
</p>
</div>
<p>Paragraph Nine -
<a href="#">link Q</a>
<a href="#">link R</a>
</P>
</div>
图1 是html结构的文本对象模型树，图揭示了元素之间真实结构的联系。
在图1里兄弟元素分布在较低的支线上，它们的源头分布在图表从左到右顺序上。每组兄弟元素是它们所在支线会合顶点单一元素的子元素。如Paragraph One, Second DIV, and Paragraph Nine都是兄弟，而且都是First DIV的子元素。
图2使用清楚的样式显示它们怎么展示，First DIV的结构有Paragraph One, Second DIV, and Paragraph Nine组成。Second DIV有三个以上段落和拥有三个以上段落的Third DIV。所有段落的颜色是白色，每个包含两个链接元素。所有DIV黑色边框轻度褐色。
