Block vs. Inline Elements

[00:00:00]
>> Teacher: The next thing I wanna do now, while we're here, let's talk about the two kinds of HTML tags that we need to discuss. Every HTML tag is assigned one of two categories, okay? One category is called the block-level category and the other is called the inline category, okay?

[00:00:20]
So block-level HTML elements are HTML elements that are as wide as their containers. In other words, these elements we're working with here are divs, are paragraphs and actually the H1 also. These are block-level elements and you know that because their boxes stretch all the way across the web page, in this case, make sense?

[00:00:45]
These are all children, all of these tags appear all these divs. These are children of the body tag, right? How big is the body tag? How wide is it?
>> Male Student: It's container?
>> Teacher: That wide [LAUGH] It's as wide as the browser window, okay? The divs are their children, how wide are they?

[00:01:07]
As wide as the body tag. How wide are the paragraphs? As wide as their parents. Who's their parents? The divs.
>> Teacher: From the body, as a parent. Make sense? So everything is really, really big and wide. So those are the block level elements. Can anyone give me an example of a different kind of tag that's only as wide as its content?

[00:01:32]
>> Teacher: And you know three or four of these now.
>> Male Speaker 2: Image be one?
>> Teacher: Actually image is one, but I was hoping for one with text, I should've been more specific.
>> Male Student 3: Link the A10.
>> Teacher: The link, let's put in a link, so I'm gonna drop in a link right here, a href equals.

[00:01:52]
Sometimes when we're practicing code we just do it this way, nothing in particular.
>> Teacher: All right, so now I have a link here, okay, you see my word Lorem here at the top, that is only as wide as? Its content, right? These are inline elements, so they have a different width.

[00:02:16]
By default, they're only as wide as their content. So if I put a border around my links, let's say I did that a, we'll put a border of 2 pixels solid blue around my links. See how they're only as, the border is only as wide as the content there?

[00:02:37]
>> Teacher: Okay? So those are inline elements.
>> Teacher: Anyone want to give me another example of an inline element? Link is a great example, there is a couple of others you did.
>> Female Student: Strong,
>> Teacher: Strong, yep, strong and?
>> [INAUDIBLE]
>> Teacher: And m, right, strong and m. Strong and m, so if we go ahead and drop in a couple of strongs and ms.

[00:03:13]
>> Teacher: Into our code.
>> Teacher: And then we can put that same border on them, just separate those by commas. So you see there, those are number of other inline elements, okay? And these are just assigned by the standards people, the people who make standards. Some things are blocks, some things are inline.

[00:03:40]
And it kind of makes sense, I mean you don't want your entire paragraph to be a big honking link, right? It's gonna be a few words. You don't want your entire paragraph to be bold usually or strong or m. So you're gonna go ahead and just make those as wide as their content.