Semantic HTML

Community Off Topic
#1

Hi there! I just wanted to know if you can still give an id to a Semantic HTML element. For example, can I do this:

Important header stuff

And if I wanted to edit this in CSS, would that mean that I can style everything under it using its id?

#2

Welcome, @rayvelarjoon35311603,

Given that we could potentially have more than one <header> element in a single document, it would make perfect sense to isolate each one with an id attribute, as needed.

Consider also that we could apply the id to the parent container and traverse to the header from there.

<article id="top-story">
  <header></header>
  <section></section>
  <section></section>
  <section></section>
</article>

CSS

#top-story header {

}

What if each section also has a header?

<article id="top-story">
  <header></header>
  <main>
    <section>
      <header></header>
      <main></main>
    </section>
    <section>
      <header></header>
      <main></main>
    </section>
    <section>
      <header></header>
      <main></main>
    </section>
  </main>
  <footer></footer>
</article>

The above selector will find all of these descendent elements. We can override it for our main header by one of two means…

  1. Write the selector rule lower in the cascade (below the above rule); or,
  2. write a more specific selector.

This CSS needs to follow the above selector rule since it has the same specificity.

#top-story>header {

}
#3

Hey @rayvelarjoon35311603,

Your code example is not showing because it is not code formatted :wink:
Use the </> button to display code.

But I guess you want to know if the following is possible:

<article id="first_article></article>

Besides asking us here, why don’t you try it out? Often trial-and-error is the best way to figure out things and learn :smiley: .