Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Owais Ul Haq2,020 Points
Main and div tags
Whats the difference between main and div tags and when to use aside tag ?
Raulis Pranckevicius1,894 Points
Hey, hopefully later on someone with more experience and better english will give you a more detailed answer, but for now i'll give you an idea of the differences. so <main> element would be used for the MAIN content of the page and <div> is a block element. A lot of people are using div to wrap content so that it be easier to ajust it and so on, but when you use <main> and someone is using a screen reader they'll know straight away that this is the MAIN content of the page. <aside> is used for let say side navigation or some kind of content that doesn't have a strong relation with the main content of the page.
Hope this helps you and if I'm wrong someone will correct me! :) At least you'll have a rough idea.
Jerome Kneip3,120 Points
The <main> tag specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
The aside tag, can be used for content that is not relevant for the understanding of the content e.g. the content of a Sidebar.
Div tag defines a general division or section in HTML. Shoul be used in case there is no "better" fitting tag. (like "article" or "section" and others..)
So you can use a div or main tag for the same thing. You can technically use div to divide up every content section and just give them ids but we use main and aside because they are semantic elements, meaning they explain something about what's inside them. Div's are useful for styling areas of content that hold multiple pieces of content or for styling things that don't necessarily fall into other categories like a wrapper on a popup box.
Yet again, you can use a div for sure, but it makes it harder for your code to read and doesn't use the semantic tag that use plain words to describe content quickly.
As far as your question regarding uniqueness it just means the main point of this particular page. Like the information on an "about me" page probably isn't also in the "contact" page...so that's unique to that page. Why does this particular page exist? Is it to list blog articles...then the list of blog articles is the main part. Is it to provide a basic overview of your organization before directing the user to more specific links? Then the overview is your main section.
The main section enables you to write quickly readable code. It's not technically the only thing that has to be used. There's no reason you couldn't use a div except for it won't be easy to read by others and isn't best practice.