HTML Tutorial — Display Types (4/11)
https://www.colorcode.io/course/html-basics/display-types
So, talking about HTML structure. We looked at the DOM, parent/child relationship. But why is all that so important. Well, let’s look at some real examples. Let’s go to GQ.com –
You might start to recognize some of these elements. Here’s probably a small header tag. This might be a p tag. Here’s an image. But how do these elements know how to sit. Or as we call it, how to be rendered. Why is the image on the left and not at the top? If you take this whole block of content and consider to be an individual piece, it’s probably a div container, with a several other elements inside it. Well, here is where we talk about the relationship between elements.
If I add two P tags (Paragraphs) to my HTML. What do you think is gonna happen? They sit on top of each other. What if they were A tags (Links)? Now they sit side by side. Why is that?
Well the reason for that is something all elements have, the Display type. And it’s different for P and A. Paragraphs are what we BLOCK level elements. That means they take up the entire row. They go all the way to the right. Regardless of how much text is in there.
A tags on the other hand, don’t, they take as much of the horizontal space, as they need. Depending on how much text is in them. That’s called an INLINE element. Which to me sound like it is within the line where it belongs. Hmmm Ok!!
Another example: div and span. These two are both used as containers for other elements. They help with grouping things together. Here are two DIVs, and here’s two SPANs.
So the type of element you choose makes a massive difference in how they get rendered. So let’s now go back to GQ and look at some of those groups together again.
HEADER: What do you think these elements are? What about these side panels? Do they look like they’re groups? Yeah that looks like a group, this is another group. What if we could see how these were built? Well, we can. If you’re using Chrome you can right click on an element and Click on Inspect Element. This window will show you every element this page has. If you’re using Safari or FireFox I think you can do the same thing. If you’re using IE, I got nothing for you. Change your browser please.
And you can do this to any website in the world. It is a great learning tool just to poke around and see how these big names build their websites. Sometimes it’s crazy what you find in there, sometimes it’s really confusing. But when you recognize something that you know, like a piece of HTML that you’ve used before, it feels kinda cool. That’s it there’s no mystery to it. So spend some time and look around some of the websites you like, Facebook or something. And see how things are structured. You’ll start to notice patterns pretty soon.
So to recap, there are Block elements that take up a whole row. There are inline elements that take as much space as they need. Here are 2 crazy things I’ll add to that: 1. These are the most important display behaviors, BLOCK and INLINE, but there are other kinds as well that we will cover soon. 2. you can change the display type of an element using CSS, so a P can become INLINE and a link can become a BLOCK. Confused? Great, that means you’re getting into HTML. But all jokes aside it will make more sense the more you do it. So go ahead and experiment with these a little. Poke around some websites and in the next couple of videos we’ll make an actual meaningful page together.
