HTML5 में नए Elements

HTML5 ने ८ नए semantic elements प्रस्तुत किये है । ये सारे block-level elements है। block-level elements वह होते है जो लाइन का पूरा width लेकर नए line से शुरू होते है ।
header, section, footer, aside, nav, main, article, figure.

Internet Explorer 8 और उससे पुराने browsers में सारे HTML5 elements अच्छी तरह नहीं दिख पाते है । इसलिए HTML5Shiv का इस्तेमाल करना चाहिए । HTML5Shiv एक JavaScript उपाय है ताकि HTML5 elements पुराने browsers में भी काम करे । html5shiv.js को आप इस तरह अपने HTML5 पेज में डाल सकते है ।

<!DOCTYPE html>
<html>
<head>
<!–[if lt IE 9]>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js”></script>
<![endif]–>
</head>


HTML5 के सारे नए elements के नीचे समझाए गए है ।

<article>  HTML page me article को define करता है |

<aside>   page के content के बगल के content को  define करता है |

<details> अतिरिक्त विवरण जो user देख सकता है |

<dialog> dialog box या window को define करता है |

<figcaption> <figure> element के caption को  define करता है |

<figure> ये tag diagrams, photos इत्यादि के लिए इस्तेमाल किआ जाता है

<footer> page के footer को define करता है |

<header> page के header को define करता है |

<main> page के main content को define करता है |

<mark> marked यानि चिह्नित text को define करता है |

<meter> माप या  measurement को define करता है |

<nav> navigation links जैसे menu को define करता है |

<progress> किसी कार्य के प्रगति को define करता है |

<section> page के section या अनुभाग को define करता है |

<time> date/time को define करता है |

नए Form Elements

<datalist> input controls के पहले से defined options को define करता है |

<keygen> Form के key-pair generator field को define करता है |

<output> गणना के परिणाम को define करता है |

नए Input Types
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

नए Input Attributes
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

HTML5 Graphics

<canvas> JavaScript से की गयी  चित्रकारी को define करता है |

<svg> SVG से की गयी  चित्रकारी को define करता है |

नए Media Elements

<audio> ध्वनि या संगीत को define करता है |

<embed> बाहरी plug-ins को define करता है |

<source> <video> और <audio> के  sources  को define करता है |

<video> video या movie content को define करता है |

HTML5 page का उदाहरण |

<!DOCTYPE html>
<html lang=”en”>
<title>HTML5 in Hindi</title>
<meta charset=”utf-8″>

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”>
</script>
<![endif]–>

<style>
body {
font-family:arial
}
header,footer,section,article {
background-color:rey;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>

<body>

<header>
<h1>Code Hindi</h1>
</header>

<nav>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</nav>

<section>
<h2>Any Section</h2>

<article>
<h2>Article 1</h2>
<p>Article content</p>
</article>

<article>
<h2>Article 2</h2>
<p>Article content</p>
</article>

</section>

<footer>
<p>Footer text</p>
</footer>

</body>
</html>

Leave a Reply