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 HTML First Create the Content Containers

Lia Seltene
Lia Seltene
2,641 Points

Is it necessary to use the <header> element for <h1-h6>, or is it good practices, or is it that frequently used in CSS?

I have trouble understanding the need for semantic elements(?) like header, section, article, without seeing how it might be used in tandem with CSS and the need for clarity with that. It might also be because I haven't yet made a webpage with a purpose, or a sprawling project where semantics becomes a big deal.

So, for example, is the header element like that? Do people actually use it, and is it mainly good practices or is it just so frequently used that it might as well be necessary?

1 Answer

Cory Harkins
Cory Harkins
16,500 Points

Semantic practice is good when communicating your code to other developers, truthfully you could just use <div>'s to wrap everything and give it a class of gobbletygoop if you are/will be the only one maintaining the code... for like... ever.

header is just a semantic div, so best practices dictate your personal flare.

What you should concern yourself with is naming conventions, when someone sees what could be a header, is actually a div... what id/class do you give that div?

I rarely see <nav> but I do see <div id="main-nav">

Clean code is king ( or queen... it's 2017 shrug) so yeah, even if you didn't style the markup, think about how if you did the markup and passed that HTML doc to a co-worker/designer. Without them actually previewing the HTML file in a browser, could they look at it and go "Ah, okay, I see where this is... yadda yadda... and this is, yep, got it"

Think about farther down the road for behavior as well, when accessing the DOM from JavaScript files, you will need to grab elements by id or classes anyway (document.getElementById('main-nav');) so when it comes to semantic elements, it's not a big deal but when it comes to semantic id's/classes, THAT is where the butter gets warm.

:)