Inline & Block Elements in HTML | Sigma Web Development Course - Tutorial #8

Summary

This educational video script delves into the fundamental concepts of inline and block elements in HTML, explaining their differences through examples and CSS demonstrations. The instructor guides viewers to distinguish between elements that occupy the full width of the screen (block) and those that only take necessary space (inline). The script also encourages active learning by inviting viewers to participate in quizzes and to explore CSS properties that can alter these behaviors, promising further insights in upcoming videos.

Takeaways

• 📝 Inline elements in HTML only take up as much width as they need, while block elements take the full width of the screen.
• 🎨 The display property in CSS can be used to change the default behavior of elements, allowing for flexibility in design.
• 💻 The speaker demonstrates the difference between inline and block elements by adding CSS to give background colors to paragraphs and anchor tags.
• 🔗 Anchor tags are used as an example of inline elements, showing that they only take necessary width and do not affect the layout of subsequent elements.
• 📚 A comprehensive list of HTML elements is provided, distinguishing between commonly used block and inline elements.
• 👀 The importance of good coding practices is emphasized, including writing clean and well-formatted code for future readability.
• 📑 The script includes a practical exercise for viewers to create a vertically aligned form in HTML, encouraging interactive learning.
• 🌐 The speaker mentions the availability of additional learning resources on codewithari.com, including notes that complement the video content.
• 🛠️ CSS will be further explored in future videos, including how to use properties like 'inline-flex', 'inline-block', and the impact on element display.
• 🗣️ The speaker encourages viewers to participate in the learning process by sharing their code and thoughts in the comment section of the video.
• 🙏 The video concludes with motivational words, reminding viewers of the value of the educational opportunity they have and the importance of perseverance in learning.

Q & A

What is the fundamental difference between inline and block elements in HTML?

Inline elements take up only as much width as necessary, while block elements take up the full width of the screen.

What is the display property in CSS, and how is it related to inline and block elements?

The display property in CSS determines the type of box used for an element and can change an element from being an inline element to a block element, or vice versa.

How does the script demonstrate the difference between inline and block elements using background colors?

The script uses background colors for paragraph (block element) and anchor (inline element) tags to visually show that block elements take up the full width, while inline elements only take up the necessary width.

What is the purpose of the 'hover' effect in the context of the anchor tag in the script?

The 'hover' effect is used to change the background color of the anchor tag when the mouse pointer hovers over it, demonstrating the interactive aspect of inline elements.

What is the significance of the 'span' element in the script's explanation of inline elements?

The 'span' element is used as an example of an inline element, which allows text to be styled or formatted without breaking the flow of content.

What does the script suggest about the importance of good coding practices?

The script emphasizes the importance of writing clean and well-formatted code that can be easily understood and maintained in the future.

What is the 'comprehensive list.txt' mentioned in the script, and why is it useful?

The 'comprehensive list.txt' is a file that contains a list of both inline and block elements in HTML, which is useful for quick reference and learning.

How does the script encourage viewer interaction through the use of a quiz?

The script poses a quiz question about creating a vertically aligned form, asking viewers to write their code in the comments section, thus promoting engagement and discussion.

What is the script's stance on the value of learning web development through the provided course?

The script conveys that the viewers are fortunate to have access to a comprehensive and free course, and it encourages them to appreciate the opportunity to learn and grow as web developers.

How does the script address the concept of sacrifice in the context of learning and personal growth?

The script suggests that success often requires sacrifice and that the effort put into learning web development now will be recognized as a blessing in the future.

Outlines

00:00

📚 Understanding Inline and Block Elements in HTML

This paragraph introduces the fundamental difference between inline and block elements in HTML. Inline elements occupy only the necessary width, whereas block elements take up the full width of the container. The speaker explains this concept by using CSS to demonstrate the difference in behavior, such as how block elements cause subsequent content to start on a new line. Examples include using the 'p' tag for paragraphs, which is a block element, and the 'a' tag for links, which is inline. The speaker also mentions 'div' and 'span' as examples of block and inline elements, respectively, and encourages viewers to understand these concepts through practice and by referring to a provided comprehensive list of HTML elements.

05:03

🛠 Customizing Display Properties with CSS

The speaker discusses the ability to alter the default display properties of HTML elements using CSS. They clarify that elements are not strictly confined to being either inline or block; their behavior can be changed with CSS. The paragraph also includes a correction about the organization of video content, where the speaker acknowledges a mistake in the naming of video folders and promises to provide the correct source code. Additionally, the speaker provides resources for further learning, such as notes on their website, and encourages good coding practices. They conclude with a quiz for the viewers to apply their knowledge of inline and block elements in creating a form and invite them to share their solutions in the comments.

10:04

🎨 Applying CSS for Visual Effects and Encouraging Engagement

In this final paragraph, the speaker demonstrates how to apply CSS for visual effects, such as changing the background color of elements like 'span' on hover. They highlight the importance of viewer interaction by asking viewers to like, share, and comment on the video, emphasizing the value of community engagement. The speaker also reflects on the importance of the course content, expressing gratitude for the opportunity to learn and grow as a web developer. They encourage viewers to appreciate the resources available to them and to recognize the sacrifices made for their education, asserting that the effort put into learning is worthwhile.

Keywords

💡Inline Elements

Inline elements in HTML are those that only take up as much width as necessary to accommodate their content. They are used to create elements that flow within a text line, such as 'span' or 'a'. In the video, the instructor uses the example of an anchor tag with a hover effect to demonstrate how inline elements behave, taking only the space they need and allowing other elements to sit alongside them on the same line.

💡Block Elements

Block elements in HTML are different from inline elements in that they take up the full width available to them, causing subsequent content to start on a new line below. Examples include 'div' and 'p' (paragraph). The video script illustrates this with a paragraph element that is given a blue background color, which spans the entire width of the screen, and contrasts it with inline elements.

💡Display Property

The display property in CSS is used to define the display behavior of an element. It can change an element from its default display type to 'inline', 'block', 'inline-block', and more. The script mentions that this property can override the default behavior of HTML elements, allowing for greater flexibility in layout design.

💡CSS (Cascading Style Sheets)

CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML. In the context of the video, CSS is used to style elements, such as changing their background color or setting hover effects. The instructor demonstrates adding CSS to HTML elements to show the visual differences between inline and block elements.

💡Background Color

The background color property in CSS is used to set the background color of an element. In the script, the instructor applies background colors to different elements to visually distinguish between inline and block elements, such as giving a blue background to a paragraph and a red background to an anchor tag.

💡Anchor Tag

An anchor tag in HTML, denoted by '<a>', is used to create hyperlinks that link from one page to another. In the video, the instructor uses an anchor tag with an 'href' attribute set to 'google.com' to demonstrate how inline elements can have styling applied and still only take up necessary space.

💡Hover Effect

A hover effect in CSS is a visual change that occurs when a user places their mouse cursor over an element. The script describes applying a hover effect to an anchor tag, changing its background color when the user hovers over the link, as an example of styling inline elements.

💡Comprehensive List

The comprehensive list mentioned in the script refers to a collection of HTML elements categorized as either inline or block. This list serves as a reference for viewers to understand which elements behave as inline or block by default and is provided as a supplementary resource for learning.

💡Self-Learning

Self-learning is the process of acquiring knowledge or skills independently, without formal instruction. The instructor encourages viewers to engage in self-learning to explore elements that may not be covered in depth during the video, promoting a proactive approach to education.

💡Code Formatting

Code formatting in the context of the script refers to the practice of organizing and structuring code for better readability and maintenance. The instructor advises viewers to write clean and well-formatted code, which will be appreciated by future generations, using the metaphor of a grandchild looking at their code in the future.

💡Quick Quiz

A quick quiz in the video is an interactive element designed to engage viewers and test their understanding of the material. The instructor poses a challenge to create a vertically aligned form using HTML, encouraging viewers to participate by sharing their code and explanations in the comments section.

Highlights

Learning the concept of inline and block elements in HTML is crucial for understanding web design.

Inline elements only occupy the width necessary for their content, unlike block elements which take up the full width of the screen.

The display property in CSS can be used to change the default behavior of elements, allowing for flexible design options.

The video includes a practical demonstration of creating a new folder and file in VS Code for coding examples.

The presenter uses CSS to illustrate the difference between inline and block elements by applying background colors.

Block elements, such as 'p', take up the full width and cause subsequent content to start on a new line.

Inline elements, like 'span' and 'a', only take the width necessary and allow other elements to sit alongside them.

The distinction between block and inline elements is fundamental to how content is laid out on a webpage.

The video provides a comprehensive list of common block and inline elements in HTML.

Understanding the default behavior of elements is key to effective web development, as it can be altered with CSS.

The presenter encourages viewers to practice identifying block and inline elements to solidify their understanding.

A quick quiz is offered to engage viewers in applying their knowledge of inline and block elements in a form layout.

The video emphasizes the importance of writing clean and well-formatted code for future maintainability.

The presenter shares motivational insights, encouraging viewers to appreciate the opportunity to learn web development.

The video concludes with a reminder to access the playlist, like the video, and engage with the community.

Transcripts

Learning the concept of inline and block elements in HTML is very important.

Inline elements are those which take only this much width as required.

And block elements are those which take the full width of the screen.

This is also called display property which can be set through CSS.

If you are enjoying this video so far, then do like this video.

So let's go to the computer screen and see inline and block elements closely

through some very good examples.

Let's roll the intro.

So guys, now it's time to see inline and block elements.

If you haven't accessed the playlist yet,

then do it now.

Because as the videos are being made,

the code of the videos and the video

is being added in the playlist

now what I will do here quickly

which I always do

I will make a folder here

in the name of video 8

so I have already put 7 videos here

by doing new folder

I will make a video 8 here

and I will open it in VS code

and after opening it in VS code

what I will do

that I will make you index.html

and tell you about the index and block element so I hit the exclamation mark and hit enter and I could have typed this too but I will make index.html and tell you about index and block elements.

I typed the exclamation mark and I could have typed it but I won't because why type when I can do this.

I will write inline and block elements here.

I told you a little bit about this but I will tell you more about it.

What are inline elements and why I would like to use them.

Inline elements are those elements that take only as much width as necessary.

Block elements do not take as much width as necessary.

No, they say we need full width.

Some people sit spread out.

These block elements are like that.

I will tell you what the difference is.

And to explain this difference, I will cheat a little.

I will add CSS.

You will say that I have not studied css, why are you adding css

I am adding css only as much as it is necessary

I will enter my p here

I will write here let us say hey I am a para

I will say here give background color to p

let us say blue, I will say here to give background color to P let us say blue ok, I will give it here

otherwise you guys should choose a good color

what is going on here

ok, now you can see here that I have given a color to paragraph

and along with that I will put an anchor tag

href is equal to

google.com let us say

and I have to put https

https colon double slash

then it will go to google.com

and I will write google here

and do you know what I will give i will write google and the anchor tag background color i will give red

but i will give hover

and like this i can choose any color in the spectrum

how did you like ninja tagging tell me in the comment section

if you already know ninja tagging then comment

i am already a ninja

so do comment on this, it is very important.

Now here you can see the background color I have given this of anchor tag.

And I have made it very similar, I will change it a little, I will make it reddish.

I have made this a little red orange.

And I have made this blue.

Now you see the difference, I will click here and as soon as I click here, you see

that the background color that he got, he got the full width.

But he got only as much as this element. Why did this happen? you can see that the background color is the same as the width but this one has only the same amount of elements

why is this?

this is because this paragraph is a block element

and our anchor tag is inline element

inline elements only take the amount of space they need

block elements take the entire width

and the next content comes below that

when we take the entire width, the next content will come below that

along with that, if i talk about div

that is a block element

and span is

like div but it is an inline element

i am span and i am inline

and if i put an anchor tag

and write yes he is inline

so you can see here

I'll show you the code by zooming out

So if I write it in a new line

By the way, I'll tell you how many spaces I'll give

This will not be added in my content

Because HTML has more than one space

And it doesn't include it anyway

If you want to give spaces, you can write ampersand nbsp

I'll tell you about that

But now I want to show you how it is working

So what happened, I wrote here Hey I'm a parent

What is paragraph? A block element

So it took the whole width

Next content will come down

I wrote ahref is equal to this

So it took only that much width as it is necessary

And it took only that much width

But the next content was saying that I want the whole width

So it will not come here, it will come in the next line

Because it says that I want the whole width So it will come in the next line It cannot come in this line Because if it comes in this line, then how will I want the full width, so it will not come here, it will come in the next line because he says that I want the full width, so it will come in the next line

it can't come in this line, because if it comes in this line, how will it take the full width, google is also taking the width

so it will take the full width, if I give it a background color, then it will be visible in the full width

I do one thing, I give it a yellow color, a background color

and I give the background color yellow and you can see here, it has taken the entire width.

Along with that, I can keep the span and anchor tag in the same line

because it is an inline element.

So inline elements only take the width as much as is necessary

and give the opportunity to other elements to come in their width.

Like you saw here that this span also gave the opportunity to anchor tag to come.

Now, will the anchor tag always be inline?

Will the paragraph tag always be blocked?

will this thing always be there?

the answer is no, you can change it

you can set the display property of any particular element with CSS

and if you set the display property

then it is not necessary that the inline element will remain inline

and the block element will remain blocked

it can also be inlined

we will see this in CSS later

now I want to pin point one thing quickly

that the video of forms was video 7

but I have put it in the folder named video 6

so I will make it video 7

and now it is video 8

what we are doing now is video 8

and there is nothing in video 7

so I will quickly structure it here

you don't worry about it at all

I hope you are getting good learnings.

Many people have pointed this thing in the comments.

I will fix it, but I think that doesn't affect us in any way.

Because you guys are understanding.

And now the folder you will get, the source code, you will get it right.

Along with that, go to codewithari.com, click on notes and download notes.

And it will be a complimentary source for you.

But I am explaining everything here step by step

so you don't worry about it at all

okay, so this is about our inline and block elements

now which elements are inline and which are block

how will you know that

how will you know div is block and span is inline

so this comes with practice

but I have made a comprehensive list for you

of inline and block elements

here is the list of block elements

in which I have written the most commonly used elements first.

Like div is the most used, then paragraph.

And if you come to the end, you will find such elements

which may not be very used.

Maybe you don't even know about them,

but you will know later.

And it is not possible for me to tell all the elements here,

so you guys do some self-learning too.

Definitely there are a lot of such elements

which will come to you in very little use

But the most commonly used ones will be shown to you

Then I have made a list of inline elements below

So you refer this comprehensive list

Here I have made a file named comprehensive list.txt

So you refer this file

Along with that, the code you have should not have any unnecessary space

As I was telling you that this space is not parsed.

In fact, if you right-click and do the format document,

then your document will be formatted.

Write good code, write such a code that

when your grandchildren open your Zankila laptop in the future

and they get this code, they will say that

Dadaji used to write good code.

Don't say that Dadaji used to put such a space,

then Dadaji used to do this, this, this. So you will want to be how to use it, then you can use it.

Now I want to give you a quiz through html comments. Write a vertically aligned form asking for name city And here I have added one more thing, I will show you

I will turn on the word wrap

So here you see the name city and pin code of a user

So you have to write a form which we read in the last video

About the form, you have to write this form

How you will make it, you should know

And along with that I want everyone in the comment section

Give the answer to this quick quiz, everyone

This is our first quick quiz, so I want a little

Keep making two-way interaction Write in the comment section, definitely comment your code answer to all those quick quiz. This is our first quick quiz. So I want you to make a two way interaction.

Do write your code in the comment section.

And do tell me

which element you used.

Inline element, if yes, which inline element?

Block element, if yes, which block element?

You can tell me your explanation in the comment section.

In the coming videos,

we will also see that

how you can use CSS to set inline flex,

inline block, and display properties. and what is the difference in them.

So we will see all these things in the coming videos.

I want to tell you that if you are following this course, then you are going to be a great web developer.

And you don't think that the videos are long and our hustle is going on for a long time and so on.

I want courses to be beginner- And along with that I want to tell you

People will tell you in life that you are doing this

We are doing fun, you are studying, you are doing this

Do you know what is the thing that people will never tell you

That you are blessed, no one will tell you that you got

Sigma web development course, you are living in such a time

In which you are getting such a good comprehensive course for free

No one will tell you that you are blessed

People will tell you that I am going to watch a movie

You are studying, what is it, you are so boring

People will tell you this, but no one will tell you that you are blessed to find this course

And you are blessed that you are watching

You are blessed that you are not getting distracted

And in the coming time when you will look back

Then you will realize yourself that how blessed I am

I myself say that I am so blessed that I studied at the time of IIT JEE In the same time, you will realize that you are blessed.

I myself say that I am blessed that I studied during IIT-JEE, IIT-JEE, so much happened, all things changed.

No one will tell you that it's worth the sacrifice that you are doing.

I am telling you that all the people who have got success in life, they have sacrificed.

Take anyone's name, they have sacrificed somewhere, they have made a big something. And people will never tell you that

This sacrifice is worth it.

So keep working hard, you are doing great.

Don't think that you are missing out.

I should have got 4-5 hundred rupees worth of notes.

But no problem, let's move ahead.

I will add a color to the span.

I will write span and add background color.

I will add blue and violet.

I will reduce it a little.

I will click and hover it.

Now you will see that it has highlighted it like this.

So that's all for this video.

I hope you understood the difference between inline and block elements.

Access the playlist.

Like the video.

Please access the code.

Give your village land to me. Thank Also, please like and share this video. Thank you so much for watching this video.

I will see you next time. Bye!