3 answers
Dayalis
Student
Waterbury, Connecticut
6
Questions
Asked
800 views
What is Semantic HTML?
#definition#technology #programming #programmer #computer #tech
Login to comment
3 answers
Jamie Yu
Information Security Engineer
6
Answers
Cary, North Carolina
Updated
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 Hyland
Engineering Manager
4
Answers
Portland, Oregon
Updated
John’s Answer
"Semantic HTML", or "semantic markup" means that the HTML describes what the content _is_, rather than what it _looks like_. Generally, all the styling and layout is then handled by CSS, completely separately from the HTML itself. This is an example of "separation of concerns", which means that a given part of your code is only concerned about one thing ("what's the content" vs "how it looks"). The advantage of this approach is that it makes it easy to reuse components, and easy to change them while still keeping everything consistent.
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
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 Moses
Software Engineer
5
Answers
Midlothian, Virginia
Updated
Heather’s Answer
Semantic HTML is HTML that is clear and descriptive for the programmer and the browser. For example, <header>, <article>, and <footer> are semantic tags because they clearly describe the content they contain. This is really important for accessibility. Screen readers are devices that blind people use to read aloud written content on a webpage, and screen readers look for semantic HTML tags to give the best description of the page.
Great question!
Great question!