ColorCode

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. Look at this cards:

How do these elements know how to sit. Or as we call it, how to be rendered. Why is the image on the top and not on the left? Each card is probably a <div> with several other elements inside it. Well, here is where we talk about the relationship between elements.

If I add two <p> tags to my HTML. What do you think is gonna happen?

<div>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

They sit on top of each other, like this:

What if they were <a> tags (Links)?

<div>
    <a>Link 1</a>
    <a>Link 2</a>
</div>

Now they sit side by side:

But why is that?

Well the reason for that is something all elements have, the Display Type. And it’s different for <p> and <a>.

Block Level Elements

Paragraphs are what we call 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.

Take another look at our paragraphs:

Inline Elements

<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. Again, let's look at our inline <a> tags, which by now you should know are inline elements:

Another example: div and span. These two are both used as containers for other elements. They help with grouping things together. Here are two <div> tags and two <span> tags:

<div>
    <div>First Div</div>
    <div>Second Div</div>
    <span>First Span</span>
    <span>Second Span</span>
</div>

Notice the <div> goes all the way to the right regardless of how much text is in it, where as the <span> stops where the text stops:

So the type of element you choose makes a massive difference in how they get rendered.

What if we could see how websites are built? Well, we can. If you’re using Google Chrome you can right click on an element and click on Inspect Element. 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 immediately please.

And you can do this to any website in the world. It's 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 more mystery to it.

So spend some time and look around websites like Facebook 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.

There are other Display types as well such as Inline Block, Flex, Grid and even more. They're a little more advanced so we'll get to them later.

You can also change the display type of an element using CSS, so a <p> tag can become inline and an <a> tag can become a block. Confused? Great, that means you’re getting into HTML... 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.