HTML Tags and Attributes
5.1 What are Tags?
• Tags are the building blocks of HTML.
• They tell the browser how to interpret and display content.
• Most tags come in pairs:
• Opening tag → <p>
• Closing tag → </p>
• Content in between → <p>Hello World</p>
• They tell the browser how to interpret and display content.
• Most tags come in pairs:
• Opening tag → <p>
• Closing tag → </p>
• Content in between → <p>Hello World</p>
5.2 Basic Syntax
html
1<tagname>Content goes here</tagname>Example:
html
1<h1>This is a heading</h1>
2<p>This is a paragraph.</p>5.3 Types of Tags
1. Container (Paired) Tags
• Have an opening <tag> and a closing </tag>.
• Example: <p>Some text</p>.
2. Empty (Self-Closing) Tags
• Do not wrap content.
• Example: <br /> (line break), <img /> (image).
• Have an opening <tag> and a closing </tag>.
• Example: <p>Some text</p>.
2. Empty (Self-Closing) Tags
• Do not wrap content.
• Example: <br /> (line break), <img /> (image).
5.4 What are Attributes ?
• Attributes give extra information about elements.
• Written inside the opening tag.
• Always in the form → name="value".
Here:
href → attribute of <a> (link destination).
src and alt → attributes of <img> (image path + description).
• Written inside the opening tag.
• Always in the form → name="value".
html
1<a href="https://example.com">Visit Example</a>
2<img src="logo.png" alt="Website Logo" />Here:
href → attribute of <a> (link destination).
src and alt → attributes of <img> (image path + description).
5.5 Common Global Attributes
• id → unique identifier.
• class → groups elements for styling.
• title → tooltip text.
• lang → language of content.
• style → inline CSS styling.
Example:
• class → groups elements for styling.
• title → tooltip text.
• lang → language of content.
• style → inline CSS styling.
Example:
html
1<p id="intro" class="highlight" title="Intro text" lang="en">
2 This paragraph has attributes.
3</p>5.6 Pro Tips
• Tag names are not case-sensitive (<P> = <p>), but convention is lowercase.
• Always quote attribute values (alt="Logo", not alt=Logo).
• Avoid mixing content with inline style — better handled in CSS.
• Always quote attribute values (alt="Logo", not alt=Logo).
• Avoid mixing content with inline style — better handled in CSS.
5.7 Key Takeaways
• HTML is built from tags, usually in opening/closing pairs.
• Empty tags exist for things like images and line breaks.
• Attributes provide extra details (like links, IDs, or alt text).
• Global attributes (id, class, title, lang, style) can be used on almost any tag.
• Empty tags exist for things like images and line breaks.
• Attributes provide extra details (like links, IDs, or alt text).
• Global attributes (id, class, title, lang, style) can be used on almost any tag.