An example HTML ‘tree’ structure
The image above represents the HTML elements present in this web page. Some of these elements directly contain content you can perceive such as the embedded image above and the text in this paragraph. Others provide the foundations essential for any web page: for example, the invisible head element contains the visible title element — which appears at the top of your browser window. Other discretionary div elements have been used to provide non-semantic structural ‘parents’ for associated elements: for example, this paragraph, the following one, and the image and page heading above are nested inside a div element called ‘content’.
Also in the invisible head element is a style element which contains all the stylesheet rules for presenting the content of this page. The styling rules are not visible themselves but their effects are. For maximum reusability, stylesheets are normally defined in a separate document which can be linked to as many HTML pages as appropriate.