Using id attribute with semantic HTML tags

When using non-semantic HTML, we were able to refer to sections using the id and create internal links within the document. For example,

<div id="introduction">

could later be referred to with:

<a href="#introduction">Introduction</a>

Also, the lesson mentioned that using the id attribute with div was useful to be able to style the div with CSS later. Can you/would you add the id attribute to semantic HTML? I didn’t see anything in the Semantic HTML section about using the id attribute and wasn’t sure if it was done.

New user, thank you for your help!!

I did find a very similar question here:

How do we style when using semantic elements

I guess that answers my question! Sorry for posting a duplicate :laughing:

The thing about semantic HTML tags are that they aren’t actually different from divs, at least not in a specific coding sense. So if styling using CSS you would use either the semantic name the way you would style a div, such as

article {
  font-size: 12px;
}

or you would use the id, class attributes and such. These all still work exactly as expected. The main benefits of semantic HTML are around making it readable for other coders trying to jump into a project you have created, and also screen readers can use semantic HTML to understand better how to structure their reading of the content for those with visual impairments.

1 Like