This brief article is about HTML containers.
In the “real” world, a container is simply something that holds, i.e. contains, things. Wooden boxes, mesh bags, tots, purses, backpacks, and plastic airtight kitchen containers like Tupperware® are all containers. A toolbox is a container. A sock drawer is a container. If we are properly organized, then a container will contain similar items, i.e. we don’t keep our socks in our toolbox.
Each HTML tag creates a document object. An object is a thing, an HTML element. A quick browse through the list of HTML tags will show there is no container tag (<container>). So, if you want to organize like elements, how do we do it?We look through the list HTML tags and decide if there is one that does the trick. There are a number of container tags. Each has its own function. A header tag (<header>) organizes a collection of HTML elements at the top of the document. There are FOOTER, NAV, SECTION, ARTICLE, ASIDE, MAIN, BLOCKQUOTE, FORM, etc. tags. All contain HTML elements doing a particular job in that document.
A DIV tag (<div>) is a very general container. It stands for division. At one time, it was all we had so we used it exclusively and one page could have dozens of div tags in them. It got pretty confusing. In order to distinguish one div tag from another, we gave them id attributes.
<div id="wrapper">
<div id="header">Some content including a logo, page heading, and navigation also in a div tag</div>
<div id="mainContent">
<div id="aside">Some content</div>
<div id="article">Some content</div>
</div
</div>
In general, if there is a tag that makes more sense to use, i.e. a NAV tag (<nav>) contains navigation code, then use it. If you need to put code in a container, and there is not a semantic tag that does the job, then use the div tag.