The HTML division tag, called "div" for short, is a special element that lets you group similar sets of content together on a web page.
Search
Submityoursearchquery
Forum
Donate
KoladeChris
TheHTMLdivisiontag,called"div"forshort,isaspecialelementthatletsyougroupsimilarsetsofcontenttogetheronawebpage.Youcanuseitasagenericcontainerforassociatingsimilarcontent.
Thedivtagisoneofthemostusedtagsanddoesn'tseemtobegoinganywheredespitetheintroductionofsemanticelements(theseelementsletyouuseseveraltagsasacontainer).
Inthistutorial,Iwillshowyouthevariousthingsyoucandowiththedivtag,howyoucanusemultipledivsthesameHTMLfilewithoutgettingconfused,andhowtostyleit.
WhentoUsethedivTag
Thedivtagismulti-purpose–youcanuseittodoseveralthingsonawebpage.You'llmostlyuseitinweblayoutsandCSSart,butit'ssuperflexible.
Ultimately,you'llalmostalwaystouseittostylewhateveritcontainsormanipulatesuchthingswithJavaScript.
1.UsedivinWebLayouts
You'llprimarilyusethedivtagtogroupsimilarcontenttogethersoyoucanstyleiteasily.Agreatexampleofthisisusingdivtogroupdifferentsectionsofawebpagetogether.Youcanputtogethertheheader,nav,sections,andfooterofapageinanindividualdivtagsotheycanbestyledtogether.
Laterinthistutorial,Iwilltakeyouthroughhowtomakeaweblayoutwithmultipledivtagswithoutgettingconfused.
Divitselfdoesnothaveadirecteffectonthepresentationofthecontentunlessyoustyleit.
2.UsedivinCSSArt
Withthedivtag,youcanmakevariousshapesanddrawanythingbecauseitiseasytostyle.
Howtomakeasquarewiththedivtag
Tomakeasquarewithdivtag,youfirstneedtodefineanemptydivtagandattachaclassattributetoitintheHTML.IntheCSS,selectthedivwiththeclassattribute,thensetanequalheightandwidthforit.
body{
display:flex;
align-items:center;
justify-content:center;
margin:0auto;
height:100vh;
background-color:#f1f1f1;
}
.square{
background-color:#2ecc71;
width:200px;
height:200px;
}
Howtomakeacirclewiththedivtag
YoucanmakeacirclewiththedivtagbycodinganemptydivintheHTML,settinganequalheightandwidthforitintheCSS,thenaborder-radiusof50%.
body{
display:flex;
align-items:center;
justify-content:center;
margin:0auto;
height:100vh;
background-color:#f1f1f1;
}
.circle{
background-color:#2ecc71;
width:200px;
height:200px;
border-radius:50%;
}
HowtomaketheNigerianflagwithCSS
MakingtheNigerianflagwiththedivtagisnotthathard.Theflagisarectangularshapewiththecolorsgreen,white,andgreen.
Tomakeit,define3divtagsandattachdifferentclasses,thenstylethemappropriatelyintheCSS.
.naija-flag{
display:flex;
}
.first-green{
height:100px;
width:60px;
background-color:green;
}
.white{
height:100px;
width:60px;
background-color:white;
}
.second-green{
height:100px;
width:60px;
background-color:green;
}
HowtoStylethedivTag
Aswediscussedabove,thedivtagisveryeasytostyle.It'soneofthereasonswhymanydevelopersuseittogroupsimilarcontent.
ThedivtagacceptsalmostallCSSpropertieswithoutaproblem.Let'slookatafewexamplesofthatnow.
1.HowtoApplyFontPropertieswithdiv
YoucanapplytheCSSpropertiessuchasfont-size,font-family,font-weight,andfont-styleoncontentgroupedtogetherwiththedivtag:
Loremipsumdolorsitametconsecteturadipisicingelit.Voluptatequo
ullammodialiasassumenda,itaquelibero?Quasquidemsintillo.
Loremipsumdolorsit,ametconsecteturadipisicingelit.Necessitatibus
ipsameaqueremdicta,quosquasipsum.
body{
max-width:900px;
display:flex;
align-items:center;
justify-content:center;
margin:0auto;
height:100vh;
background-color:#f1f1f1;
}
.font-properties{
font-family:cursive,sans-serif;
font-size:1.3rem;
font-weight:bolder;
font-style:italic;
}
2.HowtoApplyColorwiththeDivTag
YoucanapplytheCSScolorandbackground-colorpropertiesoncontentgroupedtogetherwiththedivtag:
Loremipsumdolorsitametconsecteturadipisicingelit.Voluptatequo
ullammodialiasassumenda,itaquelibero?Quasquidemsintillo.
Loremipsumdolorsit,ametconsecteturadipisicingelit.Necessitatibus
ipsameaqueremdicta,quosquasipsum.
.color-properties{
color:white;
background-color:#2ecc71;
}
3.HowtoStyleTextswiththeDivTag
YoucanapplytheCSStext-transformandtext-decorationpropertiesonadivtaglikethis:
Loremipsumdolorsitametconsecteturadipisicingelit.Voluptatequo
ullammodialiasassumenda,itaquelibero?Quasquidemsintillo.
Loremipsumdolorsit,ametconsecteturadipisicingelit.Necessitatibus
ipsameaqueremdicta,quosquasipsum.
.text-properties{
text-transform:uppercase;
text-decoration:underline;
}
4.HowtoCreateaShadowEffectwiththeDivTag
Youcancreateashadoweffectwiththedivtagwiththebox-shadowproperty:
Beforepayingtolearnprogramming,checkoutfreeCodeCamp.org
TheHTML,CSS,andJavaScriptcurriculawouldtakeyoufromzerotohero
inwebdevelopment.
ThereisaPythoncurriculumthatwillgetyouaconsiderableknowledge
inPython
AndanupcomingDataSciencecurriculum.
.box-shadow{
font-family:cursive,sans-serif;
background-color:#2ecc71;
color:white;
padding:10px;
border-radius:4px;
box-shadow:2px2px20px23px#7fecad;
}
What’shappeningintheCSSabove?
IwasabletocreatetheshadoweffectwiththeCSSbox-shadowproperty.
Thefirstvalue(2px)representstheoffsetonthex-axis(offset-x)
Thesecond(another2px)representstheoffsetonthey-axis(offset-y)
Thenext20pxisfortheblur-radius,thatis,howblurryyouwanttheshadowtobe.
The23pxvalueisthespreadradius(howfaryouwanttheshadowtospread)
Thelastvalueistheshadowcolor–inthiscase,#7fecad.
Theoutputlookslikethis:
HowtoUseMultipleDivElementswithoutGettingConfused
Divtagsarecommonlyusedtogroupsimilarcontenttogether.Inolderandevensomenewerwebpages,you'llfinddivsallaround,despitethefactthatsemantictagsarerecommendedforaccessibilityandbetterSEO.
Sincedivtagsarestillverycommon,Irecommendapplyingclassandidattributestothemsoyoucanmanipulateindividualdivelementswiththoseattributes.
Iwillwalkyouthroughhowtoputthisintopracticebymakingabasicweblayout.
Thefirstsectionyou'llwanttomakeistheheader,containingthelogoandnavbar:
freeCodeCamp
Home
About
Serices
Contact
Beforestylingthenavbar,ImadesomeCSSresetstomakethingsaligncorrectlyanddisplaynicely:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.hero,
.about,
.services,
.contact{
max-width:1000px;
margin:0auto;
margin-bottom:20px;
}
Inthecodesnippetabove:
Iremovedthedefaultmarginandpadding
Isetamaximumwidthforthemainsectionssotheydon’tgoallacrossforbetterUX
Isetamarginatthebottomofeachsectiontogivethemsomespace
Isetamargin0atthetopandbottom,autoontheleftandrighttocenterthem.
Tostylethenavbarappropriately,Iwillgrabthecontainerdivtagwithitsclassattribute,header.I'llgiveitadisplayofflex,alongsidesomeotherpropertiestolayitoutnicely.Iwillalsograbthedivwrappedaroundthenavbar(ulelement)byitsclassandlayitoutwithFlexbox.
.header{
padding:070px;
display:flex;
align-content:center;
justify-content:space-between;
margin-top:20px;
margin-bottom:20px;
}
.nav{
display:flex;
align-content:center;
justify-content:center;
gap:60px;
list-style-type:none;
}
.navlia{
text-decoration:none;
color:black;
font-size:1.2rem;
}
Fortheremainingsectionsapartfromthefooter,theHTMLandstylingsaregeneric:
HeroSection
AboutUs
OurServices
ContactUs
©2021AllRightsReserved
.hero{
background-color:#eee;
height:200px;
}
.heroh1{
display:flex;
align-items:center;
justify-content:center;
line-height:6;
}
.about{
background-color:#eee;
height:200px;
}
.abouth1{
display:flex;
align-items:center;
justify-content:center;
line-height:6;
}
.services{
background-color:#eee;
height:200px;
}
.servicesh1{
display:flex;
align-items:center;
justify-content:center;
line-height:6;
}
.contact{
background-color:#eee;
height:200px;
}
.contacth1{
display:flex;
align-items:center;
justify-content:center;
line-height:6;
}
.footer{
background-color:#777;
height:40px;
}
.footerp{
margin:0auto;
line-height:1.7;
}
Igavetheindividualsectionsagreyishbackgroundcolorandaheightof200px.Ipositionedtheh1tagsinsideintheircenterswithFlexboxandappliedalineheightof1.5toeachofthem.
Finally,Igavethefooteradeepergreybackgroundcolortomakeitdistinct,andcenteredthecontentinitwithalineheightof1.7.
Theresultinglayoutlookslikethis:
Conclusion
TheHTMLdivtagiscommonlyusedamongwebdeveloperseverywhere.
JustkeepinmindthatyoushouldusuallyusesemanticHTMLinplaceofthedivtagunlessnoneofthem(thesemantictags)reallymatchthecontenttogrouptogether.ThisisbecausesemantictagsarebetterforaccessibilityandSEO.
Inshort,thedivtagremainsusefulandisn’tgoinganywhereanytimesoon,sofeelfreetouseitwhennecessary.
Thankyouforreadingandhaveanicetime.
KoladeChris
Webdeveloperandtechnicalwriterfocusingonfrontendtechnologies.
Ifyoureadthisfar,tweettotheauthortoshowthemyoucare.Tweetathanks
Learntocodeforfree.freeCodeCamp'sopensourcecurriculumhashelpedmorethan40,000peoplegetjobsasdevelopers.Getstarted
