Lesson – 60 : Introduction to HTML અને HTMLનાં વિવિધ ટૅગ્સ

1. HTML શું છે?

HTMLનું સંપૂર્ણ નામ HyperText Markup Language છે. આ એક markup language છે જેનો ઉપયોગ વેબ પેજ બનાવવામાં થાય છે. HTML બ્રાઉઝરને બતાવે છે કે વેબ પેજ કેવી રીતે દેખાવું જોઈએ — લખાણ, છબી, લિંક્સ, ટેબલ, બટન વગેરે.

HTML કોઈ Programming Language નથી, પરંતુ Structure બનાવવા માટેની Language છે.


2. HTML કેવી રીતે કામ કરે છે?

HTMLમાં વિવિધ ટૅગ્સ (Tags) હોય છે. ટૅગ્સનું મુખ્ય કામ બ્રાઉઝરને સૂચના આપવાનું કે કઈ વસ્તુ કેવી રીતે બતાવવી.

ઉદાહરણ તરીકે:

<p>This is a paragraph</p>

અહીં <p> અને </p> Paragraph માટેના ટૅગ્સ છે.


3. HTML Document ની મૂળભૂત રચના (Basic Structure)

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is my first webpage.</p>
</body>
</html>
વિગતવાર સમજણ:
<!DOCTYPE html>

બ્રાઉઝરને HTML5 version બતાવવા માટે.

<html>

પૂરા HTML પેજનો મૂળ (Root) ટૅગ.

<head>

Header ભાગ — જેમાં title, meta tags, CSS વગેરે મૂકાય છે.

<title>

Webpageનું Title (browser tabમાં દેખાય છે).

<body>

વેબપેજની તમામ દેખાતી સામગ્રી (Content).


4. HTMLનાં મુખ્ય Tags (વિવિધ કેટેગરી મુજબ)

A) Text Formatting Tags
Tag ઉપયોગ
<h1> to <h6> Heading
<p> Paragraph
<br> Line Break
<b> Bold Text
<i> Italic Text
<u> Underline Text
<strong> Important Text
<small> Small Text

ઉદાહરણ:

<h1>આ Heading છે</h1>
<p>આ Paragraph છે</p>
<b>Bold Text</b>

B) Links અને Images Tags
Link Tag
<a href="https://google.com">Google ખોલો</a>

Image Tag
<img src="image.jpg" alt="Sample Image">

C) List Tags
Ordered List (Numbered List)
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Unordered List (Bulleted List)
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>

D) Table Tags
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jaydip</td>
<td>20</td>
</tr>
</table>

E) Form Tags
<form>
<label>Name:</label>
<input type="text">
<br><br>
<input type="submit" value="Submit">
</form>

F) Multimedia Tags
<video controls>
<source src="video.mp4" type="video/mp4">
</video>

<audio controls>
<source src=“music.mp3” type=“audio/mpeg”>
</audio>


5. HTML Tagsની ખાસિયતો

  • મોટા ભાગના HTML ટૅગ્સ pairમાં હોય છે: <p>...</p>

  • કેટલાક tags empty (self-closing) હોય છે: <br>, <img>, <hr>

  • HTML case-insensitive છે (પણ lowercase સાથે લખવું સારી પ્રેક્ટિસ છે)


HTML વેબ ડેવલપમેન્ટની પ્રથમ અને મહત્વની language છે. જો તમે વેબસાઇટ બનાવવી હોય તો HTMLની સમજ ખૂબ જ જરૂરી છે. વિવિધ HTML tagsની મદદથી તમે webpagesને structure આપી શકો છો અને attractive બનાવી શકો છો.