|4. HTML Tags
Chapter 4HTML Tutorial~1 min read

HTML Tags

Paired Tags vs Self-Closing Tags

जर तुम्हाला एक सुंदर website बनवायची असेल तर Tags समजणे essential आहे. HTML tag म्हणजे angle brackets (< >) मध्ये enclosed keyword — हे browser ला content कसा display करायचा ते सांगते.

सगळ्यात जास्त वापरले जाणारे Tags

खालील tags 70% HTML usage cover करतात. हे नीट माहित असणे खूप important आहे:

  • Document Structure: <!DOCTYPE html>, <html>, <head>, <body>
  • Metadata: <title>, <meta>, <link>
  • Text: <p>, <h1>–<h6>, <strong>, <em>, <br>, <hr>
  • Lists: <ul>, <ol>, <li>
  • Links & Media: <a>, <img>, <audio>, <video>
  • Forms: <form>, <input>, <button>, <select>, <textarea>
  • Tables: <table>, <tr>, <th>, <td>
  • Semantic: <header>, <nav>, <main>, <section>, <article>, <footer>

Paired Tags (Container Tags)

Paired tags म्हणजे Opening tag आणि Closing tag दोन्ही असतात. Content मध्ये असतो. Closing tag मध्ये forward slash असतो.

Paired Tags — उदाहरण

html
<!-- Paragraph — Opening tag + Content + Closing tag -->
<p>हा एक paragraph आहे.</p>

<!-- Heading -->
<h1>हे एक heading आहे.</h1>

<!-- Bold text -->
<strong>हे bold text आहे.</strong>

Unpaired Tags (Self-Closing Tags)

Self-closing tags ला closing tag लागत नाही. यांना content नसतो. हे standalone tags आहेत.

Self-Closing Tags — उदाहरण

html
<!-- Line Break — नवीन ओळ -->
<br />

<!-- Horizontal Rule — आडवी रेषा -->
<hr />

<!-- Image -->
<img src="photo.jpg" alt="Photo" />

<!-- Input field -->
<input type="text" />
📌

जर तुम्ही नंतर React किंवा Next.js शिकणार असाल तर self-closing tags नेहमी <br/>, <hr/> असे लिहा — slash सह. हे आत्तापासूनच सवय करा.

Marathi Analogy

🏷️ Analogy: Tags म्हणजे दुकानातील labels सारखे — "Electronics", "Clothes" label लावल्यावर कळते काय आहे. HTML tags browser ला सांगतात — हा content paragraph आहे, हे heading आहे, हे image आहे.

Key Points — लक्षात ठेवा

  • HTML tag = angle brackets मध्ये keyword — <tagname>
  • Paired tags: <p>content</p> — opening + closing दोन्ही
  • Self-closing tags: <br/>, <hr/>, <img/> — closing नाही
  • Tags case-insensitive — पण lowercase लिहणे best practice
  • React/Next.js साठी self-closing slash <br/> लिहणे सवय करा
0/13 chapters पूर्ण