🟢 Foundation · Lesson 04

HTML Elements and Tags

HTML Elements और Tags

Anatomy of an Element — three parts

<p>  Alpine Public School  </p>
 │            │              │
 opening    content       closing
  tag                        tag

Think of a sandwich: opening tag = top bread, content = the filling, closing tag = bottom bread (same bread, but with a /). The complete sandwich — all three together — is called an element.

Tag vs Element — the interview one-liner

	Tag	Element
What	Just the bracket part: `<p>` or `</p>`	Opening tag + content + closing tag (the whole thing)
Example	`<h1>`	`<h1>Welcome</h1>`
Analogy	One slice of bread	The complete sandwich

Interview line: "A tag is the markup itself (); an element is the complete unit — opening tag, content, and closing tag together." Most people use the words loosely; knowing the precise difference marks you as careful.

Empty (Self-Closing / Void) Elements — no closing tag

Some elements have no content to sandwich, so they have no closing tag at all:

<br>                          line break
<hr>                          horizontal line
<img src="a.jpg" alt="...">   image
<input type="text">           form field
<meta charset="UTF-8">        page info
<link rel="stylesheet">       CSS attach

Memory trick: br, hr, img, input, meta, link — "these bring THINGS onto the page or give INFO; there is nothing to wrap."

Writing   with a slash is also valid (an old XHTML habit) — both   and   work in HTML5. But   is wrong — a void element never takes a closing tag.

Case Sensitivity — lowercase always

<P>Works but looks amateur</P>
<p>Professional standard</p>

HTML tags are not case-sensitive —  and  both render. But the universal convention (and XHTML/JSX requirement) is lowercase everywhere. Build the habit now; frameworks you meet later will demand it.

Exam Corner

Q: List 5 empty elements. br, hr, img, input, meta (also: link).

Q: What happens if you forget a closing tag? The browser guesses where it should end — sometimes right, sometimes swallowing the rest of the page into that element. Bold text running to the bottom of the page = an unclosed somewhere above.

Q: Is valid? No — void elements never have closing tags. or only.

Element की बनावट — तीन हिस्से

<p>  Alpine Public School  </p>
 │            │              │
opening    content       closing
  tag                        tag

Sandwich सोचिए: opening tag = ऊपर की bread, content = भरावन, closing tag = नीचे की bread (वही bread, बस / के साथ). पूरा sandwich — तीनों मिलाकर — element कहलाता है.

Tag vs Element — interview की one-liner

	Tag	Element
क्या	सिर्फ bracket वाला हिस्सा: `<p>` या `</p>`	Opening tag + content + closing tag (पूरी चीज़)
Example	`<h1>`	`<h1>Welcome</h1>`
Analogy	Bread की एक slice	पूरा sandwich

Interview line: "Tag खुद markup है (); element पूरी unit है — opening tag, content और closing tag मिलाकर." ज़्यादातर लोग शब्द ढीले use करते हैं; सटीक फर्क जानना आपको careful दिखाता है.

Empty (Self-Closing / Void) Elements — closing tag नहीं

कुछ elements में sandwich करने को content ही नहीं, इसलिए उनका closing tag होता ही नहीं:

<br>                          line break
<hr>                          horizontal line
<img src="a.jpg" alt="...">   image
<input type="text">           form field
<meta charset="UTF-8">        page info
<link rel="stylesheet">       CSS attach

Memory trick: br, hr, img, input, meta, link — "ये page पर CHEEZEIN लाते हैं या INFO देते हैं; लपेटने को कुछ है ही नहीं."

Slash के साथ   लिखना भी valid है (पुरानी XHTML आदत) — HTML5 में   और   दोनों चलते हैं. पर   गलत है — void element कभी closing tag नहीं लेता.

Case Sensitivity — हमेशा lowercase

<P>चलता है पर amateur दिखता है</P>
<p>Professional standard</p>

HTML tags case-sensitive नहीं हैं —  और  दोनों render होते हैं. पर universal convention (और XHTML/JSX की ज़रूरत) है हर जगह lowercase. आदत अभी बनाइए; आगे मिलने वाले frameworks इसकी मांग करेंगे.

Exam Corner

Q: 5 empty elements बताइए. br, hr, img, input, meta (और: link).

Q: Closing tag भूल जाएं तो क्या होता है? Browser अंदाज़ा लगाता है कि कहां खत्म होना चाहिए — कभी सही, कभी बाकी पूरा page उस element में निगल जाता है. Page के नीचे तक भागता bold text = ऊपर कहीं बिना बंद हुआ .

Q: क्या valid है? नहीं — void elements के closing tags होते ही नहीं. सिर्फ या .

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.