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

HTML

Can someone help describe these tags i am struggling with?

I am sadly having difficulties understanding these tags, can someone describe to me what they do as if talking to a toddler? <section> <div> <aside> <article> <cite> <header> <footer> <main>.

2 Answers

Hello there - I'm going to give a short definition of each, but also link the MDN documentation for each of them, if you want more detail:

  • main: this usually indicates the page's primary content, that reflects the main topic of the page.
  • article: an article tag indicates a composition of some kind, that can stand on its own outside of the rest of the site's content - it usually contains a heading and text, and maybe images. An example of this would be a news article or blog post.
  • aside: an aside usually contains information that is related to the main content in some way, without being part of the main content. You can display it however you want, but in many cases it contains the kind of content that you would put into a sidebar or something similar.
  • cite: the cite element contains a citation for someone's work. Say you get permission from a blogger to put one of their posts on your site, as long as you give them proper credit for it. You could include a <cite> tag with the url to the original blog post and the author's name, for example.
  • section: a section is an area of your site with standalone functionality, but that doesn't fit one of the more specific tags. One example is if you had a web application to manage event planning, and there was a specific section for creating and managing guest lists. It's not an article, aside, etc., so <section> works.
  • div: a div is a vague divider that doesn't really have semantic meaning. You would use this if you just wanted to group some elements together for styling, for example.
  • header: represents intro content. The header usually has your main page navigation, the logo, the site's title, etc.
  • footer: represents the content that usually appears at the bottom of the page. This usually includes copyright information and information about the site itself, like when it was last updated, who writes or maintains it, etc.

I hope this helps!

Thanks a bunch, this really helped!

Hi Calvin,

Have you tried w3schools.com? They have very clear to the point answers on all tags including examples you can tinker with. Just use their search engine. https://www.w3schools.com/tags/tag_section.asp

thank you so much, i will make regular use of this!