A possible analogy for describing HTML, CSS and DOM is the manufacturing of a sports car. HTML is the very basis of our website. It lays down the basic structure or framework for our website's content such as text, images and videos. For our sports car, we'll say a Ferrari, our HTML will be the car's chassis, tyres, seats, windows and steering wheel. CSS is how we make our websites look great and appealing to the viewer. The visual possibilities of using CSS are endless and experimenting with it is something I enjoy doing in my free time. Looking back at our (fairly sad looking) Ferrari, we can use CSS to make it really look the part. I'm talking the classic Ferrari bright red exterior, large black carbon fibre wheels, genuine black leather interior, and custom lights and body kit. Everything is looking sharp but we are still missing something. The Document Object Model, or DOM for short, is what enables our content to be interpreted by our web browsers or, put more easily, make everything work. The DOM is our beautiful Ferrari's engine and electronics.
To fully understand the design structure of a website, we need to break down what we see to simplify the process. "Boxifying" a website is a great way for a developer to see all of the individual components of the website and how they work together. This is useful for a developer because it allows them to use similar techniques in their own design projects and websites.
All content on a website is stored within its own box. The box model consists of using CSS elements such as borders, padding and margins. Using these elements we can configure our websites to how we want them to look like.