HTML Tutorial for Beginners 13 - The div Tag

Yo Ninjas! In this HTML lesson we're going to take our coding skills up a notch and introduce the mighty DIV tag!! This is a versatile HTML tag that can help to organise your code and provide useful when we style our pages in CSS!
Beware ninjas - do not be too gung-ho with the div tag and use it everywhere! There are newer, HTML5 semantic tags which we can use in conjunction with our div tags to make our pages even better! Look out for my HTML5 course in the future :).

[@ClaraSais]

That’s great - I’m just learning HTML and CSS, trying to get my head around DIV tags. It’s so much easier for me to learn by visual rather than just reading instructions. Thanks

[@firsttimegamingfirsttimega428]

me 2 mate.

[@and_still.]

So where are you now in your journey of learning did you got any job

[@mrbfortuin]

hey i just saw your comment now... how has the coding being going for you after 2yrs?

[@mrbfortuin]

hey i just saw your comment now... how has the coding being going for you after 2yrs?

[@nahomdesta1237]

Same here

[@ellenniles660]

Thank you very much for a quick, yet detailed listing of why div tags matter. -Dividing sections for organizational clarity -For use in CSS to come -Semantics and naming convention separation

[@sankaranarayanan901]

Thanks for summarizing it.

[@ellenniles660]

@@sankaranarayanan901 Glad you found my summary notes helpful 😊

[@HarikaShivva]

Wow, i cannot believe a video that is posted 8 years ago is sooo easy to understand and clear, really good explanation ! (2024 btw)

[@RameenFallschirmjager]

"I'm here back in the index file exactly where I left it off last time" - a Ninja poem!

[@vaishnavikollimarla6635]

It is good but want to have a look of output

[@sakthivel-oy4cg]

exactly

[@voronaizlissabona]

because on this stage, nothing is visually chaged on the website he is creating. As he said, inserting divs by itself will not produce any visual effect on a website...only adding to it a CSS option will produce an effect so you can see it.

[@user-jy9tg5lg5n]

@@voronaizlissabona That is right.

[@najda9237]

I would comment the same.

[@teebz4811]

And what's , and then used for?

[@simpsot_]

i like how you even go into what keybinds you make...great tutorials man

[@NetNinja]

Thanks, glad you like :)

[@nompumelelongoma5833]

i love it , but if would've worked better for me if i saw the end results

[@anasanam6446]

He said there would be no visual effect but it will come in handy when working with CSS and it makes it easier for u to come look at it again

[@xigong3009]

My notes: div creates divisions of the contents in HTML. This will come handy when combined with "class" and "id"

[@beepboopgpt1439]

Great help to this confusing tag.

[@pink221]

Thank you Net Ninja! It is refreshing to see a video so clear and straight to the point.

[@larryqcumber3705]

Hi i've been following this toturial and i can easily understand it. Great toturials! Keep it up

[@justchris846]

Shawn, Excellent tutorials! If you haven't or haven't considered it, you should do tutorials on languages Such As Java, C++, and C#. as detailed as you get in these web series, you'd undoubtedly amass quite the following for anyone wanting to learn programming. Java would be an excellent place to start. Thanks for these tutorials bro!

[@rarestaiden185]

spoiler alert he dose

[@beenmicrophone5817]

@@rarestaiden185 spoiler alert, u smell like farts

[@Furkanh66]

@@beenmicrophone5817 Spoiler alert, you are toxic

[@beenmicrophone5817]

@@Furkanh66 spoiler alert you spoiled ur pants

[@Furkanh66]

@@rahel7443 spoiler alert: You broke the streak. thank you

[@ClaraSais]

Why and how do you indent code please?

[@homerthompson6028]

Hi I'm new to html but... shouldn't the contact info go in the foot instead of the bottom of the body?

[@bh-doublel1764]

Hi I have a very important question : why don't you use , , tags for split up your page in different sections? Does div tag has no semantical meaning? ... Thank you for your answer

[@xfire3778]

BH-DoubleL you’re welcome

[@Munchkie]

You can use that instead of divs. People use divs for grouping content, therefore it's easier to style it because of usage of div tag. I THINK. IM UNSURE. These videos are not explaining at start when to know to use them. I heard its easier but why? I dont know why people use divs instead of semantic tags. BEause semantic tags are more efficient instead of using div's and giving class names. I guess because there are limited semantic tags. so, they use divs as replacement maybe.

[@TheBlueMahoe]

@netnija, now that i am near the end of the videos ,can you recommend some basic HTML tutorials and exercises I can complete and a few mini projects

[@shintarojokagi946]

What extension is it that shows what line you selected?

[@Meet_Umar]

is using tag is a good practice in html5 beacuse i have heard lot about it and it is not recommended

[@douggreene9669]

Excellent explanation, thank you!!

[@olanrewajuolawalewilliams1423]

You explainedthe $ out of this, been searching for 2days and you broke it down like 1+1 thank you. .

[@deborshikashyap6745]

When u type something it sounds like u r hitting the table

[@karunapandey555]

Which type of code editor do you use ? :)

[@thegiverr]

What is your recording application? I use OBS Studio and I want to use transition effect like this, from this tab to that tab. My OS is Windows 10

[@dianaawino]

Thanks so much for this straight forward explanation👌👌💥💥

[@okoyeemeka9815]

Thank you very much. Still watching in 2023

[@NetNinja]

[@moorland6735]

2:41 he didn't indent line 47. The OCD in me is killing me.

[@ClaraSais]

Moorland Hi! New to coding, why and how do you apply indents please?

[@fatenissa5189]

Can you please add tutorials explaining in it html 5 and css 3 Thank you alot

[@gavin_almeida]

This was such a good explanantion! Thank you!

[@guardian218]

Is using the 'div' tag about the same as using the 'section' tag?

[@amazingproduct5018]

Thank bro.This information really helpful ! keep it up man !

[@gioestrada4652]

Thanks for the tutorial. You explained it well.

[@effortlesscoding6108]

VERY INFORMATIVE AND EDUCATIONAL. SUBSCRIBED AND WAITING FOR MORE.

[@laurendayan8494]

Why didn't you tab the About Us?

[@cal9653]

He just didn't realise he hadn't!

[@iLoveTurtlesHaha]

Tab is only for us humans to read code better. The browser doesn't care about this. Like the prev commenter stated, he could have simply missed this.

[@prathish3169]

Thank you bro im more confused while coming around div but your video Gave me clear and sharp understanding 👏👍

[@NetNinja]

Awesome, thanks Prathish!

[@jacquelinewalker6357]

so glad your not using fancy words. now i understand

[@irvinargon]

Great vid

[@phillipmakris7345]

i still dont get divs. They dont effect the structure of the html, they dont style, you can just skip a few lines to show different sections of code.....so why do we need divs?????

[@PilaPlanet]

Not sure if you know CSS but you can use DIV tags to style a certain portion of your website instead of your whole page. Let's say you have a paragraph on your home page that you want the text to be PURPLE. You will use a DIV with an ID tag to distinguish that specific paragraph without changing all other paragraphs you have. I hope that helps.

[@williamparrish2436]

Divs are the most important tag that exist. They are odorless, colorless, nothing but form. But form and structure are all you need. Every other tag is like a div tag but restricted in some way. Divs are free of restriction. Anything you can do with a normal tag, you can do with a div (speaking about block elements, but also inline too). The question you really want to ask is, how do I use divs when building software UIs. And the answer is, since everything in the UI is made of squares. down to the pixel, and divs can be controlled down to the pixel, with divs you can control EVERYTHING you see in the UI. I think because of the history of HTML, CSS, and JS people get confused about the tools of HTML and why they are used. All those other tags that everyone shows you when you first start learning? Use those to build websites that display information. But do you want to create software and just happens to have a UI using HTML, CSS, and JS? Do you want to do full stack JS? Then use divs. That is the difference in the simplest way I can think to describe. All those old tags that everyone drags out and fills videos on are useful for writing and copy creation. But the web has CHANGED. It and the tech that created it can now be used to build software. And using divs, classes, event listeners, and DOM scripting is how that is done.

[@fft2020]

so... basically the DIV tag has absolutely no purpose except confuse everyone...

[@mohamedfadaly7223]

Seems it will be useful when including CSS, to avoid confusion of what a certain CSS belongs to, it's better to create groups inside an HTML hence the DIV tag, still learning through too.

[@mouadouan]

u ll need divs when it comes to CSS. when u apply some style to a div it affects the whole block, so imagine having some blocks with different styles .. that actually add some structure ! there's also the Nav tags, check them too :)

[@AprilFaith]

thank you!!

[@EmmainthePNW]

Very helpful thank you

[@mohamedahmed996]

Have been on the grind for 2 weeks now. I will update you guys periodically to update you on my journey.

[@clueloss5373]

very good, Im only 12 and starting out to code thank you alot!

[@happyemoji6553]

only 12? are you sure? 12 year olds don't say "I'm only 12" because they don't think they're very young and they don't use comas or punctuation in general.

[@happyemoji6553]

I'm only 29. How does that sound?

[@clueloss5373]

13 now

[@clueloss5373]

@@happyemoji6553 They do?

[@happyemoji6553]

Not Matrix no they don’t

[@huzaifamemon9956]

what will happen if i didn't give a tag

[@felixwang9648]

If you dont add a tag but add no css, it wont affect anything

[@IbnAnwarAli]

From my practice declaring class and id without div tag worked and usable in css, for example when you declare the class in h1, it still functions as it does with div tag

[@TheBearCoder]

Thank you for this amazing video :)

[@michaelmiletich3326]

I needed this!!! Thank you!

[@TeckbuildsInfotech]

Thank you 🙏

[@xcload-learningofficial9266]

I've been coding for about a day & I'm really trying to get average

[@alinaciobotaru7030]

Thank you! It was useful 👍

[@gooo1762]

Thanks!

[@ivanyosifov2629]

Where is the HTML5 course? Can't seem to find it!

[@juboraj365]

With respect please !

[@davidallsopp4030]

Excellent video!

[@chansolkim3609]

Thx bro it's help me a lot 🙏🏻

[@EMR80]

Is there another reason to use div tags? I read somewhere, you can also use divs to position content as well. That was confusing to me because, I was wondering why is this div nested in side of another div? OMG! Did a Light bulb, just go off in my head? Or some brain cells grow back.

[@EMR80]

Can someone Clarify this to me? Layout is so hard for me to understand?

[@griffinbastion]

@@EMR80 within css you can manipulate the actual look of the website and if you give div an id it will automatically turn all content to that style

[@richardbassey4916]

I wish I knew that div just meant division. Now it seems a whole lot easier to read code cos I know

[@theinternet999]

reLearn html, see u (myself) again in 4 years.

[@kristaa8745]

thankyou

[@matthewp9414]

Thank you!

[@vunderstudios]

thanks

[@hydrusyyen]

Please show results every changes sir.

[@jerrybarr259]

Great video cheers

[@fritzrojales]

what app or website do you use to code?

[@DamianSzajnowski]

Brackets, watch the playlist in order, he explains that.

[@fritzrojales]

@@DamianSzajnowski thanks

[@stigmanmagros4952]

Where is this html5 course xd

[@mariamzayed91]

💙💙💙

[@cyclicwarrior2570]

I will subscribe to the videos sure

[@NetNinja]

Thanks!

[@miikoa]

very helpful. Thank you

[@NetNinja]

Thanks Miiko, glad it was helpful!

[@boblewis1287]

TY

[@aliaydemir7309]

can someone explane i still dont understand

[@PieterJacob]

OCD started to kick in at line 47…

[@valencefootball9740]

BRACKETS?!

[@odam2975]

#thx

[@vipergun1383]

thats not a good way if u dont show example

[@dygcchjghcugfh662]

I'm sorry for watching this the intro scary movie

[@markton2192]

What the h my name is div

[@goldie12577]

Great but no output

[@netskater4454]

Output not needed because nothing has changed. Div is used to organized the code so later on, you can choose to style/edit it with CSS.

[@someless]

This man, shouldn't be a teacher😢😢

[@gajularakesh7576]

nothing......

[@s.padhmapriya_8thwonder_153]

lots of doubt uncleard, atleast u have to show the output(waste of making this video).please learn to make output mr.youtuber

[@oldguy8177able]

rubbish

[@iLoveTurtlesHaha]

Your feedback is not very helpful as it gives no basis on what you find wrong. As a person getting into development, you need to be more intelligent than this or you will fail in this industry. No one is able to help you when you cannot form a coherent sentence to express your ideas.

[@Dailydoseofreddit.]

really? try it making a tutorial and please let me see how good it is by sending it to [e-mail]

[@marcelo25758]

Thank you!