10 HTML5 Tags You Should Know

1-<‍video> and <‍audio> The most important reason for using Flash, Silverlight and similar technologies is to play multimedia data. With HTML5, browsers support new video and audio controls. That's why old technologies are relegated in terms of usage. Browsers now display controls natively and can be rendered without tripping over JavaScript. Don't be afraid of codec confusion! You can show multiple sources for the content, so your multimedia content will work regardless of the codec supported by your browser.

2-<‍input> type features New <‍input> The element now has more value for its properties, and browsers can do some cool things based on its value. For example, set the type property to "datetime" and the browser will show you calendar and time controls to choose the correct time, which used to require JavaScript. There are many different types of features. Learning these will save you a lot of JavaScript work.

3-<‍Canvas> <‍canvas> The tag will open a bitmap style surface for you to work with in HTML, just like a GDI+ or .NET Image object. Although it is not perfect at the moment, various graphical or table manipulations can be made, which has long been a traditional weakness in HTML, and this is just the beginning!

4-<‍header> and <‍footer> <‍header> and <‍footer> our new label. These two tags form a <‍div> that does not put anything above or below itself. As a matter of fact. However, these two tags will cut your search engine earnings for a long time because search engines are now at a level to distinguish between real content and those that are important to users but not real content.

5-<‍article> and <‍section> These tags are two new tags that will rank you higher in search engines. Articles can consist of many sections, or a section can consist of many articles. Confusing? Not really. An article presents a block of content. Besides, a section represents a much larger piece than this. For example, if you are looking at a blog page, the front page could be a section listing all the posts, and each post could be another article containing a section containing many actual posts and comments. They are simply nested.

6-<‍output> New <‍output> The tag is unique! It offers a structure that generates its data dynamically with JavaScript. This new tag has a feature that can be changed directly from the DOM with JavaScript and changes what it displays on the screen. It offers a more convenient structure than doing things the current way.

7-<‍details> It seems like every website needs a collapsible post block. Although it is easy to write with JavaScript and server-based codes, <‍details> making the label even easier than these methods. It does exactly the same thing we've been doing for years. It creates a block of content that opens and closes with a simple click.<‍details> Although the label is not currently suitable for horizontal use, we are sure it will arrive soon.

8-<‍figure> and <‍figcaption> <‍figure> It's essentially a simple container for content (usually images, but can be anything) and <‍figcaption> (enclosed in the <‍figure> tag) size <‍figure> It allows you to write titles or subtitles for the content in the tag. As an example, take 4 images showing annual sales <‍figure> tag and <‍figcaption> You wrote "Sales Growth Between 1989-1993" under the tag. The pictures are shown side by side, with 4 at the bottom followed by a text.

9-<‍progress>and <‍meter> <‍progress> and <‍meter> The labels are very similar. <‍progress> You can use the tag for an action or to show how complete something is. It also has an indeterminate mode (like database searches) over an unknown period of time. <‍meter> The label is used for measurements and indications of a value (Thermometers, quantity used..). They may be used similar to each other, but they have different meanings.

10-<‍datalist> <‍datalist> The tag acts just like a combo box. The system gives you a list of suggestions, but users are free to make their own entries as they wish. There are tons of ways this tag can be used, for example as a box that searches by showing items that have previously been in the user's history. In this way, you can easily perform a process that requires JavaScript (or JavaScript libraries) and can even be a hassle, with HTML5.