<\/p>\n
The fact that HTML5 is powerful with a wider set of technologies that allows development of more diverse and powerful websites and applications isn\u2019t in doubt. Therefore, knowing how to use these features is the first step towards becoming an efficient web developer. This blog post walks you through a comprehensive list of new features in HTML5 that are necessary to make you an efficient web developer. <\/span><\/p>\n Are you set to go?<\/span><\/p>\n New elements have been added to HTML5. Knowing how to use the semantics\u2014with the new HTML5 elements\u2014will provide you with the knowledge that describes with precision how your content should look like. Some of these elements are:<\/p>\n * <mark>. It\u2019s used to show highlighted text. For instance, the code below demonstrates how you can use this element:<\/p>\n * <figure>. It shows a self-contained content. This element is frequently used with the caption (<figcaption>) element, where it\u2019s referenced as a single unit. Here\u2019s an example:<\/p>\n * <data>. The data element in HTML5. It\u2019s used to link a given HTML content with a machine-readable translation system. When the HTML content is time or even date-related, then the <time> element is used. Here\u2019s an example:<\/p>\n * <output>. It displays the result of a calculation or a user\u2019s action. Here\u2019s an example when used in a form:<\/p>\n In the above example 350 is a value shown as an example which will basically vary depending on the calculations or functions implemented.<\/em><\/p>\n * <progress>. It\u2019s used to display the completion progress of a given task. Here\u2019s how you can use this element:<\/p>\n Apart from other attributes <progress> has two specific attributes \u201cmax\u201d and \u201cvalue\u201d. * <meter>. It represents a scalar number that\u2019s contained within a known range of values. Here\u2019s how you can use this element:<\/p>\n <p> you can heat your oven to <meter min= \u201c150\u201d max= \u201c230\u201d value= \u201c200\u201d>200 degrees<\/meter>.<\/p><\/p>\n#1: New semantics<\/span><\/h6>\n
<p><strong>the mark element is used to <mark>highlight<\/mark> text<\/strong><\/p><\/pre>\n
<figure>\n<img src= \u201chttps:\/\/www.capitalnumbers.com\/media\/ourlogo-sm.jpeg\u201d alt=\"Capital Numbers\u201d>\n<figcaption>Capital Number Logo<\/figcaption>\n<\/figure><\/pre>\n
<ul>\n<li><data value= \u201c67400\u201d>Mombasa<\/data><\/li>\n<li><data value= \u201c67401\">Nairobi<\/data><\/li>\n<\/ul><\/pre>\n
<form oninput= \u201canswer. Value=parseInt (m.value) +parseInt (n.value)\u201d>\n<input type= \u201cnumber\u201d name= \u201cm\u201d value= \u201c100\u201d \/> +\n<input type= \u201cnumber\u201d name= \u201cn\u201d value= \u201c250\u201d \/> =\n<output name= \u201canswer\u201d>350<\/output>\n<\/form><\/pre>\n
<progress value= \u201c60\u201d max= \u201c100\u201d>85<\/progress><\/pre>\n
\nMax<\/strong> indicates how much task needs to be done before it is considered as complete
\nValue<\/strong> indicates the current status of the progress bar.<\/p>\n