Can you use a mix of semantic and non-semantic HTML?

Can you use a mix between non-semantic and semantic HTML?

Hi @frank2906 :slight_smile:
Sure, you can definitely mix semantic and non-semantic HTML.
However, as stated in the codecademy lesson, using semantic HTML gives many perks to the web page, such as:

  • Readability: a semantic html code is more complete, better organized, easier to understantd and mantain for other delevopers;
  • Improved accessibility: visually impaired users who utilize screen readers to visualize the web page;
  • Better SEO ranking: when crawlers analyze a web page and find meaningful, organized content, it will translate into a better SEO ranking for the web page.

For example, think about div and section elements. We could use both for our web page but, while the first has no semantic meaning and simply marks up a block, the latter has semantic meaning and describes its content.

Hence, for the reasons explained above, web developers are encouraged to use section over div. The latter should be used for styling purposes and generally as a last resort element. Hope the example helps you clarify this topic.

If you want to read more about HTML Semantic Elements: https://www.w3schools.com/html/html5_semantic_elements.asp

Excuse me if I made grammar errors but english isn’t my mother language :slight_smile:

29 Likes

Sorry for a late reply, but thank you! Also your English is absolutely flawless.

8 Likes

Odd, but it makes sense.

1 Like

The lesson described this idea pretty well, it might clear up any confusion with which you regard semantics as odd, rather they are quite useful!

Introduction to Semantic HTML:

To better understand this, you can think of comparing non-semantic HTML to going into a store with no signs on the aisles. Since the aisles aren’t labeled, you don’t know what products are in those aisles. However, stores that do have signs for each aisle make it a lot easier to find the items you need, just like Semantic HTML.