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 HTML Basics Structuring Your Content Marking Up a Blog Post

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points

Semantic tags

I found the description of html semantic tags to be unclear, the header and nav and footer are totally understandable but i dont really understand section and article and aside, ive read the documentation on MDN but it`s really confusing, i appreciate some further clear explanation with real example.

2 Answers

Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Those elements are available to provide additional meaning (semantics) to the document. I think of them similar to comments that provide meaning to other developers/authors. By adding section and article and aside you are now adding additional meaning to the document, which could also assist accessibility readers. The video/workspace example files shows this quite well for an example.

In the context of a blog, explicitly identifying these individual components help provide structure and "meaning" to the document.

Hope that helps.

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points

Thx dave for your answer i totally understand what semantics in programming means, but lets say for example :

  • can i use section instead of divs as a generic container ? if not so what the section tag is used for ? the way that MDN and W3Schools describe tags is totally miss-leading for beginners,
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Well, in programming, the answer is usually "test it", haha. I think you can use a section as a container. It is more convention/common practice than a manual/documentation issue. First, a div is commonly used as a generic container because it defaults to display: block (and that is pretty much it, afaik). The section element also defaults to display: block and was introduced just for convention as opposed to the more generic div. So, try it - here's a starter pen to mess with and check it out / inspect it with you favorite dev tools.