Hello readers, Today in this blog we will discuss about HTML5 various elements, its syntax and various tags that are used in it.
Features included in HTML5 -
- The tag name remains uppercase.
- For attributes the quotes remains optional.
- The attributes value also remains optional.
- The closing empty elements remains optional.
Below is the syntax to the various tags used in HTML5 -
HTML5 Document:-
In HTML5, the syntax to the doctype is <!DOCTYPE html>
Meta Tag :-
The syntax to the character encoding in HTML5 is
<meta charset = “UTF-8”>
Script Tag :-
The syntax of the script tag does not includes a type attribute containing some extra information. We can simply write it as
<script src=”scriptfile.js”></script>
Link Tag :-
The syntax to write link in HTML5 is as follows -
<link rel=”stylesheet” href=”stylefile.css”>
New and Updated HTML5 Elements :-
HTML5 has introduces 28 new elements , these are as follows -
<section>, <article>, <aside>, <header>, <footer>, <nav>, <figure>, <figcaption>,<video>, <audio>, <source>, <embed>, <mark>, <progress>, <meter>, <time>, <ruby>, <rt>, <rp>, <wbr>, <canvas>, <command>, <details>, <summary>, <datalist>, <keygen> and <output>
HTML5 has updated some of the previous existing elements which is useful for creating an effective website. These are :-
- The <a> element now contain flow content instaed of just using phrasing content.
- The <hr> element represent a paragraph-level now.
- The <cite> element represents the title of a work.
- The <strong> element represents importance rather than strong emphasis.
Below is the list of various new elements of HTML5 -
-
<canvas> - It defines the graphic design using javascript.
-
<svg> - It defines multimeda and graphic content using SVG.
-
<audio> - It defines the sound or some music content.
-
<video> - It defines a movie or video content.
-
<track> - It defines tracks for <video> and <audio> contents.
-
<source> - It defines the source for the <video> and <audio> content.
-
<embed> - It represents containers for some external applications such as plugins.
- New Semantic / Structural Elements -
-
<article> - It defines the article of the content.
-
<aside> - It defines the content that is aside from the rest of the page.
-
<bdi> - It defines to the part of a text that might be formatted in some other direction from the remainning text.
-
<details> - It defines to the additional details that a user can view or hide.
-
<dialog > - It represents to a dialog box or a window.
-
<figcaption> - It defines caption to the imgae used.
-
<figure> - It defines to some code listing , diagram or photos used in the content.
-
<footer> - It defines to the content representing the footer part.
-
<header> - It defines header for the document or some section of a content.
-
<main> - It represents the main content of a document.
-
<mark> - It represents to the highlighted text in the content.
-
<meter> - It defines to the scalar measurement to the content.
-
<nav> - It represents to the navigation link in a document.
-
<progress> - It represents to the progress showing by any task.
-
<time> - It represents to the time/date in a document.
-
<wbr> - It represents to the link break in a content.
-
<section> - It define to a section in a document.
-
<ruby > - It defines to a ruby annotation.
-
<datalist > - It defines to the pre- defined options for input controls in a form.
-
<keygen> - It represents to a key pair generated field in a form.
-
<output> - It represent to result of some calculation.
Some new Input types updated in HTML5 are -:
-
color
-
date
-
datetime
-
datetime-local
-
email
-
month
-
number
-
range
-
search
-
tel
-
time
-
url
-
week
Below is the list of some removed elements these are -:
-
<acronym>
-
<applet>
-
<basefont>
-
<big>
-
<center>
-
<dir>
-
<form>
-
<frameset>
-
<noframes>
-
<strike>
-
<tt>
Some of the removed elements from HTML4.1 are used in HTML5 with a different name or in CSS.
Conclusion :-
Hence, HTML5 elements are easy to learn and understand for creating an effective websites having various features in it.
Note :- In the next blog we will discuss about the various attributes used in HTML5.
0 Comment(s)