</>

Elements, Tags, and Attributes

Complete reference for HTML elements with examples and practice tasks

18 Sections50+ Examples18 Tasks

1. HTML Elements, Tags, and Attributes

An HTML element is a building block of a webpage that consists of a start tag, content, and an end tag. Elements form the structure of the content on the page.

Tags are the keywords that define the start and end of an element. Attributes provide additional information about the elements and are included within the opening tag.

index.html

Example: <a href="https://olevelcccexam.link">
Visit our site</a>

Here, <a> is the tag, href is an attribute,
and "Visit our site" is the content.

Tag Syntax:

Opening Tag: <tagname> — marks the beginning of an element
Content: The text or nested elements between tags
Closing Tag: </tagname> — marks the end of an element
Attribute: name="value" — provides extra info, always in the opening tag

index.html

<p align="center">This is a centered paragraph.</p>
<!-- <p> is the tag, align is the attribute, "center" is the value -->

1Practice Task

Create a simple HTML page with a <p> tag that has an align="center" attribute. Add a heading above it using the <h1> tag.

2. Empty Tags and Container Tags

HTML tags are categorized into two types based on whether they hold content or not:

Container Tags (Paired)

Have opening + closing tag, contain content.

<p>...</p>

<h1>...</h1>

<b>...</b>

<a>...</a>

<div>...</div>

<table>...</table>

Empty Tags (Self-closing)

No closing tag, no content inside.

<br> — Line break

<hr> — Horizontal rule

<img> — Image

<input> — Input field

<meta> — Metadata

<link> — External resource

index.html

<!-- Container Tag Example -->
<p>This paragraph has opening and closing tags.</p>

<!-- Empty Tag Examples -->
<br>
<hr>
<img src="image.jpg" alt="My Image">

2Practice Task

Write an HTML page using at least 3 container tags and 3 empty tags. Label each with a comment identifying it as container or empty.

3. Body Tag and Attributes

The <body> tag defines the main visible content of a web page. Everything displayed on screen goes inside this tag.

index.html

<body bgcolor="lightyellow" text="darkblue" 
      link="red" vlink="green" alink="orange"
      background="bg.jpg">
    <h1>Welcome to My Page</h1>
    <p>This is the body content.</p>
</body>

Attribute	Description
`bgcolor`	Sets the background color of the page
`text`	Sets the default text color
`background`	Sets a background image
`link`	Color of unvisited links
`vlink`	Color of visited links
`alink`	Color of active (clicked) links
`topmargin`	Top margin of the page
`leftmargin`	Left margin of the page

3Practice Task

Create a page with bgcolor="lightyellow", text color "darkblue", and link color "red". Add a heading, paragraph, and a link to google.com.

4. <p> Tag and Its Attributes

The <p> tag defines a paragraph. Browsers automatically add margin before and after each paragraph.

index.html

<p>This is a simple paragraph.</p>
<p align="center">This paragraph is center-aligned.</p>
<p align="right">This paragraph is right-aligned.</p>
<p align="justify">This paragraph text is justified. 
It stretches the text so each line has equal width.</p>

Attribute	Description
`align`	left (default), center, right, justify

Important: HTML ignores extra white spaces and line breaks in source code. Multiple spaces become one. Use <br> for breaks and   for extra spaces.

4Practice Task

Create a page with 4 paragraphs — one with each alignment value (left, center, right, justify). Each paragraph should have at least 2 lines of text.

5. <pre> Tag

The <pre> tag defines preformatted text. It preserves spaces and line breaks exactly as written. Text is displayed in a fixed-width font (Courier).

index.html

<pre>
    Name        Age     City
    ----        ---     ----
    Rahul       20      Delhi
    Priya       22      Mumbai
    Amit        19      Jaipur
</pre>

Unlike <p>, the <pre> tag does not collapse spaces or line breaks.

index.html

<p>This    has    extra    spaces.</p>
<!-- Browser shows: "This has extra spaces." -->

<pre>This    has    extra    spaces.</pre>
<!-- Browser shows: "This    has    extra    spaces." -->

5Practice Task

Create an HTML page that displays a multiplication table (1 to 5) using the <pre> tag. Columns should be properly aligned using spaces.

6. <br> Tag

The <br> tag inserts a line break. It is an empty tag (no closing tag). Useful for addresses, poems, or anywhere you need a line break without a new paragraph.

index.html

<p>
    Knobly Education<br>
    123, Main Street<br>
    New Delhi - 110001<br>
    India
</p>

<!-- Poem example -->
<p>
    Twinkle twinkle little star,<br>
    How I wonder what you are.<br>
    Up above the world so high,<br>
    Like a diamond in the sky.
</p>

<br>	<p>
Only adds a line break	Adds line break with margin
Empty tag (no closing)	Container tag (has closing)
No extra spacing	Adds space above and below

6Practice Task

Write your school/college address using <br>. Also write a short poem (4 lines) using <br> for line breaks.

7. HTML Formatting Elements

HTML provides several tags for formatting text:

index.html

<b>Bold Text</b>
<strong>Strong/Important Text</strong>
<i>Italic Text</i>
<em>Emphasized Text</em>
<u>Underlined Text</u>
<s>Strikethrough Text</s>
<del>Deleted Text</del>
<ins>Inserted Text</ins>
<mark>Highlighted Text</mark>
<small>Smaller Text</small>
<big>Bigger Text</big>
<sub>Subscript</sub> like H<sub>2</sub>O
<sup>Superscript</sup> like x<sup>2</sup>
<code>Inline Code</code>
<kbd>Keyboard Input</kbd>
<abbr title="HyperText Markup Language">HTML</abbr>
<blockquote>This is a blockquote.</blockquote>
<address>Contact: student@example.com</address>

Quick Reference:

<b> — Bold

<strong> — Strong

<i> — Italic

<em> — Emphasized

<u> — Underline

<del> — ~~Deleted~~

<mark> — Highlighted

<small> — Small

<sub> — H₂O

<sup> — x²

7Practice Task

Create a page demonstrating ALL formatting tags. Write H₂O using sub and a²+b²=c² using sup tags.

8. Heading Tags (h1-h6)

HTML provides six levels of headings. <h1> is the largest and most important, <h6> is the smallest.

index.html

<h1>Heading 1 - Most Important</h1>
<h2 id="heading-2">Heading 2</h2>
<h3 id="heading-3">Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 - Least Important</h6>

<h1 align="center">Centered Heading</h1>
<h2 id="right-aligned-heading" align="right">Right-aligned Heading</h2>

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Rules: Use only one <h1> per page. Do not skip heading levels. Headings help SEO.

8Practice Task

Create a page for your school: School Name (h1 centered), Department (h2), Course (h3), Subjects (h4), Topics (h5), Sub-topics (h6).

9. <img> Tag and Attributes

The <img> tag embeds images. It is a self-closing (empty) tag.

index.html

<img src="photo.jpg" alt="A photo" width="300" height="200">

<!-- Image with border -->
<img src="pic.jpg" alt="Picture" border="2">

<!-- Image as a link -->
<a href="https://knoblyweb.in">
    <img src="logo.png" alt="Knobly" width="100">
</a>

<!-- Image with text wrap -->
<img src="photo.jpg" alt="Photo" align="left" hspace="10" vspace="10">
<p>This text wraps around the image.</p>

Attribute	Description
`src`	Path/URL of the image (required)
`alt`	Alternative text if image fails (required)
`width`	Width in pixels or percentage
`height`	Height in pixels or percentage
`border`	Border around the image
`align`	left, right, top, middle, bottom
`hspace`	Horizontal space around image
`vspace`	Vertical space around image

9Practice Task

Create a page with 3 images: one left-aligned with text wrapping, one centered, and one as a clickable link. Set proper alt text for all.

10. <a> Anchor Tag

The <a> tag creates hyperlinks.

index.html

<!-- External link -->
<a href="https://www.google.com">Visit Google</a>

<!-- Open in new tab -->
<a href="https://www.google.com" target="_blank">Open in New Tab</a>

<!-- Email link -->
<a href="mailto:info@knoblyweb.in">Send Email</a>

<!-- Phone link -->
<a href="tel:+919876543210">Call Us</a>

<!-- Bookmark link (same page) -->
<a href="#section3">Jump to Section 3</a>
...
<h2 id="section3">Section 3</h2>

<!-- Download link -->
<a href="notes.pdf" download>Download Notes</a>

Attribute	Description
`href`	URL of the link destination (required)
`target`	_self (same tab), _blank (new tab), _parent, _top
`title`	Tooltip text on hover
`download`	Downloads file instead of navigating
`name`	Name of anchor (for bookmarks)

10Practice Task

Create a page with 5 link types: external, internal, email, phone, and a bookmark link that jumps to a section on the same page.

11. List Tags (ul, ol, dl)

HTML supports three types of lists:

A. Unordered List (<ul>)

index.html

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<!-- Types: disc (default), circle, square -->
<ul type="circle">
    <li>Circle bullet</li>
</ul>

<!-- Nested list -->
<ul>
    <li>Fruits
        <ul type="circle">
            <li>Apple</li>
            <li>Mango</li>
        </ul>
    </li>
</ul>

B. Ordered List (<ol>)

index.html

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

<!-- Types: 1, A, a, I, i -->
<ol type="A"><li>Uppercase letters</li></ol>
<ol type="i"><li>Lowercase Roman</li></ol>
<ol start="5"><li>Starts from 5</li></ol>

C. Description List (<dl>)

index.html

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

11Practice Task

Create: (a) Nested unordered list of favorite foods by category, (b) Ordered list of steps to make tea using Roman numerals, (c) Description list of 5 computer terms.

12. Table Tag and Attributes

Tables arrange data into rows and columns.

index.html

<table border="1" cellpadding="8" cellspacing="0" width="100%">
    <caption>Student Marks Sheet</caption>
    <tr bgcolor="#0ea5e9">
        <th>Roll No</th><th>Name</th>
        <th>Hindi</th><th>English</th><th>Math</th>
    </tr>
    <tr align="center">
        <td>1</td><td>Rahul</td>
        <td>85</td><td>90</td><td>95</td>
    </tr>
    <tr align="center" bgcolor="#f0f9ff">
        <td>2</td><td>Priya</td>
        <td>78</td><td>88</td><td>82</td>
    </tr>
</table>

<!-- Colspan & Rowspan -->
<table border="1">
    <tr><th colspan="3">Student Info</th></tr>
    <tr>
        <td rowspan="2">India</td>
        <td>Delhi</td><td>28°C</td>
    </tr>
    <tr><td>Mumbai</td><td>32°C</td></tr>
</table>

Attribute	Description
`border`	Border width in pixels
`cellpadding`	Space between content and border
`cellspacing`	Space between cells
`width`	Table width (px or %)
`bgcolor`	Background color
`colspan`	Merge columns horizontally
`rowspan`	Merge rows vertically
`align`	left, center, right

12Practice Task

Create a marksheet for 5 students: Roll No, Name, Hindi, English, Math, Science, Total, Percentage. Use colspan for title and bgcolor for alternate rows.

13. Form Tag and Elements

The <form> tag collects user input.

index.html

<form action="/submit" method="POST">
    <label>Name:</label><br>
    <input type="text" name="name" placeholder="Enter name" 
           size="30" maxlength="50"><br><br>

    <label>Password:</label><br>
    <input type="password" name="password"><br><br>

    <label>Email:</label><br>
    <input type="email" name="email"><br><br>

    <p>Gender:</p>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female

    <p>Hobbies:</p>
    <input type="checkbox" value="coding"> Coding
    <input type="checkbox" value="reading"> Reading

    <br><br><label>Course:</label>
    <select name="course">
        <option value="">-- Select --</option>
        <option value="olevel">O-Level</option>
        <option value="ccc">CCC</option>
    </select>

    <br><br><label>Message:</label><br>
    <textarea rows="4" cols="40"></textarea>

    <br><br>
    <input type="file"><br><br>
    <input type="color" value="#22d3ee">
    <input type="range" min="1" max="10">
    <br><br>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

Attribute	Description
`action`	URL where form data is sent
`method`	GET (in URL) or POST (in body)
`enctype`	Encoding type (for file uploads)

13Practice Task

Create a Student Registration Form: Name, Email, Password, DOB (date), Gender (radio), Course (dropdown with 5 options), Hobbies (checkboxes), Photo (file), Address (textarea), Submit & Reset buttons.

14. <div> and <span> Tags

<div> is a block-level container. <span> is an inline container.

index.html

<!-- div - Block level -->
<div style="background:#eee; padding:20px; margin:10px 0;">
    <h2 id="section-title">Section Title</h2>
    <p>Content in a div.</p>
</div>

<!-- span - Inline -->
<p>My name is <span style="color:blue; font-weight:bold;">
Rahul</span> and I study <span style="color:orange;">
Computer Science</span>.</p>

Feature	<div>	<span>
Type	Block-level	Inline
Width	Full width	Content width
New Line	Yes	No
Use	Group sections	Style inline text

14Practice Task

Create a page with 3 div sections (header, content, footer) with different background colors. Use span to highlight words inside the content div.

15. HTML5 Semantic Elements

Semantic elements describe their meaning clearly, helping browsers and search engines understand page structure.

index.html

<header>
    <nav>
        <a href="/">Home</a> | 
        <a href="/about">About</a>
    </nav>
</header>
<main>
    <article>
        <h1>Article Title</h1>
        <p>Content...</p>
    </article>
    <section>
        <h2 id="section-title">Section Title</h2>
    </section>
    <aside>
        <h3 id="related-links">Related Links</h3>
    </aside>
</main>
<footer>
    <p>&copy; 2025 Knobly Education</p>
</footer>

Semantic Tags:

<header> — Page header

<nav> — Navigation

<main> — Main content

<article> — Independent content

<section> — Thematic group

<aside> — Sidebar

<footer> — Page footer

<figure> — Image + caption

15Practice Task

Create a complete webpage using ONLY semantic elements: header with nav, main with article and aside, and footer. No div tags allowed.

16. Audio and Video Tags

HTML5 supports audio and video directly.

index.html

<!-- Audio -->
<audio controls>
    <source src="song.mp3" type="audio/mpeg">
    Browser does not support audio.
</audio>

<!-- Video -->
<video width="640" height="360" controls poster="thumb.jpg">
    <source src="video.mp4" type="video/mp4">
    Browser does not support video.
</video>

<!-- YouTube Embed -->
<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID"
    allowfullscreen></iframe>

Attributes:

controls — Show play/pause buttons

autoplay — Auto-start playing

loop — Repeat playback

muted — Start muted

poster — Video thumbnail image

16Practice Task

Create a multimedia page with an audio player, a video player with controls and poster, and an embedded YouTube video.

17. <iframe> Tag

The <iframe> tag embeds another HTML page within the current page.

index.html

<!-- Embed a webpage -->
<iframe src="https://www.example.com" 
    width="600" height="400"></iframe>

<!-- Embed Google Maps -->
<iframe src="https://www.google.com/maps/embed?pb=..."
    width="600" height="450" 
    style="border:0;" allowfullscreen 
    loading="lazy"></iframe>

<!-- Link targeting iframe -->
<iframe src="page.html" name="myframe" 
    width="100%" height="500"></iframe>
<a href="page2.html" target="myframe">Load Page 2</a>

17Practice Task

Create a page with an iframe that loads a website. Add 3 links that load different pages into the same iframe using target and name attributes.

18. HTML Entities (Special Characters)

Reserved characters in HTML must be displayed using entities.

Char	Entity	Code	Description
<	`<`	`<`	Less than
>	`>`	`>`	Greater than
&	`&`	`&`	Ampersand
"	`"`	`"`	Double quote
	` `	` `	Non-breaking space
©	`©`	`©`	Copyright
®	`®`	`®`	Registered
™	`™`	`™`	Trademark
₹	`₹`	`₹`	Rupee
♥	`&hearts;`	`♥`	Heart
→	`→`	`→`	Right arrow
★	`★`	`★`	Star

index.html

<p>5 &lt; 10 and 10 &gt; 5</p>
<p>Price: &#8377;500</p>
<p>&copy; 2025 Knobly Education</p>
<p>I &hearts; HTML</p>

18Practice Task

Display all entities from the table above. Also write: 5 < 10 & 10 > 5 using proper HTML entities.

Elements, Tags, and Attributes

1. HTML Elements, Tags, and Attributes

Tag Syntax:

2. Empty Tags and Container Tags

Container Tags (Paired)

Empty Tags (Self-closing)

3. Body Tag and Attributes

4. <p> Tag and Its Attributes

5. <pre> Tag

6. <br> Tag

7. HTML Formatting Elements

Quick Reference:

8. Heading Tags (h1-h6)

9. <img> Tag and Attributes

10. <a> Anchor Tag

11. List Tags (ul, ol, dl)

A. Unordered List (<ul>)

B. Ordered List (<ol>)

C. Description List (<dl>)

12. Table Tag and Attributes

13. Form Tag and Elements

14. <div> and <span> Tags

15. HTML5 Semantic Elements

Semantic Tags:

16. Audio and Video Tags

Attributes:

17. <iframe> Tag

18. HTML Entities (Special Characters)

Hello! 👋