HTML Tutorial: Inline & Block Elements | Web Development Tutorials #9 (2024)

Now, I'll, tell you about inline and block elements, which is a very important, topic., Without, wasting any time, we'll make a tut9.html file and I'll quickly apply HTML boilerplate to it, something like this.

I'll set the title to Inline and Block elements.

And before we start, I, keep telling you to access the playlist because a lot of people watch videos from the middle, which is not right.

The right way to watch is to watch them step by step as I've already explained things, which you'll miss.

Watch it if you're an absolute beginner.

And even if you know, I guarantee you that you'll learn new things., I have a few videos' time.

And then I'll start advanced subjects.

For, absolute beginners to understand them, I'm making everything step by step.

Here, I'll, explain Inline and Block elements to you.

If, I, write a paragraph here, and I write.

This is a paragraph.

If, I press, ctrl + S and go live.

Then you'll ask me, why I'm wasting time, it'll display.

This is a paragraph.

No, that's.

Not my point.

I'm explaining something else.

If I write.

This is also a paragraph.

Then what will happen? It's in a different line, I'd written it here, itself.

If, I, take it here, in this way.

It's, still in the same place.

It's in the same place after reloading, too.

I want.

This is a paragraph to be here.

And this is a paragraph to be in the same line.

Why did this is a paragraph jump to a different line? I want them in the same line.

I want to tell you that paragraph is a block.

Element.

Block element means it takes up the entire width.

Any element that is next will be after it., If I span, this paragraph, and span this as well, then see what happens.

There's.

This is a paragraph.

And this is also a paragraph This happened because span tag is an inline element., That means.

It can be in a single line., If, I, write strom in this way.

There's.

This is a paragraph, I'll make it.

This is a span.

If I, write it in this way.

I'll, make it span.

Wherever, I click while pressing alt, my cursors will be formed there.

See.

How I do this.

I made a mistake, here., Write span here.

And as soon as you do that, see this., Basically, I, should've written span instead of paragraph and I completely messed.

It up.

Anyway.

It doesn't matter.

I'll quickly, fix it.

And I made it.

This is also a span.

So, span-span, twice., See this.

This is a span.

This is also a span.

What are they?.

They're, inline, elements., That's.

Why they're in a single line.

These are block elements.

Here, I'll.

Do one thing.

What will I do? I'll.

Add a border.

Border? What's, a border? I'll write something which you don't have to focus on.

I'm applying style.

Here.

I haven't taught.

You CSS yet.

I'm, adding a red color border to it.

You'll say that I haven't taught borders.

So why use it? But ignore this tag for now.

We'll come to CSS.

If.

You know what it is,? Let me tell you it's, style., It's, not recommended, I'm using inline CSS.

Let me use toggle word wrap.

So that I don't get a horizontal scroll bar., So, I've, given it a red color, border., If I, show it to you, there's, a red border.

Here.

Let me make the first one red.

And the second blue.

So doing style = this gives us a border.

That's.

All we need to know for now.

I did style = this.

In span.

Also, I'll do span = this., I'll press, ctrl + S to save and see this.

These, two red lines, here., Inline elements, take up as much space as they need.

Block elements.

Take up the entire width.

Paragraph is a block.

Element.

Span is an inline element.

I'll show you more examples.

Just, get that block elements take up the entire space, elements that take only their space are inline.

That's all for now.

If I make this a div, then see what happens.

Nothing happens.

If this is a div.

I think I, didn't, close, div, here., Div, div, okay, I should write div here., On doing div, it's exactly the same.

But if I make it ul, instead of div.

I'm, just trying it out.

Ul is not a fair tag as it's necessary to have li in ul.

So, here, I'll, write strong., I'd, discussed strong.

The one that makes it bold.

See.

This only took up this much space.

But because its next element was a block element, that's.

Why it took up a new row as you can see.

As.

We practice more with projects, you'll understand it better.

I'll show you anchor, tag., If, I used anchor, tag.

That is added an a here.

I'll place, a tag here, not here, in this span.

Not.

This span, sorry, this paragraph.

Basically, I'm using a instead of p.

As soon as I do that, see, this.

They're all in the same line.

A is also an inline element.

That's.

Why everything is in a single line.

So,? What to do if you want? Everything is one line?, Use, inline elements, or using CSS, convert block elements to inline.

This can be confusing.

I, completely agree that this can be confusing.

And.

The reason I introduced this was because I kept saying, inline, block, inline, block.

And this is important to know at this point.

We've reached the 9th tutorial.

It's important for us to know, what's, inline and block., And I.

Hope, this video addressed this., So, I want to give you a quick quiz., For, this, first, write challenge accepted below.

And.

Then you have to tell me whether li, ul are inline elements or block.

Elements., I'll, write them.

Here.

Tell me about li.

Then.

Tell me about the em tag.

Tell me for div, even though I've told you in this video.

But, you guys tell me.

And with that.

This is enough.

I think this is good.

I've told you about anchor, tag, too.

If.

You tell me this much, I think that's enough.

Tell me about img.

Too.

Img is obvious, but see and tell me.

So, I hope you understood this video.

You'll feel confused about why I introduced style.

We'll understand it step by step, I'll explain the syntax.

For, now, I've, directly used it.

So you guys have to consume it that way for now.

When we'll, learn CSS, I'll explain how I did this.

So, I hope everything is clear to you.

This.

Video's point was only the difference between inline and block elements.

If by any chance, you haven't, accessed this playlist yet, kindly, bookmark it and click, save.

Make, this playlist your own.

So that you watch these videos, step by step., Please don't.

Watch these videos from the middle.

Otherwise, you'll, ask questions, I've already, addressed.

So.

My answer is to watch these videos.

Step by step.

That's, why I'm saying, whether you're a beginner or you write advanced level, HTML, CSS, JavaScript, etc, even then complete.

This course.

I guarantee that you'll learn something new.

So, I hope, you're enjoying these videos.

Tell me in comments, how you find this video series, That's all for this video.

Don't, forget to like this video.

Thank you so much guys for watching this video and I will see you next time.

HTML Tutorial: Inline & Block Elements | Web Development Tutorials #9 (2024)

FAQs

How do you make an element inline or block in HTML? ›

block and inline values

You can set a block-level element to display like an inline element by setting the display property to inline. You can also cause inline elements to behave like block-level elements using the display property.

Keep Reading ›

What are inline and block-level elements in HTML? ›

A block-level element always starts on a new line and takes up the full width available. An inline element does not start on a new line and it only takes up as much width as necessary. The <div> element is a block-level and is often used as a container for other HTML elements.

Show Me More ›

What is the difference between inline-block and inline-block elements? ›

inline The element doesn't start on a new line and only occupy just the width it requires. You can't set the width or height. inline-block It's formatted just like the inline element, where it doesn't start on a new line. BUT, you can set width and height values.

Read The Full Story ›

What are inline HTML elements? ›

Inline elements display in a line. They do not force the text after them to a new line. An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.

Show Me More ›

What is an example of an inline code in HTML? ›

HTML Inline Elements

An example of an inline element is the <span> tag. Some examples of inline elements are: HTML <a> tag. HTML <input> tag.

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

Difference Between Inline and Block Elements in HTML

Inline elements only cover the space as bounded by the tags in the HTML element. Block elements have top and bottom margins. Inline elements don't have a top and bottom margin. Examples of block elements - <p>,<div>,<hr> .

Show Me More ›

What is an example of an inline block element? ›

Example of Inline elements:

<span>, <a>, <code>, <strong>, <img>, <cite>, <button>, <input>, <textarea>, <select>, <small> are some of the inline tags.

Get More Info ›

What is an example of inline block? ›

Inline elements don't start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <span> , <strong>, and <img> tags.

Keep Reading ›

What is an example of a block element? ›

Block Elements

For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements.

When should I use inline-block? ›

An inline-block elements will respect a width .

People used to¹ build column layout systems with inline-block , because it basically can do what floats could do here, except without the need to worry about clearing the float², allowing people to take advantage of wrapping which happens a bit more elegantly than float.

Explore More ›

Why do we use inline-block? ›

The inline-block property in CSS is used to display list items horizontally instead of vertically. It can be used for buttons, wrapping text, centering elements etc. It is a quick way to make a list go horizontal.

Learn More ›

Is a div a block element? ›

In summary, a <span> element is used as an inline element and a <div> element as a block level element.

Tell Me More ›

What are the three inline elements in HTML? ›

Inline elements occupy the space as needed within the space defined by the main element. Unlike block-level elements, they do not begin on new lines. Some of the inline elements are <a> , <span> , <img> , <code> , <cite> , <button> , <input> etc.

Learn More ›

What is HTML programming language? ›

HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content.

How to create a list in HTML? ›

In HTML, we can create an ordered list using the <ol> tag. The ol in the tag stands for an ordered list. Inside each of the ordered list elements <ol> and <ol /> , we have to define the list items. We can define the list items using the <li> tag.

How do you make an inline in HTML? ›

First, we will create a basic HTML code for the div elements and apply different CSS styling to make it display inline. CSS properties: In this article, we will use below CSS properties. Display: We will use display: flex and display: inline-block property to show div elements inline.

Show Me More ›

How do you add inline in HTML? ›

It goes inside the element's beginning tag, right after the tag name. The attribute starts with style , followed by an equals sign, = , and then finally uses double quotes, "" , which contain the value of the attribute.

Show Me More ›

How do you make an inline space in HTML? ›

You can add space in HTML to any lines of text. You can use the   HTML entity to create blank spaces in both paragraph text and text in tables, for example. Since there is no blank space keyboard character in HTML, you must type the entity   for each space to add.

Keep Reading ›

How do I make a div element inline? ›

If the user only needs to write text in the div tag, you can use the span tag, since all span elements are displayed inline by default. The main difference from display: inline is that you can use the display: inline block to set the width and height of an element.

Know More ›

HTML Tutorial: Inline & Block Elements | Web Development Tutorials #9 (2024)

Introduction

Content

FAQs

How do you make an element inline or block in HTML? ›

Why do we use inline-block? ›

References