Semantic mark training, Semantic time and Semantic meter in HTML
9 minute(s) read
Jul 13, 2021
The appearance of a page is of a great importance and HTML can help a lot of page owners in order to present their content on a page with a proper and attractive layout, technology is constantly evolving, and everything which depends on technology is getting better and better such as HTML, for example, the latest version of HTML was able to create a huge change, due to the fact that this version attracted more users to the pages and made them able to have a better user experience because of the ability to add video and audio files, so that the traffic to the website will increase as well as its ranking.
In general, in order to fully master the types of tags and become familiar with basic coding, you need to increase your awareness of various fields, one of which is HTML Semantic, when you heard the word HTML Semantic, you may think about its meaning, in the following, we are going to discuss this topic as well as Semantic mark training, Semantic time and Semantic meter in HTML, so that you can be more aware of them which help you create your own page with more awareness.
This phrase means that all the code that is written and the structures of the pages should be designed in a way that is understandable to human users, and also should be written in such a way that different devices can easily examine the page as well as its different parts such as title, content, etc., in order to distinguish pages from each other.
When real users visit a page, they can easily realize that the sections are different with the help of changes which are made to the appearance of the text, for example the font, and so on, these days with the help of HTML Semantic as well as written codes, different servers can easily distinguish different parts of a page from each other, it should be also noted that HTML has some tags in which different devices can distinguish various parts of page from each other, but you definitely know that devices cannot do everything like human users, so they cannot distinguish many parts from each other.
In the past, pages were much simpler than what they are now, so the problem which was mentioned above about the inability to recognize different parts of the site by various devices did not exist, but due to the advances that are happening every day, devices can no longer distinguish the difference between sections such as title, content, etc., and it is necessary to take all the actions in order to make the recognition possible for devices as well. CSS classes can separate the visual part from HTML coding, and have different titles for various classes, which can eventually provide a standard coding, there are different tags in coding, such as h1, p, image, etc., in which the relevant section must be placed, finally the page that uses such codes, can get a better score while measuring the standard coding, in the following, we are going to refer to some Semantic Elements in HTML for you and explain some of them briefly.
- Semantic <article>:
This tag indicates that the specified section has independent content.
- Semantic <aside>:
As its name implies, this tag indicates content that is separate from all page content.
- Semantic <figcaption>:
Defines a caption for a <figure> element.
- Semantic <footer>:
As you can tell by its name, with the help of this item, the footnote can be distinguished.
- Semantic <details>
This item shows the details, and it gives different users the possibility to view these details if they want to know them, or there may be some users who do not want to view them.
- Semantic <mark>:
The highlighted text is specified with this tag, which we are going to discuss in more detail in the rest of this article.
- Semantic <header>:
Each page has a title that can be specified in this way.
- Semantic <time>:
The date and time in a content can be specified with the help of Semantic
- Semantic <meter>:
"Meter" is considered as a new element in HTML5 which is able to represent the value of a known range as a gauge.
Semantic mark training:
In various articles and sites, it is sometimes necessary to highlight part of the existing text, in order to achieve this, you can use the mark tag in HTML, which you can see an example of its coding in the following section.
<title>How to define marked/highlighted text</title>
<h2><mark>HTML5: How to define marked/highlighted text
It is a
portal for geeks
- Semantic time:
In different pages as well as articles, it is possible to refer to time periods that need to be read and understood by devices, in order to achieve this goal, it is necessary to use the Semantic time tag, for instance, imagine that a page about a famous singer states that the concert took place on May 15, and we will show you the code at the bottom of this post.
<p> The concert took place on <time
datetime = "2001-05-15T19: 00"> May 15 </time>. </p>
This element has the following properties:
This feature is used in this element to display date, time or date time.
This indicates the date that the article was published.
This is a readonly attribute, which returns a Date object representing the specified date and time
- Semantic meter:
As we have mentioned before, "Meter" is considered as a new element in HTML5 which can represent the value of a known range as a gauge, in this element, a value is determined by knowing the acceptable minimum and maximum, for example, if you take a test, and you got 95 from zero to 100, you have to do the following to express this situation.
Test: <meter min = "0" max = "100" value = "95"> 95 of 100 </meter>
In general, this element has different properties, which are as follows.
This property indicates the minimum value of this element, which is considered as zero.
It is the maximum amount of this element that if it is not specified, it will be considered as one.
The most important part of this element is the Value, which indicates the writer’s goal, in the example which we have given to you above, the value was 95, and the writer’s goal in general was to say that he/she scored 95 on the test, of course, it should be noted that this number can be either an integer or a decimal.
This is not mandatory, and you should only specify it if you want to show the low value of a range.
As in the previous case, this is optional, and you should only mention it if you want to show a high value of a range.
Like the previous two cases which we have mentioned earlier, this item is also completely optional, and this feature is used in order to determine an optimum point of a range.
HTML can provide many features for users and as we have mentioned above, it is evolving day by day and the latest version of it, which has been used by designers of various sites since 2008, can cause real users to have a great user experience, but other than real users it is necessary for all content to be understandable by different devices, so HTML Semantic should be studied and the various elements in it which was named and described in the article, should be used to make it easier for devices to recognize the pages better, we also mentioned 3 important elements that exist in HTML Semantic with their features, so that you can create a page whenever you want due to the fact that you have a lot of awareness in this field, so you are able to create a webpage which is understandable for both real users and various devices.Click to analyze your wesbite SEO