Can you use a mix between non-semantic and semantic HTML?
Hi @frank2906
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
Sorry for a late reply, but thank you! Also your English is absolutely flawless.
Odd, but it makes sense.
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.
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.
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?
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
Very well explained and you are very competent in the English language. Thanks for your explanation and well done on the English​:clap:
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!
Hi! If you want to have deeper knowledge about “section” and it’s meaning, I’ve found the best resource for you:
New to coding here. Just wondering what is the point of using non-semantic HTML, if semantic HTML gives you so much more?
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
Not as late as my answer! Glad I was able to help
Sincerely hope you’re safe and doing well!
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
Thank you for the insight. It is clear to me now.
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
thanks for this vital information. Like under what conditions can both be use?