Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Owais Ul Haq
Owais Ul Haq
2,020 Points

Main and div tags

Whats the difference between main and div tags and when to use aside tag ?

3 Answers

Raulis Pranckevicius
Raulis Pranckevicius
1,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 Kneip
Jerome Kneip
3,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..)

Owais Ul Haq
Owais Ul Haq
2,020 Points

Then Jerome, what we can add in our main tag. ? which defines our document unique

also why we are using aside tag and section if div tag is available. Just use the div tag to general division or section ?

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.