HTML Elements kya hai? What is HTML Elements in Hindi

HTML Elements in Hindi: HTML file को बनानें के लिए elements की आवश्यकता होती है। इनके जरिये ही आप एक responsible web pages को create कर सकते हो।

इस post में हमं जानेंगें की HTML elements kya hai, साथ ही हमं जानेंगें की starting tag और end tag क्या होता है?

HTML elements को अच्छे से जानें के लिए आपको कहीं और जानें की आवश्यकता नहीं है। आप इसी post को अच्छे से पढ़ेगें तो HTML elements के बारे में पूरा knowledge हो जाएगा।

चलिए बिना किसी देरी के शरू करते हैं और जान लेते हैं की HTML elements kya hai।

Table of Contents

HTML Elements kya hai?

जब आप कोइ web page create करते हो तो बहुत से elements का use किया जाता है। किसी भी web page में content को आवश्य डाला जाता है, तभी web page को बनानें का महत्व होता है।

अगर आप खाली web page के code को भी देखते हो तो उसमें भी बहुत से elements देखनें को मिलते हैं। लेकिन आप चाहते हो की web page में कुछ content देखनें को मिले तो ऐसे में अलग से elements का use किया जाता है।

आसान भाषा में कहें तो HTML element एक तरह से container होता है। जिसमें tags का use किया जाता है। इसी के अंदर ही content को रखा जाता है।

HTML elements के कुछ मुख्य काम इस प्रकार है:

इसके जरिये आप heading को create कर सकते हो।
साथ ही इसके जरिये आप paragraph भी create कर सकते हो।
HTML elements कर जरिये आप images, audio, video आदि भी insert कर सकते हो।
इसके जरिये आप table भी create कर सकते हो।
साथ ही आप lists भी create कर सकते हो।

HTML में elements को start करनें के लिए starting tag, और इसके अंदर content होता है, last में end tag होता है। इसे एक example के जरिये समझनें की कोशिश करते हैं।

<tagname> यहां पर आपका content आएगा </tagname>

जैसे की मानलीजिये आप एक paragraph create करना चाहते हो तो इसके लिए सबसे पहले आपको tag का पता होना जरूरी है।

अब paragraph को create करनें के लिए <p> tag का use किया जाता है।

<p> This is First paragraph </p>

HTML में elements के जरिये web page में कैसे show करना है, वह decide किया जाता है। ताकि content को सही तरीके से show किया जा सके।

इन elements के जरिये ही web browser समझ जाता है की, किस content को कैसे show करना है। ताकि user के experience को increase किया जा सके।

Basic HTML Elements in Hindi

अब हमं कुछ basic HTML elements in Hindi के बारे में जान लेते हैं।

Example 1:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Your Web Page Title</title>
</head>

<body>
    <h1>This is First Title</h1>
    <p>This is for First Paragraph</p>
    <p>This is for Second Paragraph</p>
</body>

</html>

Output:

अब हमं code को आसान भाषा में समझनें की कोशिश करते हैं।

<!DOCTYPE html> : इसका मतलब document के type को स्पष्ट करना होता है। साथ ही बताता है की HTML का कौन सा version use किया जा रहा है।
<html lang=”en”>: इसे HTML का पहला element कहा जाता है। इसी HTML element in Hindi के जरिये ही web browser को मालूम चलता है की content किस भाषा में लिखा गया है। जैसा की आप देख सकते हो की ‘lang= “en”‘ का use हमनें code में किया है। “en” का साफ मतलब यह है की content english में है। वहीं अगर “en” की जगह “hi” होता तो इसका मतलब content hindi में है।
<head>: यह भी एक element है। जिसके अंदर web page का description आता है। जैसे की web page का meta और page का title आदि आते हैं। बाद में इसे </head> tag से close कर दिया जाता है।
<body>: इस tag के अंदर page का main content आता है। जो की user को web page में show हो जाता है। <body> tag को close करनें के लिए </body> से किया जाता है।
<h1>: इस tag का मतलब heading होता है। यह web page का main heading होता है। इस tag को first level of heading भी कहा जाता है।
<p>: यह एक paragraph tag है। इसमें paragraph को लिखा जाता है। इसमें लिखा गया paragraph web page में show होता है। Paragraph को close करनें के लिए </p> tag का use किया जाता है।

Void HTML Elements in Hindi

सभी HTML elements को starting tag की आवश्यकता तो होती है। लेकिन कुछ HTML elements को ending tag की आवश्यकता नहीं होती है।

इस तरह के elements में कुछ भी content नहीं लिखा जा सकता है। इस तरह के elements को ही void HTML element कहा जाता है। साथ ही इस तरह के elements को unpaired tag भी कहा जाता है। इसके अलावा void HTML Elements को empty HTML elements in Hindi भी कहा जाता है।

अब हमं कुछ void HTML elements in Hindi के बारे में जान लेते हैं। जैसे की आपनें <br> tag को देखा या use किया होगा। इसके जरिये line को break किया जा सकता है।

Void HTML element का ही एक और tag होता है। जिसे <hr> tag भी कहा जाता है। इसके जरिये horizontal line को web page में create कर सकते हैं।

अब हमं इसका एक उदाहरण देख लेते हैं।

Example 2:

<p>यह एक paragraph है <br> जिसमें line को break किया गया है।</p>

Output:

HTML Elements को दो parts में divide किया गया है?

इन दोनों parts के बारे में नीचे बताया गया है।

Block level elements in Hindi
Inline elements in Hindi

Block level elements in Hindi

इस तरह के elements के जरिये web page को छोटे-छोटे blocks में divide किया जाता है।
Block level elements हमेशा नई line से शरू होता है और यह left से right तक web page की full width को cover करता है।
इस तरह के elements में block level और inline elements दोनों ही आ जाते हैं।

नीचे बताये गये सभी elements को block level elements कहा जाता है।

<address> : इस element के जरिये author या owner की content information को web page या article में show किया जाता है।
<article> : यह tag independent होता है और इसमें अपना अलग content होता है।
<aside> : इस tag के जरिये अगर आपको web page में कुछ content को अलग show करना है तो इसका use किया जाता है।
<blockquote> : यह एक specific section के लिए use किया जाता है। जो की किसी दुसरे source या URL को quote करता है।
<canvas> : यदि आप web page में graphics को draw करना चाहते हैं तो canvas element का use कर सकते हो। साथ ही JavaScript का भी use करना होता है।
<dd> : इस tag के जरिये list के name को describe किया जाता है।
<div> : इसके जरिये HTML document में section तैयार किया जाता है और web page को divide किया जाता है।
<dl> : इस tag के जरिये description list को define किया जाता है।
<dt> : यह tag भी list के name को describe करनें के काम आता है।
<footer>: इस tag के जरिये HTML documents का footer define किया जाता है।
<form>: इसके जरिये आप HTML document का form create कर सकते हो। जिसके अंदर input, label, textarea, buttons आदि आते हों।
<h1> : इसे h1 heading भी कहा जाता है। इसके अलावा इसे main heading भी कहा जाता है।
<h2> : यह heading का 2 type होता है।
<h3> : इसे heading का 3 type भी कहा जाता है। यह h2 से छोटा होता है।
<h4> : इसे heading का 4 type कहा जाता है। यह आकार में h3 से छोटा होता है।
<h5> : यह heading का 5 type होता है। यह आकर में h4 से छोटा होता है।
<h6> : यह heading का 6 type होता है। यह आकर में h5 से छोटा होता है।
<header> : यह एक ऐसा container होता है जिसके जरिये सभी navigation links को एक साथ रखा जाता है।
<hr> : इस tag के जरिये horizontal line को web page में create किया जाता है। इसके जरिये content को separate किया जा सकता है।
<li> : यह tag list item को define करता है।
<main> : इस tag के अंदर HTML document का main content होता है।
<nav> : Nav tag को navigation tag भी कहा जाता है। इसमें navigation के links होते हैं।
<ol> : यह एक तरह से order list होती है।
<output> : यह calculation के result को show करनें के काम आता है।
<p> : इस tag के जरिये paragraph को represent किया जाता है।
<pre> : इस तरह के tag को preformatted tag कहा जाता है। इस तरह के elements में font का fixed width और space होता है।
<section> : इस tag के जरिये HTML document को sections में बांटा जाता है।
<table> : यह tag table को create करनें के काम आता है।
<ul> : इस tag के जरिये un-order list को create किया जाता है।
<video> : यदि आपको HTML document में video content को डालना हो तो इस tag का use किया जाता है।

Example 3:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Your Web Page Title</title>
</head>

<body>
    <h1>This is Main Heading</h1>
    <div style="background-color: green">This is first div</div>
    <div style="background-color: orange;">This is Second div</div>
    <p style="background-color: red;">This is paragraph</p>
</body>

</html>

output:

Inline HTML elements in Hindi

Inline elements वह elements होते हैं जो की text को different parts में divide कर देता है।
इस तरह के elements नई line से शरू नहीं होते हैं। साथ ही यह web page में width भी अपनें हिसाब से ही लेते हैं।
ज्यादातर inline elements दुसरे elements के साथ use किये जाते हैं।

नीचे बताये गए सभी elements को Inline HTML elements कहा जाता है।

<a>: इस तरह के tag को hyperlink कहा जाता है। इसमें आप link को enter करके destination तक पहुंच सकते हो।
<abbr>: यह tag abbreviation को define करता है। इसका simple अर्थ है की यह किसी title में description को show करता है। जब भी आप mouse को उसके उपर लेकर जाते हो।
<b>: इस तरह के tag के जरिये किसी भी text को bold किया जा सकता है।
<bdo>: इस tag का अर्थ Bi-Directional Override होता है। इसके जरिये text की direction को override किया जाता है।
<br>: यह tag line को break करनें के काम आता है।
<button>: इसके जरिये clickable button को create किया जा सकता है।
<cite>: इस tag के जरिये किसी भी text को creative बनाया जा सकता है।
<code>: यह tag computer code को web page में लिखनें के लिए use किया जाता है।
<dfn>: इस tag को definition element कहा जाता है और इसे content कर अंदर ही define किया जाता है।
<em>: इस tag को empasized text कहा जाता है। जब इस tag का use किया जाता है तो content italic में show होता है।
<i>: इस tag का use करके भी content italic में show होता है।
<img>: यदि आपको web page में image को insert करना है तो इस tag का use किया जाता है।
<input>: इस tag के जरिये input field को create किया जाता है। जिसके बाद use data को enter कर सकता है।
<label>: इस tag के जरिये आप elements में label add कर सकते हो।
<map>: इस tag को image map भी कहा जाता है। यह एक तरह से clickable area होता है।
<object>: यह एक ऐसा container होता है जिसके जरिये web page में pictures, media player आदि डाल सकते हो।
<q>: इस tag के जरिये quotation को insert किया जा सकता है।
<script>: अगर आपको JavaScript का use करके events perform करनें हैं तो आप इस tag का use कर सकते हो।
<select>: इस tag के जरिये आप drop-down list create कर सकते हो।
<small>: यदि आपको text को small करना है तो इस tag का use कर सकते हो।
<span>: यह एक तरह से inline container होता है। जिसका use करके text के style को change किया जा सकता है।
<strong>: इस tag के जरिये text को bold में दिखाना हो तब use किया जाता है।
<sub>: यह tag subscript text को create करता है।
<textarea>: इस tag के जरिये आप बहुत सी lines को एक साथ input text में लिख सकते हो।
<time>: इस tag के जरिये specific time को define किया जा सकता है।
<var>: यह tag programming और mathematical expression को define करनें के काम आता है।

निष्कर्ष

इस post में आपने जाना की HTML elements kya hai, HTML elements in Hindi, साथ ही HTML elements के types के बारे में भी जाना है।

अब आपको HTML elements kya hai के बारे में पूरी जानकारी हो चुकी है। आपको यह post कैसे लगी हमें comment करके जरुर बताएं। आप इस post को like और share भी कर सकते हो।

इस post को पढने की लिए आपका बहुत-बहुत धन्यबाद। आपका समय शुभ रहे। जय हिन्द जय भारत!!