-->

HTML Block

There are two types of tags in HTML i.e. block level and inline. Whenever the block level tags are shown in the webpage, a space of line is placed before and after them automatically. Some common block level tags are being given below.

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>

The tags of the second type are inline tags. When these tags are used, in the webpage they show up in the line of their previously used tags. If you do not use <br/> tags then there is no space before and after them. Some inline tags are given below.

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

HTML  <div > Tag

The <div> tag is used to divide the page. This is also called division tag. You can use other HTML tags in this tag. <div> is a block level tag. You can design your webpage using this tag with CSS. This page divides the entire page into the section.

These sections can be hide and show when you need it. By doing this, the information will be shown to the visitor even when on the webpage, when he wants to see it. The applied CSS applies to all the tags inside of <div>.

The <div> tag can be used to separate different types of information from a webpage. An example of this is being given below.

<div style="color:white;background-color:black;" > This is first section. </div>

<div style="color:yellow;background-color:red;" > This is first section. </div>

Some other Block Level Tags

 

Tags

Description

 <form>

<form> tag is a block level tag. With this tag, you define the beginning and end of the form on a webpage. Related tags related to other HTML forms come in the same tag.

 <h1>..... <h6>

All heading tags are block level tags. Every heading defines a block of itself before and after it is automatic line break.

 <p>

As you know <p> tag is defined by paragraph and every paragraph breaks before and after the line breaks. Therefore, <p> tag is also considered as block level tag.

 <ol>, <ul>

Both list tags are <ol> or <ul> block level tags. Because every list define one section of itself.

 <table>

The <table> tag is also considered a block level tag because it creates a separate section. Which is separate from the entire content of the page and includes line breaks before and after it.

 <pre>

This is a block level tag. All other tags can be used in this. And by using it, as you configure tags in the text editor, they show up on the webpage.

 

HTML  <span > Tag

 

<span> is an inline tag. It lets you do text format. Whenever you use this tag, your text remains in the same line instead of going to the second line. The formatting that remains between this tag just applies to it. <span> tag does not have any attributes of itself, but you can use style and class attributes with this tag. You can also use this tag in the headings / paragraph. An example of this is being given below.

 

<p>This is a statement. <span style="color:green;" > This is a important line.</span> This is again normal line. </p>

 

 

Some other Inline Tags

 

Tags

Description

 <a>

<a> tag is considered inline tag. You can link any text while using it. Doing so shows in that webpage in the same line.

 <b>

<b> tags bold without any line break. So this is also an inline tag.

 <i>

<i> makes tag text italic. And this is also an inline tag.

 <u>

From the <u> tag you underline the text. It is also considered inline tag.

 <img>

From the <img> tag, you can insert the image between a text line. Doing so does not break any line in the text. Therefore <img> tag also has an inline tag.

 <input>

With the <input> tag you create other elements inside the form such as text-box and button etc. But if you do not use <br/> tag then there is no line break between these elements.

 

 


HTML Block

HTML में block level और inline दो तरह के टैग्स होते है। जब भी block level tags webpage में show होते है तो automatically इनके पहले और बाद में एक line का space होता है। कुछ common block level tags के बारे में नीचे दिया जा रहा है।

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>

दूसरे तरीके के tags inline tags होते है। जब ये tags यूज़ किये जाते है तो webpage  में ये अपने पहले यूज़ किये गए tag  की line में ही show  हो जाते है। यदि आप  <br / > tag इस्तेमाल ना करे तो इनके पहले और बाद में कोई space  नहीं होता है। कुछ inline tags नीचे दिए जा रहे है।

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

HTML  <div > Tag

<div > tag page को divide करने के लिए यूज़ किया जाता है। इसे division tag भी कहते है। इस tag में आप दूसरे HTML tags को यूज़ कर सकते है।  <div > एक block level tag है। इस tag को CSS के साथ यूज़ करते हुए आप अपने webpage को design कर सकते है। ये page पुरे page को section में divide कर देता है।

इन sections को आप जरुरत पड़ने पर hide और show कर सकते है। ऐसा करने पर information webpage पर होते हुए भी visitor को तब show होगी जब वह देखना चाहेगा।  <div > पर apply की गयी CSS  <div > के अंदर के सभी tags पर apply होती है।

किसी webpage की अलग अलग तरह की information को separate करने के लिए  <div > tag को यूज़ किया जा सकता है। इसका उदाहरण नीचे दिया जा रहा है।

<div style="color:white;background-color:black;" > यह पहला खंड है। </div>

<div style="color:yellow;background-color:red;" > यह दूसरा खंड है। </div>

कुछ अन्य Block Level Tags

 

टैग

व्याख्या

 <form>

 <form> tag एक block level tag होता है। इस tag से आप किसी webpage पर form की beginning और end define करते है। बाकी दूसरे HTML forms से related tags इसी tag के अंदर आते है।

 <h1>..... <h6>

सभी heading tags block level tags होते है। हर heading खुद का एक block define करती है जिसके पहले और बाद में automatic line break होता है।

 <p>

जैसा की आप जानते है  <p> tag से paragraph define किया जाता है और हर paragraph के पहले और बाद में line break होता है। इसलिए  <p> tag को भी block level tag माना गया है।

 <ol>, <ul>

दोनों list tags  <ol> or  <ul> block level tags होते है। क्योंकि हर list खुद का एक section define करती है।

 <table>

 <table> tag भी एक block level tag माना जाता है क्योंकि ये एक अलग section create करता है। जो page के पुरे content से अलग होता है और अपने पहले और बाद में line break include करता है।

 <pre>

ये एक block level tag होता है। इसमें दूसरे सभी tags यूज़ किये जा सकते है। और इसे यूज़ करने से जैसे आप text editor में tags को configure करते है वैसे ही वे webpage पर show होता है।

 

HTML  <span > Tag

 

 <span > एक inline tag है। इससे आप text format करते है। जब भी आप इस tag को यूज़ करते है तो इससे आपका text दूसरी line में ना जाकर उसी line में रहता है। जो text इस tag के बीच रहता है formatting बस उसी पर apply होती है।  <span > tag के खुद के कोई attributes नहीं होते है लेकिन आप style और class attributes को इस tag के साथ यूज़ कर सकते है। इस tag को आप headings/paragraph में भी यूज़ कर सकते है। इसका उदाहरण नीचे दिया जा रहा है।

<p> यह एक पंक्ति है।  <span style="color:green;" > यह एक महत्वपूर्ण पंक्ति है। <span> यह एक सामन्य पंक्ति है। </p>

 

 

कुछ अन्य Inline Tags

 

टैग

व्याख्या

 <a>

 <a> tag को inline tag माना जाता है। इसे यूज़ करते हुए आप किसी भी text को link बना सकते है। ऐसा करने से वह webpage में उसी line में show होता है।

 <b>

 <b> tag बिना line break के किसी भी text को bold करता है। इसलिए ये भी एक inline tag होता है।

 <i>

 <i> tag text को italic बनाता है। और ये भी एक inline tag होता है।

 <u>

 <u> tag से आप text को underline करते है। इसे भी inline tag माना जाता है।

 <img>

 <img> tag से आप किसी text line के बीच में image insert कर सकते है। ऐसा करने से text में कोई line break नहीं आता है। इसलिए  <img> tag भी एक inline tag होता है।

 <input>

 <input> tag से आप form के अंदर दूसरे elements create करते है जैसे की text-box और button आदि। लेकिन यदि आप  <br/> tag यूज़ ना करे तो इन elements के बीच कोई line break नहीं होता है।

 

Comments


ravi ( Date :12 Feb,2018) :
Good Tutorial kyuki ye hindi or english dono me h