How do we style when using semantic elements?

Get Help HTML
#1

Hi!
I understand that instead of the <div> element we should use <header> for example like in the exercise and topic in this link:
https://www.codecademy.com/courses/learn-html/lessons/semantic-html/exercises/header-and-nav

What if we want to add id or class attribute for the purpose of styling with CSS?

Can I create a <div id="name of the id"> or <div class="name of the class"> element inside of the opening and closing<header> tag or is it ok if I just add the ID or Class to the <header> element ?
For example<header id="name of the id"> so that the CSS can be associated with this.

Sorry if I was complicated.

Thank you!

#2

Hello, and welcome to the forums!

You can add an id and/or classes to your semantic element directly, just like you would a regular div. It’s fine to have things nested inside and apply different styles to them as well, but it isn’t required.

2 Likes
#3

I see, thank you! So, since ID and CLASS attributes are global attributes we can use them with any semantic elements as well for styling and we don`t need div unless we want to nest the div for another styling.

1 Like
#4

Hi! You can definitely add an id or class attribute to any kind of tag in html. This includes <header> tags! This is useful if you have multiple header tags but only want to select a specific one for styling (since it is possible to select a tag simply by calling its name in your css). A div is a general-purpose tag that, as you point out, should be used for nesting-- but it isn’t absolutely required. It’s just best practice. In fact, the names of any tags don’t actually affect the functionality of a webpage at all! They are mostly used to make your code more legible and for special access programs to know what they’re looking at.