Divs vs Spans

[@MrRaper921]

That voice, start a podcast already.!!

[@drakecoleman9364]

dude yessssss

[@theuseraccountname]

I'd listen to that.

[@meisterunner]

I'm embarrassed to say but I've been a developer for a couple years now and now I actually know the difference between these two... In my defense I do not like front end development and avoid it as much as possible. Thanks again.

[@pinkleprechaun52]

Precise, Accurate, and Easy to follow. Best explanation for Div and Span ever. Thank you so much!

[@Defrost2157]

I didn't realise there was such a big difference. Thanks for explaining so clearly!

[@Gustavo_Rojas]

watching in 2020 and I learned two things. div vs. span and the shortcut to create multiple lines! Thanks!

[@marialediaeva4848]

Thank you Steve for short & clear explanation ! Greatings from Russia!

[@SteveGriffith-Prof3ssorSt3v3]

Здравствуй!

[@Adam-nw1vy]

The voice, the succinctness, the perfect illustration. This is a piece of art.

[@redmor]

Your channel is a gold mine, truly! Great explanations, sweet calming voice and lots of content! Thanks for the explanations :P

[@StardustBruno]

I had to pause the video. I had to come here and say your voice is so nice it makes it hard to pay attention. Now, back to the video.

[@ekramfarhad]

I was looking for an essay explaining to know what they are. Finally I got it. Thanks

[@DenzelBraithwaite]

Perfect explanation, thank you. I see them used interchangeably so this really clarified the one difference.

[@reganpiering7307]

Thanks very much for this excellent explanation! Deeply appreciated. I am new to the web dev scene and I found this very helpful!

[@mohitbhardwaj4243]

This is a splendid video , explained everything with amazing examples and clearly understandable voice you have sir. Thanks for this amazing video to share with us. Would love to follow you channel and learn more from you.

[@ivnski6816]

finally someone that can explain and show example not just talk thanks

[@kuntakinte7687]

Best explanation by far! Thank you mr Steve Griffith

[@wilpasssion]

I was very confused about the difference between them... Ur video helped me a lot. Thx so much!

[@jtnkathuria]

Thank you and you voice is very very nice... You can start a podcast.

[@evothenew3333]

Short and to the point, thanks a lot.

[@justantonee]

That is simple and easy to undestand. Thanks man. (Y)

[@sakura-zr9xu]

Perfect explanation- this cleared the difference up for me. Thanks!

[@mysticaltwinsmusic3315]

Thanks sir! This will really help me a lot in my office work!

[@venkateshkalimuthu425]

simplicity is the way to explain. Thanks to you :)

[@filberful]

Thank you for the shortcut lesson at 1:32

[@RobisHaTa]

well done very well explained ! Give this guy some love thumbs up!

[@grzegorzmolin]

Thank you so much for the video, helps a lot! I have also a little constructive criticism - I recommend putting your mic a little bit further and secondly using pop filter. It would improve overall experience from your videos for your audience that uses headphones:) As audio is concerned, you have absolutely epic voice! Again, thank you for your work.

[@SteveGriffith-Prof3ssorSt3v3]

Videos that I made years ago were with a cheap mic. New ones are with good mic and pop filter

[@luchoportuano7729]

Thanks m8, very informative and easy to understand. Greetings from spain and have a nice day :D !!!

[@elizawalker790]

Oh i like the explanation with illustration ! Thanks ! :)

[@mehdibouchene3208]

beautiful explanation and voice thank you

[@taulantisaku4688]

Great explanation, keep it going ! p.s how do you use that triple span*3 ? it's just amazing !

[@SteveGriffith-Prof3ssorSt3v3]

In brackets it is the emmet plugin. In VSCode it is built in. I have a video on the Emmet plugin - kzbin.info/www/bejne/qoWyfJZ5rryhfqc

[@mira1711]

Thank you very much for the clear and easy explanation ☺️😊😊😊 ....

[@kzzazzip6272]

very well explained also nice voice bro lmao thank you

[@Becca_Lynn]

Very helpful explanation, thank you! 🙏 😊

[@rlyehdate]

Thanks a lot, that's exactly what I needed!

[@LotfiOR]

Thanks Steve! That was very helpful!

[@pritammehta7770]

thanks from India

[@SteveGriffith-Prof3ssorSt3v3]

Happy Diwali from Canada

[@mrreinark3388]

There are elements that seem like they do the same thing to me, such as and or and . What are the differences for these things, are they specifically meant to be altered through css?

[@SteveGriffith-Prof3ssorSt3v3]

As I was explaining in the video, they have no semantic meaning. They are empty containers - one is a block element and one is an inline version.

[@LucianoClassicalGuitar]

Nice. I was confused by the use of span on the C in CSS means cascade video.

[@bongamandla2925]

this video helped me very much thanks

[@sizwemnamathi3736]

Thank you for the video it was very helpful : -)

[@lalli_laraib]

Thank now i understand clearly

[@lewisburton1852]

maybe this is a dumb question but where did that sky blue come from after you added the tag? I don't see it in your CSS styling. Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

That was something that Brackets did when serving live pages. If you moused over the html in Brackets it would highlight the element in the browser. Chrome does this with its dev tools as you interact with the HTML elements

[@lewisburton1852]

@@SteveGriffith-Prof3ssorSt3v3 thanks!

[@theonef570]

I feel like Divs and Spans are just not necessary to use. If you want to separate the texts why cant you just use in every line.

[@SteveGriffith-Prof3ssorSt3v3]

A p tag has semantic meaning attached to it. It is a paragraph. Divs and span have no predefined meaning. There are millions of interface components and layout areas that have been built using divs and spans. They are definitely necessary.

[@chippiko]

Very clear... Thanks

[@chathuskamahanama7606]

Thank you..!!!

[@Amermurshed]

smooth and easy.Thank you

[@goldensleeves]

Great video. How did you write "div" and then immediately turn it into a tag? Some kind of shortcut? Thanks

[@SteveGriffith-Prof3ssorSt3v3]

It is a plugin/extension called Emmet in Brackets. In VSCode it comes preinstalled.

[@md.shohanurrahman5266]

thanks for the information.....

[@YelaDuck]

Thanks huge

[@olympiailiadou4937]

I love the cat!

[@sharoffhaashim4488]

Thank you very much

[@Venezuelangel]

I'm liking this for future reference cuase I had never seen that sort of shorthand for creating several elements of the same type with inner text in them. Now, what you're writing in them (spam! and div!), would that count as innerText, innerHTML, or am I just asking a dumb question?

[@SteveGriffith-Prof3ssorSt3v3]

It could be either .innerHTML or textContent. With the curly braces it is text. Without curly braces you are creating elements... so innerHTML

[@HylianEvil]

Great job!

[@awalabdulnoor]

The ×3 span trick that you did, can you apply that to other elements?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. In Brackets that was the extension called Emmet. It is built-in with VSCode. Short snippets writing CSS selectors will generate the html

[@giorgikilasonia9972]

I have a question regarding Divs and Spans. Even though Div is a block element and Span is an inline one when I put a block element tag within the Span it converts to a block element. Is there a way to keep the span as an inline element all the time? and why the same rule does not apply to divs also? For example, an inline element will be nested inside the div it still will be a block element, unlike a span element.

[@SteveGriffith-Prof3ssorSt3v3]

The span is still an inline element. The div just stretches open forcing it to fill the available width. Technically the standard says that you are not supposed to put block elements inside inline ones. But the browsers have to deal with developers and the strange things they do.

[@jasonmwenyo8621]

Thank you!

[@PawnDracula]

Thank you Sir

[@TakiTarik]

Hey i hope you'll reply but i'm a beginning developer i've been in classes for a week now and we have to use the span element to highlight 2 different words in a text the word hero and superhero like this is what i have so far

[@SteveGriffith-Prof3ssorSt3v3]

The div has nothing to do with the solution. Remember that all elements have an opening AND a closing tag or they are self-closing (with no text content) like . If you have two spans then you need two opening and two closing tags. SuperHelden Then put your CSS in a style element in the head OR better, in an external CSS file. In my example I gave them each a CSS className. I can use those classnames to target and style each span independently. If you look at the CSS playlist on my channel homepage you will find lots of videos about CSS selectors etc.

[@TakiTarik]

@@SteveGriffith-Prof3ssorSt3v3 Ohh i see thank you i will try this out

[@Ntifragility]

Thanks. Just a question, How do you make the browser to update automatically?

[@SteveGriffith-Prof3ssorSt3v3]

In Brackets it is the live preview feature. In VSCode I use the Live Server extension

[@md9936]

hey thanks a lot your class helped me, do you have something about CRUD with PHP and JS please ?.

[@SteveGriffith-Prof3ssorSt3v3]

I have a playlist on PHP another on AJAX (uploading data) and then hundreds of other JS videos with related information. I don't have a course yet where I go through CRUD operations but I am planning some courses for this summer. The server-side will be NodeJS though, not PHP.

[@lewiswege160]

Wow what text editor is that.

[@SteveGriffith-Prof3ssorSt3v3]

Brackets. It is an editor from Adobe. It's like an early version of VSCode. I used it for years before VSCode.

[@oluwadamilolaakanni8178]

Thanks man!

[@cianliddy8639]

Bazinga!

[@itz_28]

may i ask which text editor are you using?

[@SteveGriffith-Prof3ssorSt3v3]

Currently I use VS Code

[@itz_28]

@@SteveGriffith-Prof3ssorSt3v3 is that the same one you used in this video?

[@SteveGriffith-Prof3ssorSt3v3]

@@itz_28 That was Brackets that I was using up until a few years ago.

[@itz_28]

@@SteveGriffith-Prof3ssorSt3v3 thank you

[@zakhariihusar6975]

If i add in my css flex direction column or row, it doesn't really matter what type of container I use?

[@SteveGriffith-Prof3ssorSt3v3]

Not really. It will change the display value to flex from whatever it was. However, in terms of semantics a div would make more sense to use as a flex container

[@zakhariihusar6975]

@@SteveGriffith-Prof3ssorSt3v3 thank you for explanation!

[@DojoDyo]

awesome thank you!

[@ayushpatel2171]

I have a question Then why do we still create rows and column div tag and use gridline system

[@SteveGriffith-Prof3ssorSt3v3]

Grid systems are a design approach to layout. They have nothing to do with the HTML elements you choose and whether or not they are block or inline. You can use display: flex or display: grid to create your layout. OR you can, as was done for 15 years, use float to create columns. All of these approaches could use any tag as the container. However, if you are not applying any of these other properties to the div or span then you need to understand that one is display: block and the other is display:inline and what that implies.

[@saadrehman3156]

IF i supposed to put (h) tag and (p) tag inside the span, then why it does not stay in the same line as span is their parent element.

[@SteveGriffith-Prof3ssorSt3v3]

You should never put headings or divs or paragraphs or other block elements inside a span.

[@saadrehman3156]

@@SteveGriffith-Prof3ssorSt3v3 Thank you so much Sir, much appreciated ♥️

[@SewnathGreedharry]

Thanks.

[@patrikcermak7662]

THX !!!

[@antoniuskonovalov]

Is there a cat sounds in the background?

[@SteveGriffith-Prof3ssorSt3v3]

and dog. :)

[@antoniuskonovalov]

@@SteveGriffith-Prof3ssorSt3v3 ahahaha, cute!

[@bukszpryt_]

thanks

[@webb-developer]

✅

[@yasoou]

damn that was good.

[@eslamerfan480]

What's the name of os system

[@SteveGriffith-Prof3ssorSt3v3]

What OS system?

[@t6hp]

I think that's MAC OS. It's probably a Macbook. You can get a similar UI using elementary OS if you don't want to spend the money. It's a Linux distribution.

[@mohamedelharchali8069]

griiffiiiiiiiiiiiiiiiith

[@ognjenstevic8637]

1:47 a cat?

[@SteveGriffith-Prof3ssorSt3v3]

Probably. The kids, the dogs, the cats. They hide in wait until I start recording.

[@ognjenstevic8637]

@@SteveGriffith-Prof3ssorSt3v3 I love it man! Anyways, your video is awesome and it helped me so much. The way I had found your video is through my university lessons. In our online lessons there's your video. Be proud man, and keep going!!! 💪💪💪💪

[@SteveGriffith-Prof3ssorSt3v3]

@@ognjenstevic8637 cool. Which university?

[@kotvicz]

cool and fast

[@raigeki.]

this guy sounds like iron man

[@davidaudemars6695]

voiceeeeeeeeeeee

[@dweya2474]

Bro stop codding! go in hollywood as voice artist

[@SteveGriffith-Prof3ssorSt3v3]

Why not both? :)

[@wilpasssion]

I was very confused about the difference between them... Ur video helped me a lot. Thx so much!

[@svetabodrug9710]

Thank you!

[@wilpasssion]

I was very confused about the difference between them... Ur video helped me a lot. Thx so much!