HTML Document Flow and Element Display Methods
As you familiarize yourself with the many HTML elements, you will surely notice the various ways in which your browser displays them. Sometimes an element takes up a whole line of your document and sometimes it gets squished together with whatever other content surrounds it. While there are quite a few methods for displaying HTML elements, the ones you will encounter most often are inline and block.
I’ve mentioned before that HTML elements are like containers that describe the content inside of them, so lets imagine these two display methods as two kinds of containers: cardboard boxes and plastic wrap. Because I love overextending a metaphor, lets also say that our web page is an attic that we are organizing with these containers. Without any boxes, the contents of our attic would all run together in one heaping mass of chaos. We’ll need the rigidity of the cardboard boxes to give structure to our pile… er, web page. A web page is essentially a stack of boxes. We know that the contents of a box belong together because there is a layer of cardboard surrounding it. Block-level elements are like invisible cardboard boxes. Take the paragraph tag, for instance. This is a box that contains ideas in the form of sentences. New ideas could be grouped in another paragraph tag, thus disrupting the flow of the document and indicating a shift in subject. To tie it in with our storage metaphor, we wouldn’t want to mix our ironic neck ties with our 8-track tapes, so we should group each of these things in their own box.
We can further organize our pile by fitting more boxes inside of a box. A list is a block-level elements that contain a stack of block-level elements. A list separates itself from the flow of the overall content and each list item separates itself from the flow of the other list items. It’s like a box filled with board game boxes.
Say you’re looking for a box to contain everything that once was rolling around in your junk drawer. This stuff isn’t necessarily a paragraph or a list, you say to yourself. What I really need is a generic, block-level container. What you need is the div element. The div element is a generic, semantically neutral container. It doesn’t really mean anything to your browser, so to be honest, it isn’t all that useful until you dive into CSS.
If we wanted to contain something within one of our boxes without disrupting the flow of our packing, we’d need to use plastic wrap… I mean an inline element. Inline elements are flexible and go with the flow, even if our rigid parent container forces the content inside to wrap to a new line. Because of their fluidity, inline elements are worthless for providing structure. Often their purpose is to alter the appearance of your text and add semantic meaning to the content. Lets say we’ve packed a box of boring plastic dishes, but we have one fine china saucer that we want to stand out from the rest. We wouldn’t want to put that in it’s own box, but we might want to wrap it in something like a strong tag. This won’t disrupt the flow of the content in our dishes container, but it will add some separation to our saucers.
As we continue organizing our fantasy attic, we come across an image element of Sam, our dog that I just made up. This bizarre hybrid element is both an inline element and a block-level element called an inline-block element. Inline-block elements have a rigid width and height like block-level elements, but they don’t disrupt the flow of our document, like inline elements. Images might seem like a block-level element in our stack if they are sandwiched between two block-level elements.
However, if we try to stack the image on top of another inline-block element it becomes apparent that images are not block-level elements.
If we wanted our inline-block element to break the flow of the document, we’d need to wrap them in a block-level element like “figure”.
With our attic completely organized, we can finally put our feet up and reflect on the lessons learned today. The three main display methods in HTML are block, inline, and inline-block. Block level elements are like cardboard boxes that group content inside of a container. Inline elements are more fluid, like plastic wrap, and adapt to the flow of the document. Inline-block elements are a little of both. They are not as fluid because they have a rigid height and width, but they do not disrupt the flow of the document. There are several other display methods we haven’t covered, but these are less common and many of them are only useful with CSS. Besides, I’m pretty exhausted after all of that packing.
Featured image credit: Ross Elliott