HTML, CSS & the DOM
This week, I have spent some time learning about HTML, CSS and the DOM and have been charged with the task of coming up with my own unique analogies to describe what exactly it is they all do.
What is the DOM?
Here are the ingredients required to make a delicious spaghetti bolognese; these represent the HTML elements required to build a great web-page.
You could choose to serve up all the ingredients just as they are, or you could apply a little bit of CSS by cooking and seasoning the ingredients. HTML provides content and defines what the web-page will be about. CSS adds style and structure to the HTML elements and makes the overall web-page easier and more enjoyable to read.
In this analogy, the Document Object Model (DOM) is a written down recipe of the HTML ingredients currently being displayed on the screen. Because HTML content is often automatically generated as the page runs, the recipe in the DOM may not match the original recipe used to build the page. The HTML recipe within the DOM can be directly altered and adjusted, and any changes made will be applied directly to the screen. But because the changes are only being made to the DOM and not to the original recipe, the next time the page has to reload, it will refer back to the original recipe and all changes will be gone.
When displaying HTML, the DOM considers all individual pieces of code as separate nodes. All nodes are displayed by the DOM as a hierarchical family-tree-like structure. Uh oh, I feel another analogy coming on.....
Instead of HTML code, let's imagine we are converting your favourite novel into a DOM family-tree. In this scenario, the book itself would be the first node and would sit right at the top of the tree. Then, the direct children of the book node would be all the chapter nodes who sit one branch lower than the book node. The chapters would then be parents to the paragraphs, who would be parents to the sentances, who would be parents to the words, who eventually, would be parents to the individual letters from which the book was written. The letter nodes would sit right at the bottom of the DOM family-tree, as these are the lowest child elements in the book.
Now time for some serious non-analogies to briefly explain the difference between 'boxifying' and the 'box-model'.
Boxifying Design
Boxifying is the art of logically breaking down a web-page design into a series of individual boxes, thereby making it easier to understand.
The Box Model
The Box Model consists of margins, borders, padding and content, which together make up every HTML element on the page. Each of these aspects can be adjusted to create different styles, effects and spacing.
To see some of the other cool ideas I got from taking a look around other websites' DOMs, please check out My CSS Design Wishlist!
Cheers,
