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:

121 Likes

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

17 Likes

Odd, but it makes sense.

2 Likes

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.

9 Likes

I was truly shocked to see that last part about English not being your mother tongue. Incredible! 99.99% of native English speakers don’t have your command of the language. Bravo.

11 Likes

Hi all,

I realize this post is wayyyy late, but I wanted to point out that when it comes to div, I see it everywhere. I’m hoping to be employed in dev some day, and it seems those with “divitis” still get jobs all the time. A ton of the source code I look at is littered with it. So I’m concluding that while it’s not an ideal habit to get into, it doesn’t seem to be a deal breaker when it comes to employment? I’m genuinely curious about this, because again, I see this frickin element way too often for it to be a last resort sort of tag. What am I missing?

9 Likes

you can surely mix semantic and non-semantic HTML, but think of it as it is said in the course that semantic HTML provides many benefits such as readability and accessibility and better-organized code.As a result, it will be better if you stick into the semantic HTML as a habit

2 Likes

Very well explained and you are very competent in the English language. Thanks for your explanation and well done on the English​:clap::ok_hand::+1:

2 Likes

I realize this is an old post and may not get a reply, however why do you say the “section” element is semantic? You state that div gives no indication as to what’s inside however section describes its content. What information does “section” convey that I’m missing? Thanks!

1 Like

Hi! :wave: If you want to have deeper knowledge about “section” and it’s meaning, I’ve found the best resource for you: :point_down:

4 Likes

New to coding here. Just wondering what is the point of using non-semantic HTML, if semantic HTML gives you so much more?

3 Likes

I think we can use a div if we want to divide our website say you have an article tag and it’s really long article we can use div tags to get better clarity on the code
ex.
article
really long article
div
really long article.
div
article

1 Like

@herebeandre Your English is perfect. Thanks for the insight!

1 Like

Not as late as my answer! Glad I was able to help :slight_smile:
Sincerely hope you’re safe and doing well!

1 Like

Hey there!

To be completely honest, I was at the very beginning of my developer career when I answered to this thread.

Fast forward to today, I can say you’re 100% right. I’ve never seen nor used a single section tag so far, whereas div is definitely the preferred tag that you’ll probably end up using 99.99% of times.

The use of section and other semantic tags is probably going to play an actual role when SEO ranking is something your blog, website or webapp thrives on.
Just my 2 cents :slight_smile:

6 Likes

Thank you for the insight. It is clear to me now.

1 Like

From the lesson: “Semantic HTML makes webpages accessible for mobile devices”

Does it mean semantic HTML is a requirement for developing mobile apps, or is it just a recommendation?

Definitely a recommendation. It’s better practice to use semantic html but it’s not a requirement

1 Like

thanks for this vital information. Like under what conditions can both be use?