Nuxtstop

For all things nuxt.js

Amazing and silent features about html5

#html #websites
Amazing and silent features about html5
1 0

Web sites was available to public web browser in 1990. But at that time there were only few texts and links, graphics was absent. Each year there will be a ton of updates and new features. Html5 released into public in October 2014. HTML is the combination of Hypertext and Markup language.HTML5 is the fifth and current version of HTML. html5 has added some amazing features that we dont have to use another language/framework to get the same task done like video, audio.

The following elements are newly introduced elements in html5.

Tag Description
article Defines an article in a document
aside Defines content aside from the page content
bdi Isolates a part of text that might be formatted in a different direction from other text outside it
details Defines additional details that the user can view or hide
dialog Defines a dialog box or window
figcaption Defines a caption for a element
figure Defines self-contained content
footer Defines a footer for a document or section
header Defines a header for a document or section
main Defines the main content of a document
mark Defines marked/highlighted text
meter Defines a scalar measurement within a known range (a gauge)
nav Defines navigation links
progress Represents the progress of a task
rp Defines what to show in browsers that do not support ruby annotations
rt Defines an explanation/pronunciation of characters (for East Asian typography)
ruby Defines a ruby annotation (for East Asian typography)
section Defines a section in a document
summary Defines a visible heading for a element
time Defines a date/time
wbr Defines a possible line-break

1.Semantic/Structural Elements
Semantics is the branch that deals with the meanings of words and phrases in a language. Semantic elements defines meaning to both the browser and developer.
Examples of non-semantic elements: div and span -There is no connection between element and its contents. The div tag is an element that can contain anything inside.

<body>
    <div>Lorem ipsum dolor sit amet.</div>
</body>
Enter fullscreen mode Exit fullscreen mode

Output :

Examples of semantic elements: form, table, and article - semantic elements clearly defines its content.The table element has a table inside its tag as a content.

<form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
</form>
Enter fullscreen mode Exit fullscreen mode

Output:

  1. New Media Elements Before html5 was introduced we have to use such tools like javascript to add videos and audio into our website but now we have easy solution. We have video and audio elements to add video and audio respectively into our websites.

Adding audio
The controls attribute adds audio controls, like play, pause, and volume.
The source element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
tags will only be displayed in browsers that do not support the audio element.
The controls attribute is used to controls functions like volume, pause and play. The source will direct to the bowser that support audio format. If the browser do not support the audio format then it displays the text between the and audio

<audio controls>
    <source src="animals.ogg" type="audio/ogg">
    <source src="animals.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
Enter fullscreen mode Exit fullscreen mode

Adding video
We can add video in our web page with the help of video.
height and width add the height and width of the video respectively.
Set the width value in percentage(%) and height to auto so that video will be responsive. also use max-width property so that your video will not scale up larger than its original size.

<video width="100%" height="auto" controls max-width="500px">
    <source src="https://www.dropbox.com/s/xxt8c3bpt0u1rnl/sunset.mp4?dl=0" type="video/mp4">
    <source src="animals.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
Enter fullscreen mode Exit fullscreen mode

  1. New Input Types : many new input types in html form was introduced like color, data, datetime, datetime-local, email, month, number, range, search, tel, time, url, week. 
<form action="/#">
    <label for="fname">First name:</label><br>
    <input type="color" id="fname" name="fname"><br><br>
    <input type="submit" value="Submit">
  </form>
Enter fullscreen mode Exit fullscreen mode

Ouput:

  1. HTML5 Graphics The HTML canvas element is used to draw graphics on a web page. The canvas element is only a container for graphics. You must use JavaScript to actually draw the graphics. The HTML svg element is a container for SVG graphics. SVG stands for Scalable Vector Graphics. SVG is used to define graphics for the Web. SVG is a W3C recommendation 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #e9c46a;">
Your browser does not support the HTML5 canvas tag.
</canvas>
Enter fullscreen mode Exit fullscreen mode

Everyday year there are many updates in the web development field to make task simpler, mobile friendly and support all modern browser. In the version html4 we have to use JavaScript to insert date, color and many other properties but now thank you to html5 which has solved this properties. Friends and to my senior web devs let me know in the comments below, share if I have made any mistakes with my articles.

Add comment