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>
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>
Output:
- 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>
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>
- 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>
Ouput:
- 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>
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.
Top comments (0)