HTML Document Flow and Element Display Methods

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.

html p tags

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.

html ul tag

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.

html inline element

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.

inline block element

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.

two inline block 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”.

inline block element wrapped in block level element

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

HTML Document Flow and Element Display Methods was posted by on . JR is one of the three humans that run the behind-the-scene affairs of The Hello World Program. He is interested in spreading the good robot word over the vast Inter-webs. His contributions to the show include editing, web programming, design, and music composition.

Discuss this article in the Comments below, or and it with your friends. Learn more about Web Development by subscribing to The Hello World Newsletter .

Join the Discussion

Subscribe to our Mailing List

Stay up to date on the latest videos and tutorials with our monthly newsletter

The email entered is invalid
×

Want to Learn HTML?

Master the essential web language with our free 10 day course. Get entertaining web development classes emailed directly to your inbox.

The email entered is invalid

×