Inline Vs Block Elements | Div & Span Tags Explained | Frontend Bootcamp Hindi | Ep.03

Summary

In this educational video, viewers are introduced to the concepts of inline and block elements in HTML, essential for web development. The tutorial begins by explaining the difference between the two, highlighting that block elements like 'h1' and 'p' tags take up the full width of their container, while inline elements such as 'b', 'i', and 'a' only occupy the space required by their content. The presenter demonstrates how to identify these elements using browser developer tools and provides practical examples by modifying a simple website. Additionally, the video introduces the 'span' and 'div' tags, explaining their common uses for inline and block-level content styling, respectively. The session concludes with a teaser for the next lesson on semantic HTML tags, promising further insights into web design and layout creation.

Takeaways

• 🌐 The video script is a tutorial that builds on a previous lesson about basic HTML tags and introduces the concepts of inline and block elements.
• 🔗 The anchor tag is highlighted as an example of an inline element, which has a width equal to its content and does not start on a new line after the element.
• 📝 Block elements, such as the H1 tag, are explained to have a default width of 100%, causing them to span the entire width of their container and start on a new line.
• 🕵️‍♂️ The script instructs viewers on how to inspect elements in a web browser to determine if they are inline or block by checking the 'display' property.
• 📚 The tutorial demonstrates the difference between inline and block elements by showing how they behave differently in a webpage layout.
• 🛠️ The script provides a practical example of how to modify an existing HTML project to understand the application of inline and block elements.
• 🖌️ The 'span' tag is introduced as a commonly used inline element for applying styles to a specific part of text without affecting the layout.
• 🔲 The 'div' tag is introduced as a commonly used block element for dividing the page into sections and is often used for styling and layout purposes.
• 🎨 The video shows how to apply background colors to text and sections of a webpage using inline and block elements, and the importance of understanding element types for styling.
• 🔄 The tutorial explains how to use the 'auto rename tag' extension in VS Code to easily match opening and closing tags, improving coding efficiency.
• 🌐 The script concludes by emphasizing the importance of understanding HTML structure and element types in preparation for learning CSS and creating webpage layouts.

Q & A

What are the basic HTML tags covered in the last video?

The basic HTML tags covered include anchor tags for adding links, bold and italic tags for text formatting, and tags for adding bullet points and numbered lists.

What is the main focus of the current video script?

The main focus is to understand the concepts of inline and block elements in HTML, their uses, and the problems they solve.

How can you inspect an HTML element to see if it is inline or block?

You can inspect an HTML element by right-clicking on it and selecting 'Inspect', then looking at the 'Computed' tab and filtering for the 'display' property to see if it says 'block' or 'inline'.

What is the default width of block elements?

The default width of block elements is 100%, meaning they take up the full width of their containing element.

How does the width of inline elements differ from block elements?

The width of inline elements is only equal to the content within them, unlike block elements which default to 100% width.

What is the purpose of the 'span' tag in HTML?

The 'span' tag is an inline element used to apply styles to a specific part of the text without affecting the layout or structure of the document.

What is the 'div' tag used for in HTML?

The 'div' tag, short for division, is a block element used to create a section or division in a webpage, often to group and style content collectively.

Why is the 'div' tag considered essential in web layout design?

The 'div' tag is essential because it allows developers to group elements together and apply styles to them as a collective, which is fundamental in creating structured and styled web layouts.

What is the advantage of using the 'span' tag over other inline elements for styling text?

The advantage of using the 'span' tag is that it doesn't change the text's appearance or layout by default, allowing developers to apply specific styles to a small section of text without affecting other elements.

How can you quickly duplicate a 'div' element in HTML?

You can quickly duplicate a 'div' element by selecting it and using the keyboard shortcut 'Shift + Alt + Down Arrow'.

What is the script's suggestion for the next topic to be covered in the video series?

The next topic to be covered is semantic tags in HTML, discussing their use and benefits.

Outlines

00:00

🌐 Understanding Inline and Block Elements

This paragraph introduces the concept of inline and block elements in HTML, explaining their uses and the problems they solve. The instructor revisits a previous project to demonstrate these elements in practice. Inline elements, such as the bold and anchor tags, are shown to have a width equal to their content, while block elements, like the H1 tag, span 100% of the container's width by default. The use of developer tools to inspect elements and understand their display properties is also covered.

05:01

📝 Exploring Inline Elements and Text Formatting

The instructor discusses the behavior of inline elements, using bold and italic tags as examples, and how they flow directly in line with other content. The paragraph tag's default width of 100% is contrasted with inline elements that adjust their width to the content. The concept is further illustrated by manipulating text alignment and background colors to show how block elements cover the full width, while inline elements do not. The segment ends with a tip on using the 'auto rename tag' extension in VS Code for easier coding.

10:02

🎨 Styling Text with Inline Elements

This section delves into how to style specific text within a line using inline elements like 'span' and 'i' tags. The 'span' tag is highlighted as a versatile inline element that can be styled differently from the surrounding text without affecting the layout. The instructor demonstrates changing text color to green and making text bold and italic, emphasizing the 'span' tag's role in applying unique styles to small sections of text.

15:03

🖼️ Utilizing Block Elements for Layout Division

The paragraph focuses on block elements, particularly the 'div' tag, which is used to create sections and apply styles to grouped content. The 'div' is described as a container that can hold multiple elements and allow for styling of an entire section. The instructor shows how to change the background color of a section by styling a 'div', and how to use transparent images to reveal background colors. The concept of division is emphasized as a way to separate different parts of a webpage.

20:05

📚 Organizing Content with Div and Span Tags

The final paragraph wraps up the lesson by summarizing the roles of 'div' and 'span' tags in HTML. The 'div' is portrayed as essential for dividing a page into sections and the 'span' for applying unique styles to small text segments. The instructor previews the next topic, semantic tags in HTML, and their benefits. The video concludes with a reminder of the importance of 'div' and 'span' tags in web development and an invitation to the next video in the series.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard language used to create and design websites. It defines the structure and layout of a web page by using various tags and attributes. In the video, HTML is the central theme as the script discusses the creation of a website and the use of HTML tags to format the content.

💡Inline Elements

Inline elements in HTML are those that do not start on a new line and only take up as much width as necessary to contain their content. Examples of inline elements mentioned in the script include 'b' for bold and 'i' for italics. The script explains that inline elements are used within block elements and do not break the flow of the content.

💡Block Elements

Block elements in HTML start on a new line and, by default, take up the full width available to them, which is typically 100% of their parent element. The script uses 'p' for paragraphs and 'h1' for headings as examples of block elements, demonstrating how they create distinct sections on a webpage.

💡Anchor Tag

The anchor tag in HTML is used to create hyperlinks. It is mentioned in the script as an inline element that allows users to navigate to different pages or sections by clicking on text or images. The script explains how to use the anchor tag to add links to a webpage.

💡CSS

CSS, or Cascading Style Sheets, is used for describing the presentation of a document written in HTML. The script mentions CSS in the context of changing the appearance of HTML elements, such as making text green or setting background colors, which will be covered in more depth in future lessons.

💡Span Tag

The span tag is an inline element in HTML used to apply styles to a specific part of the text without affecting the surrounding content. The script explains that span does not have any inherent styling of its own but can be targeted with CSS to change the style of the text it wraps.

💡Div Tag

The div tag is a block element in HTML used to create a division or a section in the layout of a webpage. The script discusses how divs are used to group and style multiple elements together, making them a fundamental part of web design for creating structured layouts.

💡Display Property

The display property in CSS is used to define how an HTML element should be displayed on a page. The script refers to the display property when explaining the difference between inline and block elements, showing how elements like 'b' and 'i' are displayed inline by default, while 'p' and 'h1' are block elements.

💡Live Server

Live Server is a feature in some code editors, such as VS Code, that allows developers to open their web projects directly in a browser and see the changes they make in real-time. The script mentions opening a project with the Live Server to view the HTML elements and their effects on the webpage layout.

💡Semantic Tags

Semantic tags in HTML are elements that provide meaning to the web content rather than just presentation. Although not fully explained in the script, the mention of semantic tags suggests that they will be discussed in a future video, likely in the context of improving accessibility and SEO.

Highlights

Introduction to inline and block elements in HTML and their uses.

Explanation of how to identify inline and block elements using developer tools.

Demonstration of the default 100% width behavior of block elements like H1 and p tags.

Illustration of inline elements having width equal to their content, such as bold and anchor tags.

Use of the 'display' property to filter and identify block elements in the computed tab.

Introduction of the span tag as a commonly used inline element for applying styles to text.

The div tag is introduced as a block element used for dividing sections on a webpage.

Explanation of how to apply background color to specific sections using the div tag.

The use of transparent images to show background colors applied via CSS.

The concept of grouping elements within a div for styling and layout purposes.

The importance of div tags in creating layouts and their widespread use in web development.

Practical tip on using the 'auto rename tag' extension for HTML editing in VS Code.

How to manipulate text styling within inline elements without affecting layout.

The difference between inline and block elements in terms of layout and styling.

The role of the CSS 'style' attribute in applying direct styles to HTML elements.

How to use the live server in VS Code for real-time preview of HTML changes.

The impact of removing text-align center property on the layout of block elements.

Overview of semantic tags in HTML and their benefits for SEO and accessibility.

Transcripts

Hi everyone, in the last

video, we made a small

website on front-end roadmap.

And while making that website,

we learned basic HTML tags.

For example, how to

use anchor tag

to add links,

how to bold, how to italicize text,

how to add bullet points,

how to add numbered list.

So, we learned

some commonly used

basic HTML elements.

In this video, we will understand

what are inline and block elements,

what are their uses, and

what problems they solve.

So, let's go to our screen.

I have come to the same folder

where we created the last project.

I will copy and paste it here,

that is, I will duplicate this folder.

And I

will name

it inline

vs

block

elements.

Let's make it 03.

We will use the same project

to understand inline and block elements.

So, here we will right-click

and open with VS Code.

So, it has opened

in my VS Code.

Now, I will

right-click and open

with live server.

It has opened with my live server.

So, we made this website

in the last lecture.

So, we will understand

here that whatever

we have created,

some elements are inline and

some elements are block.

So, which one is inline

and which one is block?

So, if we want to see it

ourselves, how will we see it?

For example, if

we click on

this and inspect,

then our elements tab will open.

And then there is

a computed tab here.

If we come to

this, we can see

the display block above.

There are many other things that are

visible, so put a filter here.

DISP...

So, I have

put a filter

for display block.

So, I can see only this property.

And its value is block.

So, this is block.

So, this is a block element.

So, which inline elements are here?

So, this is the inline element here.

For example, if we go to the bold tag,

we will see that

inline is written here.

So, this is inline.

There is another anchor tag

which is an inline element.

So, what is the difference between these two?

Look carefully.

This bold element has

the same width

as its content.

But look at its width.

The width of H1 is

going from here to here.

If you look here,

its width will also be written here.

So, its width is 677.

So, its width is equal to this.

It is almost equal to this.

So, by default,

the width of block elements is 100%.

Even if you write a little content in it,

even if you write only one letter,

even if you write the whole line,

its width will always be 100%.

So, for example, this is a p tag.

Its width is 100%.

And this is a display block.

So, the width of inline elements is

only equal to the content in it.

So, look at this.

This anchor tag is also an inline element.

And its width is the same.

If you look here,

its width is the same as its content.

And if we come here and look at the image,

the image is also of an inline type.

Display inline.

So, all these elements are display inline.

Which images are inline?

This bold tag is inline.

This anchor tag is inline.

And if we come here,

the italic tag, i tag,

this one is also display inline.

So, all these are inline elements.

Its width is only equal to

the content in it.

So, these are inline elements.

We will study this in great detail

when we study CSS.

Then we will study it in more detail.

And we will see how

we can make an inline element a block

and we can change the block

inline by giving its property.

So, for a minute,

we will remove all this content.

Remove everything.

Remove the lower part

and keep the upper part.

So, how much?

Remove the whole UL.

So, I removed this much.

I have this much left.

Only this much is left.

So, under this p tag,

we will write some inline elements.

So, if I press ctrl enter here,

my cursor will automatically

come to the next line.

I also had a cursor here.

If I press ctrl enter,

it comes to the next line.

There is no need to take the cursor

behind the whole line.

It will automatically come to the next line

if you press ctrl enter.

So, I always use the same shortcut.

So, here we will write some inline elements.

For example, I wrote b,

meaning bold tag.

Here I will write hello

world.

So, here I have

hello world.

Now, under this,

I will write

what should I write here?

Under this, I will write

an i tag.

Here, I will write

hello world 2.

So, see here, one by one,

it is coming in a line immediately.

It ends here,

then it comes here immediately.

But, if we

remove the text align center,

then this p tag will come here.

Here, it was text align center,

so it was coming here.

We have removed the text align center property.

So,

it will come in the starting from here.

So, see this p tag

is covering the whole width.

If we inspect here,

it is covering the whole width.

If we want,

we can also see the background color here.

So, style is equal to

background color.

You don't have to remember this.

This is a CSS property.

You just have to write

this much for now.

We will give the background color as pink.

Let's say we give it pink.

So, we gave it pink.

So, its content is up to here.

But, the element

is spread all the way to here.

It is spread all the way to here.

From here to here.

So, by default,

its width is 100%.

It covers the whole body's width.

Body's width

is all the way from here to here.

From start to end.

From here to here.

Why it is not going all the way?

When we will read the CSS,

we will see it clearly.

As you can see,

there is a margin on the body.

8 pixels.

That margin is stopping it

If we will remove the margin from the body,

it will reach to the edge by default.

Because its width

is 100% by default.

But, if we give the background color

to this.

Let's copy the same thing

and change the color.

What did I copy?

Let's change it to hot pink.

Hot pink

is a color in CSS.

It looks like this.

We have not given

any width to it.

Still, its width is the same

as the content.

Because it is inline.

See here.

This is inline.

Display inline.

And this p tag is display block.

So, this is the difference.

The width of inline elements

is equal to its content.

And if there is

a new inline element in front of it,

it will come immediately.

Here, the content is over.

I put another inline element in front of it.

It came immediately.

We saw that images

are also inline elements.

If we put the image here,

if we copy and paste

the image here,

it will come immediately after that.

It will not come in the next line.

See here, this is hello world.

This is hello world 2.

This is the image.

If I reduce its width,

then it will come

in the new line.

There is no space for its width.

That is why it is in the next line.

By default, it is in the same line.

See here, it is in the same line.

This is 1, this is 2, this is 3.

If I remove the image from here,

where is the image?

If I remove the image and

put a block element,

like p tag, h1, h2,

all of them are block elements.

I will put h2 here.

I will write welcome here.

See here,

there is so much space here.

There is so much space after this.

But welcome is coming

in the next line.

See here.

What happened now is that

I changed

its tag name,

but it did not end.

It came here

and was doing

this.

The HTML engine

did not know

where the i tag

ended.

After that, it is making

welcome italic.

If we close this,

it will automatically

get fixed.

There is an extension for this.

If I make it bold,

we will have to change

the tag at the back.

There is an extension

auto rename tag.

If we go here,

auto

rename,

auto rename tag.

We will install it.

It worked.

If I make it bold,

it will change automatically.

See here.

If I make it p tag,

it will also be p tag.

This is a small quick tip

which you can follow.

By installing this extension,

your life will be easy.

I put h2 here.

It is coming in the new line

because it is a block element.

We will remove all these.

We will now

see about two new tags

which are used on every website.

Most of the websites

use the same two tags.

For example,

if I

want to

make this website

green.

I want to make it green.

How will I do that?

First,

I will remove this.

I want to make it green.

I can do one thing.

First, let's see

how to give color to any text.

If I come here

and style color

equal to

green,

the whole line will be green.

From here to here.

The anchor tag is not green

because it has its own color.

That is why it is not green.

The whole line is green.

But I don't want to make the whole line green.

I just want to make

this text green. Only the website text.

So, if I have to make this green,

how will I do it?

Do you have any

solution in your mind?

One thing I can do is I can put this

in the i tag.

Like we have studied so far.

Put it in the i tag.

To green, we have to put

it in a different tag.

Only then we can do it.

So, I have put it

in the i tag.

So, by putting it in the

i tag, it will become italic.

But then we can

make it green here.

Style color is equal to green.

Close it.

So, now it has become green.

Zoom in and show.

See, it has become green.

And if I want,

I can make

it bold too.

So, it has become bold and green.

But I don't want it

to be bold or italic.

I just want to make it green.

So, the most common inline

element for that is

span.

So, what does it do?

It does nothing.

If I remove it, you

won't find any difference.

See, there is no difference.

It is a normal word.

It is not doing anything. It is just lying here.

So, if we put it

like this, it does nothing.

It becomes like a word.

The advantage of this is that

it becomes a little different.

It is different

from normal text

like so that

users can view.

It is not different in appearance.

But the markup of our HTML,

markup means the content,

is a little different from that.

So, now we can give

it a different style.

So, now if we give it

style color is equal to green,

then this will be applied here.

Now, it is not even bold.

See, it is not even bold.

And its color has also changed.

So, if we want to

give a different style

to a specific text

in a whole line,

a small text,

if we want to give it a different styling,

then we use span tag.

So, this is the most

commonly used inline element.

The second most commonly used block element,

what is that?

That is div.

Its name is div.

Its full form is division.

Division means it represents a

section on the whole page.

So, in this case,

I will tell

you a problem.

What is the problem?

I will tell you a task.

For example, you have to leave this whole section,

this line,

below this,

and then this image,

leaving this,

this all copyrights reserved,

you have to make the

whole background hot pink.

You can use any color.

Just don't use red, blue, etc.

Otherwise, it looks too bright in the eyes.

You can use pink, green, or even teal.

Let's try teal.

Teal is a greenish color.

So, you can use any color.

So, I have to make this much color.

This much color.

So, according to the current HTML structure,

if we go to do that,

this is our paragraph tag.

This is HR.

So, don't touch HR.

There is a paragraph below it.

So, we will give its background color.

We have to style it.

Style background color.

Give it hot pink.

So, this much color is pink.

Now, if I copy this,

this is the color of p tag.

Now, this image is left.

So, let's give hot pink here as well.

Background color.

Here, style is already there.

So, we don't have to write style twice.

We just have to put a semicolon here

and paste the background color.

We have to put it in the same style tag,

in the same style attribute.

So, look at this.

We can't see the color of the image

because

the white of the image

is already background.

And

if we

had a transparent image,

the background would be visible here.

So, for that,

I will download a transparent image.

Quickly.

So, here I have downloaded

a transparent version of this image.

Now, we will put this in our project.

And then we will see

how its color is visible in the background.

So,

here

we will make it transparent.

If we do a slash here,

it will give a suggestion.

So, here

I have put a transparent image.

Now, we can see the background color.

Earlier, it was not visible.

Earlier, because it was like this.

Earlier, because its background

was not transparent, it was white.

So, it was not visible.

Now, we have made it

transparent background.

So,

it is visible through it

because its background is transparent.

Its background color is visible.

From here, we can toggle it.

So,

that's it.

But I want

it to be complete.

Here, the white space is coming.

So, we have to give it

10 elements.

If I had 10 elements,

I would have to give the background color to 10 elements.

And if there is a gap in it,

it would have been visible.

So, the div

we use it to wrap

many elements.

So,

this is the p tag and this is the image tag.

So, if we put a div on it

and the closing tag

is placed

below the image,

it becomes a container type.

I will select it

and click the tab.

So, the div

is containing both of them.

That means,

these two elements are inside the div.

The div is the parent

of both of them.

So, if we set the style background color

to

pink.

So,

the whole section is pink.

What was there last time?

It was something like this.

Let's press ctrl z once.

Yes.

Last time, it was something like this.

Because the image is an inline element,

the width is only this much.

And how much did I want?

This much. I wanted this much color.

But

because the image is an inline element,

the background color is only this much.

So, if we

put it in a block element.

Div is a block element.

If we inspect here,

the div is selected.

And look,

the display block is shown here as well.

Otherwise, we will go to the computer.

If we write display here,

the display block is written.

So, this is the display block.

That means, the whole width

is from start to end.

And we wrap

some content in it.

This is called division.

It divides

a section from another section.

We use div

so that we can group

some sections together.

And if we want to style it differently,

we can do that.

So, if I copy this div

and paste it

or duplicate it,

if I use shift-alt-down arrow,

the whole div will be duplicated.

So, look,

it will be duplicated below.

If I duplicate it again,

it will be three times.

So,

now we can

understand it in three sections.

We can think that

there are three different sections

and we can give different colors to all three.

For example, if I give it a teal color.

It is a greenish color.

So, it is a teal color.

And the background color of the image is coming

because we gave

the background color of the image

separately.

So, let's remove the background color of the image from here.

And if we remove it from here,

still

where is it?

Here.

From here.

From the top one.

So,

I have removed the background color of the image from here.

But because

the parent of this image is a div.

The color is given on it.

So, it is visible.

Because it is a transparent image.

And then the second color of this is done.

Then let's give some color to this too.

If we press ctrl-space,

then automatically all the colors in CSS

are suggested.

Which one should we try?

This dark.

Dark sea green.

Let's do this one.

Here also the background color of the image

is given separately.

Let's remove this too.

So, we have three sections.

We have given

different styles to all three.

Although it looks very bad.

Normally,

when we do this,

we don't give any color.

Let's categorize for other purposes.

So that our code

is in a category.

This is our top header section.

Then there is an article section below it.

That's why we group it

separately.

So, these are our three sections.

Mainly.

There is some content in it.

So, these are three big sections.

So, what does division do?

It divides our whole page

into different sections.

So, for a minute,

if we open any famous website

like amazon.com

and right click here

and inspect.

So, we can see

let's make it smaller.

So, you can see

that here

there are so many divs.

Div, div, div.

So many divs have been used.

So,

div tag is used in every website.

Div is the most commonly used tag.

We will learn CSS

and make a layout.

So, we will need to use div a lot.

And sometimes

we will also use span tag.

When we have to

give a different color

to a small text in a small sentence.

In that case,

we will use span tag.

So, in this video, we saw

what are inline and block elements.

And we saw

div and span tags

which was a new tag

for us.

Span is an inline element

and div is a block element.

When we learn CSS,

we will understand in more detail

and depth

how an inline element

can become a block element.

so we will learn this, when we will reach CSS,

In next video, we will learn what is semantic tags in HTML?

what is its use? and what are the benefits for using that?

so that's all for this video, see you in the next one till then bye bye!