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 How to Make a Website Creating HTML Content Structure the Image Gallery

Michelle Kang
Michelle Kang
2,763 Points
Posted by Michelle Kang
Michelle Kang
2,763 Points

Hi! I've seen websites w/o the header, nav & section tags. Is this a style choice? Do the tags add extra functionality?

I've also coded sites without those tags, including lists. Wondering why I should include the tags :)

3 Answers

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

In short, they are more semantic. HTML5 offers a lot of new semantic elements that make more structural sense when marking up a site. For example, before HTML5 it was not uncommon to see:

  <div id="header"></div>
  <div id="main">
      <div id="article"></div>
      <div id="sidebar"></div>
  </div>      
  <div id="footer"></div>

You can see that this works, and it could be targeted with CSS for styling, but overall it lacks any real semantic value because they are just DIV elements with a unique ID. However, with HTML5 you can create much more semantic markup and even add ARIA roles for increased accessiblity:

<header role="banner">
  <nav role="navigation"></nav>
</header>
<main role="main">
  <article role="article"></article>
  <aside role="complementary"></aside>
</main>
<footer role="contentinfo"></footer>

Just by looking at it you can see how much more sense it makes, it has more semantic value and is much better for structuring pages. As for lists, it's just good practice to use OL, DL, and UL lists where appropriate, it also helps with semantic markup and accessibility.

In practice I generally use a DIV as a hook for styling, when semantics are not important and I just need something with a class or unique ID applied to style it, however, whenever possible using the appropriate semantic element is the best way to move forward, in my opinion.

Michelle Kang
Michelle Kang
2,763 Points
Michelle Kang
Michelle Kang
2,763 Points

Is this the comprehensive list of tags? http://www.w3schools.com/html/html5_semantic_elements.asp

Also, I found this: http://www.w3.org/TR/wai-aria/roles Where can I find more explanation around this?

mikes02
mikes02
Courses Plus Student 16,968 Points

HTML5 Doctor has a very good list and explanation of the elements: http://html5doctor.com/

For ARIA roles:

There's a lot of ARIA stuff out there but the example I showed above covers a lot of the commonly used roles you see, one exception may be the search role that you would use on search forms.

Michelle Kang
Michelle Kang
2,763 Points
Michelle Kang
Michelle Kang
2,763 Points

Great! Very helpful links. Thank you for the thorough answer and resources :)

Andres Aguero
Andres Aguero
30,545 Points
Andres Aguero
Andres Aguero
30,545 Points

Hi Michelle,

These element tags have no special functionality. They are just a great way to signify where you are in your HTML markup. You could use divs and it would make no difference at all.

Michelle Kang
Michelle Kang
2,763 Points
Michelle Kang
Michelle Kang
2,763 Points

Ah, nice! Yes, I had a soup of divs in my previous sites. It's nice that paying attention to semantics helps to make the code itself more user-friendly :) Thanks both for the answers!

mikes02
mikes02
Courses Plus Student 16,968 Points

It can help with semantics, accessibility, assistive technologies, and even other developers working on the code. They definitely bring a lot of value to your markup and overall are very easy to implement because for the most part they make perfect sense as they are named (i.e. header, footer, article)

Michelle Kang
Michelle Kang
2,763 Points
Michelle Kang
Michelle Kang
2,763 Points

Interesting. Do you know if this is best practice across teams? I still see divs and spans in code. Is this what it means to argue over semantics? :D

mikes02
mikes02
Courses Plus Student 16,968 Points

It's not uncommon for developers to still use DIVs and SPANs within their code, when used appropriately they are very handy, a lot of developers tend to use these elements purely for styling purposes and do not rely on them for semantic value, that's where the HTML5 elements come in. You could still build an entire site just using DIVs with classes and IDs applied and it would work, but it makes much more sense to use the semantic elements available to us and you could certainly make a strong argument within a team for their use.

Michelle Kang
Michelle Kang
2,763 Points
Michelle Kang
Michelle Kang
2,763 Points

Makes sense! Great that you're introducing this in your lessons.