What is "Semantic Web"?
The Semantic Web (widely known as Web 3.0) is an extension of the World Wide Web through standards set by the World Wide Web Consortium (W3C).
The goal of the Semantic Web is to make Internet data machine-readable.
According to the W3C, "The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries."
The Semantic Web is therefore regarded as an integrator across different content and information applications and systems.
An example of a tag that would be used in a non-semantic web page:
<item>blog</item>Encoding similar information in a semantic web page might look like this:
<item rdf:about="https://example.org/semantic-web/">Semantic Web</item>Tim Berners-Lee calls the resulting network of Linked Data the Giant Global Graph, in contrast to the HTML-based World Wide Web. Berners-Lee posits that if the past was document sharing, the future is data sharing. His answer to the question of "how" provides three points of instruction. One, a URL should point to the data. Two, anyone accessing the URL should get data back. Three, relationships in the data should point to additional URLs with data.
What is "Semantic Tag"?
The word semantic is anything related to meaning. Following this definition, An HTML semantic element is an element with some type of meaning. An example of semantic elements are
and .These elements are semantic because they define some specific portion of the webpage. Tags like state the main content of a webpage while a tag defines a form.With these tags, we no longer need to write elements like but instead can just use the appropriate semantics tag of .This allows you as a developer to write cleaner code as instead of looking through a multitude of div tags trying to find one specific one all you have to do is find the one tag.
Just look at the two lists below. Isn't the second one using semantic markups a lot easier to read? These are the benefit of using semantic elements in your code. Easier Readability.
- without Semantic Tags
<div id="main">
<div id="nav">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<div/>
<div id="article">
<h1 id="title">Title</h1>
<p>Lorem Ipsum</p>
</div>
</div>- with Semantic Tags below
<main>
<nav>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<nav/>
<article>
<h1 id="title">Title</h1>
<p>Lorem Ipsum</p>
</article>
</main>Why should we use HTML Semantic element?
HTML semantic tags have a lot more benefits than just allowing you as a developer to write cleaner and more readable code. Using semantic elements allows greater accessibility to your sites. This accessibility comes in the form of assistive technologies, like screen readers, and search engines having the ability to better understand the content of your website.
Semantic Tags also have the benefits of allowing developers to write more consistent code. Two developers might have different ways of writing a navbar. For example, one might create a class called nav and attach it to a div like: <div class=” nav”> while another developer might instead use an id called navbar like this:
Semantic Elements solve this problem as it standardizes the way a navbar is defined in an HTML Document.
What is the difference between "HTML img Tag" and "CSS backgraound-image Property"?
1. Accessibility
CSS background images may be visible, but present accessibility issues.
For example, <img> tags have the ability to add alt text and a title attribute, which can be picked up by screen readers. This is important not only for end-users, but for getting indexed in Google search results as well. Here is an excerpt from the Official Google Webmaster Central Blog on Using Alt attritubes smartly:
As the Googlebot does not see the images directly, we generally concentrate on the information provided in the “alt” attribute. Feel free to supplement the “alt” attribute with “title” and other attributes if they provide value to your users!
If we want accessibility and better SEO, then we should use an <img> tag.
The remaining considerations are for images-as-pure-visual-design-enhancements.
2. CSS Background Image vs img tag Performance
If you are referencing the same URL for an image, technically the request is the same so the time it takes to download should be equal. However, the performance issue really boils down to when the request is made.
If you have a bunch of large background images declared in your CSS, the browser is going to take longer to parse the CSS file and pull down the images, which will delay the loading of the entire page.
With <img> tags, the requests are made as the HTML is parsed, so any content coming before the tag in the document will be information users can begin to read.
Also, inline images (<img> or <picture>) can take advantage of tools like picturefill and lazy loading for even more performance benefits.
3. CSS Background Image Manipulation Possibilities
If you are using one or only a handful of relatively small image files for esthetic enhancements and performance benefits are negligable, consider the manipulation options you have with CSS.
Background images can be used in conjunction with background-color, background-repeat, background-attachment, background-position, and background-blend-mode. This presents a lot of possibilities should the need for manipulation arise.
If you are overlaying text on top of an image, it’s much easier to prototype with a CSS background image.
Resources
https://buildawesomewebsites.com/html-img-vs-css-background-image/
https://blog.devgenius.io/what-are-html-semantic-tags-and-why-should-you-care-a0403972a217
