/    Sign up×
Community /Pin to ProfileBookmark

Difference between div, header,section,aside

Copy linkTweet thisAlerts:
Jun 20.2019

What is the difference between div and header,main, section, aside and other html elements like this. Or even nav and footer. Is there a benefit of using header, main, section instead of a div ?

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@daveyerwinJun 20.2019 — the new HTML semantic tags when used properly,

help make the structure of your document

clear to the human reader and to "outliners"

https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo

https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide

I use them because I can target these elements in css easily

without id or class

header{ ... : ... ;}

each tag should be used where the semantic meaning

is appropriate to the content

the most common mistake HTML coders make with

HTML5 is to use the aside tag for a sidebar
Copy linkTweet thisAlerts:
@NogDogJun 20.2019 — > @DaveyErwin#1605159 the most common mistake HTML coders make with

> HTML5 is to use the aside tag for a sidebar

I might say it's using a DIV tag when something with more semantic meaning -- actually, _any_ semantic meaning -- could be used. :) But that goes back to older versions of HTML, not just 5.
Copy linkTweet thisAlerts:
@SempervivumJun 20.2019 — One very concrete benefit of using a semantic tag is the following: When googling for images I often encounter the problem that some of the images don't match the search term. When using the figure tag there is a clear assignment between description or caption and image. Search engines should be able to find matching images more precisely.
Copy linkTweet thisAlerts:
@codyhillauthorJun 21.2019 — @DaveyErwin#1605159 @NogDog#1605163 @Sempervivum#1605166 I use nav and footer and sometimes I also use header. But when it comes to the site content I use a div with a class , like <div class="about">
<div class="about__section-1">
</div>
</div> .

The reason I am doing that is because sometimes the next section would have a different height , width or positioning. So I had to use a class anyway to target the specific section so I started using only divs instead. I did not knew that there is a big difference between the semantic elements. What would you suggest ?
Copy linkTweet thisAlerts:
@VITSUSAJun 21.2019 — Click on mentioned hyperlinks to know more about the between div and header, main, section, aside and other html elements -

https://www.w3schools.com/html/html5_semantic_elements.asp

https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i
Copy linkTweet thisAlerts:
@codyhillauthorJun 21.2019 — @VITSUSA#1605205 Thanks, those are looking really good
Copy linkTweet thisAlerts:
@siddhi_patelJun 25.2019 — Hello, there is some difference between this html tags.

<div> :

It defines a division or a section in an HTML document.

It is used to group block-elements to format them with CSS.

<section> :

It defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

<header>:

There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”

<aside>:

Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
Copy linkTweet thisAlerts:
@codyhillauthorJun 25.2019 — @siddhi_patel#1605317 Thanks !!
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...