Discover the power of HTML DIV, Article, and Section elements and learn how to structure your web pages for maximum clarity and effectiveness. This tutorial will show you how to use these essential tags to create compelling content that engages your audience and boosts your online presence. Whether you are a beginner or an experienced web developer, this video is sure to provide valuable insights into best practices and common pitfalls to avoid.
Stop using divs
One of my most popular videos is stop using divs, and I looked back at it, and I thought it could be refined a little bit.
I’ve come a long way since then, and of course, I’ve got a lot more handsome so I thought we’d go over it, get straight to the point and a slightly better quality video.
So ultimately, what I was trying to explain was that content on your website has meaning.
The reason why we you don’t use dips everywhere is because we wanna give information to things like Google’s SEO spiders, screen readers as well, and it helps these things understand how your content has broken up and what what your content means and Whenever I go into a Webflow website, it’s divs within divs within divs. It’s crazy. No one really knows how to properly use the div block element.
So div is short for division, and it does not give any semantic meaning to the content within that div when we create a div, if you go up to here, when you click this drop down, you get a set of elements that you can change a div block to.
You’ve got header footer, nav etcetera, etcetera. You do you actually have a description below, which is really helpful but I think we can give a little bit more detail to each of these things.
div
As I say, div is semantic meaningless, It does not mean anything. It’s just section element for styling. It’s used for framing and positioning all of your content.
Header/Footer
Header, is normally where you would place kind of the main navigation of the page kind of normally at the top of the page. It can also be used as a header for a section similarly, footer, normally at the base of the page.
Fun Fact!
How they came up with these mutation out elements is actually because they found with people commonly at the top of the page, they give the that element a class or an idea of header. And the footer and etcetera. So that’s kind of where we’ve understood the names for these elements from.
Nav
Nav is your main navigation of the pay Main is the main structure of your web webpage. So I have created a clone I think is somewhere linked it below.
Main
This is the main content of your website. Default setup is I have a header, my main and a footer. Everything kinda goes into the main element of the web webpage.
Section
Section breaks up the main section’s and within each section, you should have a heading. If you’re retro-fitting this, then what you should think about every time you add a heading, wrap that in a section. That’s kind of a general rule of thumb that I use.
Article
Article is a piece of content that exists on the page that has nothing to do with that page. An example of this might be a blog page, you know, you where you can see all of your blogs, each those individual things will be an article. Yes, they’re all blogs, but the content within those blogs is completely separate from each other.
Aside
Aside is kind of complementary to the page itself, kind of like, you know, is a bit of information that you might be useful in might not or whatever. An address is obviously quite self explanatory is where your address should live.
Figure
And then a figure wraps an *image. So you should have a figure which wraps the image and then a fig caption (which I was surprise they don’t let you do that). A fig caption can describe that image.
So back to my original point, STOP USING DIV’s.
I hope this was clearer. Join my discord and until the next time, happy no-coding.