4 answers
Dayalis
Student
Waterbury, Connecticut
6
Questions
Asked
969 views
What is Semantic HTML?
#definition#technology #programming #programmer #computer #tech
Login to comment
4 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!
James Constantine Frangos
Consultant Dietitian & Software Developer since 1972 => Nutrition Education => Health & Longevity.
3447
Answers
Gold Coast, Queensland, Australia
Updated
James Constantine’s Answer
Hello Dayalis,
What is Semantic HTML?
Semantic HTML, also known as semantic markup, refers to the use of HTML tags that carry meaning beyond just presenting content on a webpage. Semantic HTML tags provide information about the structure of the web page and its content, making it easier for both humans and search engines to understand the purpose of different parts of the page.
In contrast to non-semantic HTML, which focuses solely on the presentation of content, semantic HTML aims to convey the meaning and structure of the content. By using semantic elements appropriately, web developers can create websites that are more accessible, SEO-friendly, and maintainable.
Some examples of semantic HTML tags include
,
,
,
,
,
, and
. These tags help define the different sections of a webpage, making it clear how they relate to each other.
Overall, semantic HTML plays a crucial role in enhancing the user experience, improving accessibility for people with disabilities, and boosting search engine optimization efforts by providing clear and structured content for search engine crawlers to index.
Top 3 Authoritative Sources Used:
Mozilla Developer Network (MDN): MDN is a comprehensive online resource for web developers, offering detailed documentation on various web technologies, including HTML. It is widely recognized as a reliable source for learning about semantic HTML and its best practices.
W3C (World Wide Web Consortium): As the main international standards organization for the World Wide Web, W3C sets guidelines and specifications for web technologies. Their documentation on HTML standards provides valuable insights into semantic HTML usage.
Google Web Fundamentals: Google’s Web Fundamentals resource offers guidance on creating high-quality websites that are optimized for search engines. It includes information on using semantic HTML to improve SEO and overall website performance.
GOD BLESS!
James Constantine.
What is Semantic HTML?
Semantic HTML, also known as semantic markup, refers to the use of HTML tags that carry meaning beyond just presenting content on a webpage. Semantic HTML tags provide information about the structure of the web page and its content, making it easier for both humans and search engines to understand the purpose of different parts of the page.
In contrast to non-semantic HTML, which focuses solely on the presentation of content, semantic HTML aims to convey the meaning and structure of the content. By using semantic elements appropriately, web developers can create websites that are more accessible, SEO-friendly, and maintainable.
Some examples of semantic HTML tags include
,
,
,
,
,
, and
. These tags help define the different sections of a webpage, making it clear how they relate to each other.
Overall, semantic HTML plays a crucial role in enhancing the user experience, improving accessibility for people with disabilities, and boosting search engine optimization efforts by providing clear and structured content for search engine crawlers to index.
Top 3 Authoritative Sources Used:
Mozilla Developer Network (MDN): MDN is a comprehensive online resource for web developers, offering detailed documentation on various web technologies, including HTML. It is widely recognized as a reliable source for learning about semantic HTML and its best practices.
W3C (World Wide Web Consortium): As the main international standards organization for the World Wide Web, W3C sets guidelines and specifications for web technologies. Their documentation on HTML standards provides valuable insights into semantic HTML usage.
Google Web Fundamentals: Google’s Web Fundamentals resource offers guidance on creating high-quality websites that are optimized for search engines. It includes information on using semantic HTML to improve SEO and overall website performance.
GOD BLESS!
James Constantine.