When to use Section vs Article vs Div in Html?
HTML-код
- Опубликовано: 11 сен 2024
- learn about the semantics behind section article and div tags in HTML.
follow @:
- Instagram = / before_semicolon_
- twitter = / beforesemicolon
- facebook = / beforesemicolon
- codepen = codepen.io/bef...
website = beforesemicolon...
Excellent explanation! I wish other people were this straight forward!
Appreciated Israel :)
Section when we want to mark a separated single object of data in context of bigger scope. Article when we want to mark and isolate variations of the same object, creating their own scopes ( is equivalent to the in most ways). Section and article are semantic tags (as a header, footer, h1, i, b, strong etc), we use them to describe our content to searh engines. Div is a style tag (as the span) we use to build a layout for user, you can use it whenever you want, search engines don't see it.
Also the words section and article have nothing to do with actual sections and articles, like the header and footer have nothing to do with the top and bottom parts of the page, they are just words that was choosen for tag names many years ago, don't rely on them as to a guid.
You just explained the same thing more technically. Thanks
This is the best explanation I've found so far. Thank you so much!
Glad it was helpful!
Clear and concise. Great video!
Glad it was helpful!
Using the inspector tool I've seen tags used inside of divs on websites. However these divs are also then nested inside of a section tag. Is it correct to use them this way? In other words as long as the mother tag is still section or article? Thanks in advance.
GoldenToothBrush yeah that is fine and divs are normally used for layout/styling purposes so I understand that been done as well. I normally dont tend to add html for styling purposes but people do it. You can always audit your html using this tool
validator.w3.org/#validate_by_input
Great job! This one really makes sence
glad to help
VERY INFORMATIVE AND EDUCATIONAL. SUBSCRIBED AND WAITING FOR MORE.
Thank you. Welcome to BFS. Stay tuned
I learned more from your comments than the video.
Sir, could you please check it and tell whether it is correct or need some improvement?
tag groups those contents which do not have meaning on its own, which require additional things like photo, video, etc.
tag groups those contents which have some meaning in itself and do not require the reference from the website.
Moreover, the things, which we want to be noticed by SEO or some other devices like screen reader, must be group with article tag.
please response:
Like said in the video…
section: groups things that make sense together. Think about it like a family or a topic. Everything inside is about the same thing. It is the section that does not make sense on its own. It needs the rest of the website to make sense. If you find a section about a pair of jeans on a sports web page you will not have enough context to understand it or act on that section. But if the same section exists in a clothing webpage, you would know what to do.
Article is the same as section but the article itself is self containing. It does not need the rest of the web page to be understood. If i put a job posting article in a food recipe webpage you would be confused but you would fully understand what the article is about and what to do about it.
section = slice of a cake. You need all the slices to understand the cake
article = candle in a cake cake. Does not matter what cake is goes on, you understand what it is about and what to do.
SEO
Seems like you dont understand SEO. We dont put things in article just so they can be noticed by search engines or screen readers.
SEO is more complex than that and i suggest you do a deeper research. Understand HTML tags and using them properly helps your SEO but thats not what SEO is all about.
SEO (Content) is different than Screen Reading (Accessibility)
@@BeforeSemicolon
Thanks a lot for your reply.
You are replying on the comments of 5 years old video. You are very great and merciful.
Now, I understand almost 80 to 90 percent. Rest will be by practicle.
I have written only some words.
However, you wrote a book, I really like it.
Thanks a lot.
By the way, what is your name?
thanks for being straight forward with clear examplesssss
You got it 😊
i like the way how you integrated ad to your tutorial. very smart
Thats the art of RUclips, I don't have control on the ads
Parabéns pela explicação. Vídeo simples e rápido, mas conseguiu transmitir a informação que muitos sites e artigos não conseguiram.
Valeu ai Júnior Santos. Fico tentando dar meu maximo.
Ainda não entendi bem... mas acho que tá cedo pra eu me preocupar com isso. Estou começando a aprender CSS ainda.
Começa a aprender CSS quando terminar de entender o basico do HTML. Esse aqui e o basico.
O que e que voce nao entendeu ainda aqui?
Thank you so much, I finally understand it!
You’re welcome 😊. Glad I was able to help
finally I understood .. Great job thank you 👏👏
Thank you 😊
I still don't understand why I should use over eg . What's the benefit? Is there any benefit?
Same goes for most other html5 elements that are somehow supposed to be used instead of .
Putting a class on a div has no meaning. When screen readers or bots or search engines look at it is not clear what it is inside and it may be ignored all together.
The benefit is that you give your website content meaning so for people or things that navigate your website not relying on what they can see to understand what content it is.
It has accessibility and SEO benefits something some may not care for but others rely on to understand the content of your website.
@@BeforeSemicolon Thanks. I think that I understand it a little bit better now.
Glad to have helped than :)
You’re the GOAT
Not close but thanks 😊
dude you have the skill to teach weldone.
you are so kind
I don't get it, what happens if i don't use section but directly ?
Nothing. using H tags does not require section tag. Section tag requires H tags
@@BeforeSemicolon Thanks, so its just about organisation and structure, it doesnt actually do anything on the page ?
It does for your SEO. Thats the whole point of semantics. HTML itself is for structure so, it still needs you to do it right.
@@BeforeSemicolon Got it, thanks a lot for your help
Thank you so much dude. Makes sense
it takes to undrstand thi topic months but now it takes me s minutes to understand thanks teacher
anytime Mohamed, lets stay in touch
youre great man
great explanation!! thank you for sharing
Anytime. Glad i was able to help :)
Most coherent explanation out there. Thankyou and subbed
Glad so many people like it, Have you checked other stuff?
That intro killed my ears . Amazing content tho
glad you like the content. The channel is passed that intro. check the channel for more
which tag should i use for the hero section with image, title and call to action button? main or section? thank you!!
section tag
Nice explanation.
Thanks
Just what i need . Thank you.
Glad it helped!
Would an example of an article tag would be for an advertisement banner on a website?
Yup...advertisements are stand alone content and can be placed anywhere. Normally the content of advertisement banners are more complex but yeah.
@@BeforeSemicolon Articles are required to have heading tags, advertisements most of the time don't have heading tags. They're primarily images/videos. So how are they going to fit into the article's tag?
Image and video ads can go inside a figure tag with fig caption to describe it.
Some ads are just words and therefore can be put inside an article with heading and description with links. It may even contain images and videos.
Thanks you explained this very well.
Thanks for the feedback. Keep them coming...
If anyone is out there, can you dumb it down for me? Article is like an intro on a website and section is a separate page with content?
Article is to wrap content which is independent of the rest of website.
I can write a blog post and post in different websites which means the blog post is independent.
A section is to wrap content which makes sense together and representa part of a page. These parts help give meaning to the page.
nice explanation
Thank you 🙏🏼
brother god bless you,,,, best teacher , make more video just subscribe your side...
Thanks! I will sure push more videos in the future.
thanks man, here from Papua NEW Guinea... please brother may you make one complete responsive website please ,,, if you say yes then Khabib will win tomorrow hehehhehe ,, thanks brother
you want me to make a video about how to make a full responsive site?
sure please
KomsKala Kangeman i will.
Wow! Makes sense. Subbed!
Welcome to the channel :)
so basically functionwise there's no difference?
Tini Wish what do you mean by “functionwise”?
Before Semicolon let’s say if you were to use one instead of another it would it still work the the same?
Tini Wish yes! But if somebody asks you whats the difference, will you be able to tell them? But search engines will understand your content better based on the tags you use. The only place i would not care as much is if i was building a SPA (single page application) because search engine does not matter there as much.
k, ty I'll try to use the right ones when I can though i have to say im still a level below SPA
dig the video bro! thanks
Thank you. Welcome to BFS
Thank you so much
You are welcome 😊
if the content is related to website then it is section and if the content is not related to the website then it is article? am i wrong or right?
Bhawna dhiman if a content needs the rest of the site to be understood its a section otherwise its an article. They are both part of the site. It has to do with how much they make sense on their own.
@@BeforeSemicolon thankyou sir 😊
unique channel title
Thanks :)
Thank you!
Anytime:)
Gj bro from india and brazil
Welcome to the channel
Thanks 😊
Welcome 😊
❤❤❤
🙂
thanks for tutorial but please make more about how to use other tag...
Hope you are checking the channel for those
If it wasn't for SEO and accessibility issues for those whom are blind, i'd just use divs only lol.
I feel u but its never only about us.
Bom nome para um canal de RUclips.
Obrigado 😊
still unclear
What exactly?
I dont understand you
Why?
Good explanation
Thanks mate