Mastering Cascading Style Sheet – Structuring Your Code – Divs and Spans

divs and spans

Sharing is caring!

In this world, many people don’t understand yet, but there will be a day when everyone, will want to have their own website, in order to get their business going.

It is indeed very important for companies to have their own website, why because it exposes your company out, to the world, to so many more people, than what a brick and mortar builder could do for a company.

By the way a brick and mortar building, is also destroying our world; buildings around the world are only destroying the earth.

In today’s article we are going to talk about CSS3 specifically, its Divs and spans as another part of our series of “CSS Mastery – Structuring your Code”.

Divs are elements, which help add, structure to an HTML document, if you don’t already know, HTML is a hypertext markup language, which browsers use to show a document online; therefore a front end developer, would use HTML along with CSS, JavaScript and other technologies and resources, to develop HTML documents, to create websites.

A div element also have semantic meaning, although many people believe that div elements don’t have semantic meanings

Divs prove a way of dividing a document into meaningful areas, because Divs actually stands for division.

A document has structure and is meaningful online, when the main content of that document, is wrapped around in a div and is given an ID.

Also by only using a div element, where there is no element, that will perform the task at hand, then the markup document would be kept, to a minimum; and therefore, avoiding the unnecessary markup language that an HTML document can produce.

A list of the main navigation, on a website does not need to be wrapped around a div, because it would produce unnecessary markup language

A sign of a document, which is poorly structured and overly complicated, is when the code of that document, has too many Divs, this is also described as divitus.

Divs should not be used to replicate a table, because it would just be swapping one set of extraneous tags, for another.

Grouping related items based on their meaning or function, rather than presentation, is what Divs, should be used for.

Divs should also be used to group blocks of elements, and not inline elements, spans can be used to group inline elements instead; spans can be used for that.

Spans are seeing less frequently then Divs though, because it is generally less common to block inline elements, than to group blocks of elements

Effects such as image replacements, is where you would see spans being used frequently; spans are used during effects for hooks to add extra styles to an HTML document.

It is impossible to avoid sometimes, adding extra nonsemantic Divs or spans to the code of an HTML document, although the goal is to keep the code in the HTML document, as lean and meaningful as possible.

The reason why it is sometimes, hard to avoid using extra nonsemantic Divs and spans, is because all browser don’t interpret the code in an HTML document the same; therefore a front-end website developer, has to change the code in the HTML document, accordingly in order to display the page correctly on all browsers.

Thank you, for reading this article!!!