Semantic mark training, Semantic time and Semantic meter in HTML

The appearance of a page is of great importance, and HTML can help a lot of page owners 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, because 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, 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 hear the word HTML Semantic, you may think about its meaning. In the following, we will discuss this topic and Semantic mark training, Semantic time, and Semantic meter in HTML to be more aware of them, which will help you create your page with more awareness.

HTML Semantic:

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., 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 made to the appearance of the text, for example, the font. 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 also be noted that HTML has some tags in which different devices can distinguish various parts of the page from each other, but you 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 they are now, so the problem mentioned above about the inability to recognize different parts of the site by various devices did not exist. Still, due to the advances happening every day, devices can no longer distinguish between sections such as title, content, etc. It is necessary to take all the actions to make the recognition possible for devices.  CSS  classes can separate the visual part from HTML coding and have different titles for various classes, eventually providing 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.

- <article>:

This tag indicates that the specified section has independent content.

- <aside>:

As its name implies, this tag indicates content separate from all page content.

- <figcaption>:

Defines a caption for a

- <footer>:

As you can tell by its name, the footnote can be distinguished with the help of this item.

- <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.

- <mark>:

The highlighted text is specified with this tag, which we will discuss in more detail in the rest of this article.

- <header>:

Each page has a title that can be specified in this way.

- <time>:

The date and time in content can be specified with the help of Semantic.

- <meter>:

"Meter" is considered a new element in  HTML5  that can represent the value of a known range as a gauge.

mark training:

It is sometimes necessary to highlight part of the existing text in various articles and sites. To achieve this, you can use the mark tag in HTML, which you can see an example of its coding in the following section.

- time:

In different pages and articles, it is possible to refer to periods that need to be read and understood by devices. It is necessary to use the Semantic time tag to achieve this goal. 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.

This element has the following properties:

dateTime:

This element uses this feature to display date, time, or date-time.

pubDate:

This indicates the date that the article was published.

valueAsDate:

This is a read-only attribute, which returns a Date object representing the specified date and time.

- meter:

As mentioned before, "Meter" is considered a new element in  HTML5  that 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 get 95 from zero to 100, you have to do the following to express this situation.

In general, this element has different properties, which are as follows.

Min:

This property indicates the minimum value of this element, which is considered zero.

Max:

It is the maximum amount of this element that will be considered as one if it is not specified.

Value:

The most important part of this element is the value, which indicates the writer's goal. In the example we gave 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.

Low:

This is not mandatory, and you should only specify it if you want to show the low value of a range.

High:

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.

Optimum:

Like the previous two cases mentioned earlier, this item is also completely optional, and this feature is used to determine an optimum point of a range.

Last word:

HTML  can provide many features for users, and as we have mentioned above, it is evolving day by day. The latest version of it, which designers of various sites have used since 2008, can cause real users to have a great user experience. Still, other than real users, all content must be understandable by different devices, so HTML Semantic should be studied. The various elements in it, which were named and described in the article, should be used to make it easier for devices to recognize the pages better. We also mentioned three important elements in HTML Semantic with their features. You can create a page whenever you want because you have a lot of awareness in this field, so you can  create a webpage  that is understandable for both real users and various devices.