a schematic or blueprint that is useful for helping programmers and designers think and communicate about the structure of the software or website as shown in the following picture.

Some designers draw it by hand, while others like to use apps or tools found online
Non-semantic elements: Tells nothing about its content. such as <div> and <span>
semantic elements: Clearly defines its content.
```