What is Semantic HTML?
#definition#technology #programming #programmer #computer #tech
3 answers
Jamie’s Answer
Semantic HTML uses semantic elements in HTML to provide meaning or context to the HTML content. This mades the code more readable or understandable to the developer as well as the browser. Most modern browsers support semantic elements in HTML.
For example, <div> or <span> element tells nothing about the content, while <header> or <form> clearly describes the content.
Reference: https://www.w3schools.com/html/html5_semantic_elements.asp
John’s Answer
For example, imagine you were developing a web site for an ice cream store, and at different points throughout the site, they might mention various flavors of ice cream. You've been asked to make sure that flavor names are always displayed in green. One way to do this would be to use <font> tags to set those traits, like this:
I love <font: "color: green">rocky road</font>!
This would work, but the thing about code is that it's never really finished -- you're almost always going to come back to it later, add new features, make changes, and generally improve things. Companies generally spend much much much more time maintaining and improving code than they do writing it in the first place! So, imagine that later, you need to come back and change it so that ice cream flavors are always red instead of green. If you wrote it as above, you'd have to find every single place in the code and update it, and odds are you'd make some mistakes doing this manually -- maybe you'd miss some flavor names, maybe you'd accidentally change some other green text that wasn't supposed to be changed, or maybe both. Once you have a bunch of folks all working on the same code, the odds of this sort of mistake go up to basically 100%.
So, instead, you could use semantic markup to describe what the content _is_, and then CSS to describe how it _looks_. That might look like this in the HTML:
I love <span class="ice-cream-name">rocky road</span>!
And then in your CSS file, something like this:
.ice-cream-name {
color: "green"
}
Now, making that change is simple -- you just update the color to "red", and everywhere on the site, all ice cream names will now be red. The odds of making mistakes with this approach are much lower, even with many people working on the same code!
This is a very simple example, of course -- if this was all the code you were writing, it might not be worth breaking out the styling into a separate document. The more complex the code gets, though, the more valuable semantic markup (and separation of concerns in general) becomes, and it becomes much more difficult the farther you go without breaking things out. In practice, all but the very simplest of projects will generally benefit from using semantic markup from the very beginning.
For further reading, the Wikipedia page on Semantic HTML has a lot of great detail and links: https://en.wikipedia.org/wiki/Semantic_HTML
Heather’s Answer
Great question!