Scribd
Upload
6 views33 pages

HTML Tags1

The document provides a comprehensive overview of essential HTML tags, their purposes, and examples of usage with expected outputs. It covers foundational elements for webpage creation, interactive features, and a complete HTML page demo showcasing all discussed tags. Additionally, it includes a mini project layout plan for an HTML Elements Playground.

Uploaded by

kumari2004ramesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views33 pages

HTML Tags1

The document provides a comprehensive overview of essential HTML tags, their purposes, and examples of usage with expected outputs. It covers foundational elements for webpage creation, interactive features, and a complete HTML page demo showcasing all discussed tags. Additionally, it includes a mini project layout plan for an HTML Elements Playground.

Uploaded by

kumari2004ramesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 33

HTML tags along with their purpose and basic example with output.

These cover
the foundational elements you'll need when creating a webpage.

✅ 1. <!DOCTYPE html>
Declares the document type and HTML version.
<!DOCTYPE html>
✅ No visual output. It's just a declaration.

✅ 2. <html>
Root element of an HTML page.
<html>
</html>
✅ Wraps the entire page content.

✅ 3. <head>
Contains meta-information, links, title, etc.
<head>
<title>My Page</title>
</head>
✅ No visible output, but the title appears in the browser tab.

✅ 4. <body>

©GUVI Geek Network Private Limited


Holds the visible content of the page.
<body>
Hello World!
</body>
✅ Output:
Hello World!

✅ 5. <h1> to <h6>
Headings from biggest (<h1>) to smallest (<h6>)
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
✅ Output:
Heading 1
Heading 2
Heading 3

✅ 6. <p>
Paragraph tag
<p>This is a paragraph.</p>
✅ Output:
This is a paragraph.

✅ 7. <a>
Anchor (link) tag

©GUVI Geek Network Private Limited


<a href="https://example.com">Visit Example</a>
✅ Output:
Visit Example

✅ 8. <img>
Image tag (self-closing)
<img src="https://via.placeholder.com/100" alt="Placeholder Image">
✅ Output:

✅ 9. <ul>, <ol>, <li>


Unordered and ordered lists
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

<ol>
<li>First</li>
<li>Second</li>
</ol>
✅ Output:
 Apple
 Banana

©GUVI Geek Network Private Limited


1. First
2. Second

✅ 10. <div>
Block-level container
<div>This is a container</div>
✅ Output:
This is a container

✅ 11. <span>
Inline container
<span style="color: red;">Red Text</span>
✅ Output:
Red Text

✅ 12. <table>, <tr>, <td>, <th>


Table structure
<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Alice</td><td>25</td>
</tr>

©GUVI Geek Network Private Limited


</table>
✅ Output:
Name Age
Alice 25

✅ 13. <form>, <input>, <label>, <button>


Forms and inputs
<form>
<label for="name">Name:</label>
<input type="text" id="name">
<button type="submit">Submit</button>
</form>
✅ Output:
Name: [__________] [Submit]

✅ 14. <br>
Line break
Hello<br>World
✅ Output:
Hello
World

✅ 15. <hr>
Horizontal rule (divider)

©GUVI Geek Network Private Limited


<hr>
✅ Output:
A horizontal line appears.

And here are more useful and commonly used HTML tags, especially helpful for
structuring, media, semantic layout, and styling.

✅ 16. <strong> and <em>


For emphasizing text.
<strong>Bold text</strong>
<em>Italic text</em>
✅ Output:
Bold text
Italic text

✅ 17. <mark>
Highlights text.
<p>This is <mark>important</mark>!</p>
✅ Output:
This is important!

✅ 18. <code>

©GUVI Geek Network Private Limited


Displays inline code.
<p>Use <code>&lt;div&gt;</code> for layout.</p>
✅ Output:
Use <div> for layout.

✅ 19. <pre>
Preformatted text (preserves spaces & line breaks).
<pre>
Line 1
Line 2
Line 3
</pre>
✅ Output:
Line 1
Line 2
Line 3

✅ 20. <video>
Embeds a video.
<video controls width="250">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

©GUVI Geek Network Private Limited


✅ Output:
A video player (if movie.mp4 is present).

✅ 21. <audio>
Embeds audio.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
✅ Output:
An audio player (if audio.mp3 is present).

✅ 22. <iframe>
Embed another page, video, or map.
<iframe src="https://example.com" width="300" height="200"></iframe>
✅ Output:
An embedded website.

✅ 23. <nav>
For navigation menus (semantic).
<nav>
<a href="/">Home</a> |
<a href="/about">About</a>
</nav>

©GUVI Geek Network Private Limited


✅ Output:
Home | About

✅ 24. <section> / <article> / <aside>


Semantic containers for content.
<section>
<h2>News</h2>
<p>Latest updates here.</p>
</section>
✅ Output:
Organizes content logically (no visual change by default).

✅ 25. <header> / <footer>


Defines the top or bottom of a section/page.
<header>
<h1>Welcome to My Site</h1>
</header>

<footer>
<p>Copyright © 2025</p>
</footer>
✅ Output:
Visually groups header/footer content.

©GUVI Geek Network Private Limited


✅ 26. <button>
Clickable button (with or without a form).
<button>Click Me</button>
✅ Output:
[Click Me]

✅ 27. <label>
Labels an input field (improves accessibility).
<label for="email">Email:</label>
<input type="email" id="email">
✅ Output:
Email: [__________]

✅ 28. <select> and <option>


Dropdown menu.
<select>
<option>Apple</option>
<option>Banana</option>
</select>
✅ Output:
A dropdown with "Apple" and "Banana"

✅ 29. <textarea>
Multi-line text input.

©GUVI Geek Network Private Limited


<textarea rows="4" cols="30">Write your message...</textarea>
✅ Output:
A larger box to enter multiple lines.

✅ 30. <meta>
Metadata like charset, viewport, description (used inside <head>).
<meta charset="UTF-8">
<meta name="description" content="This is a sample site.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ Output:
No visible output, but helps with SEO, mobile responsiveness, and encoding.

Now, interactive HTML tags — these are elements that allow user interaction, like
input fields, controls, and dynamic behavior (often used with JS later).

🔹 1. <input>
Different types of user input fields.
<input type="text" placeholder="Enter text">

©GUVI Geek Network Private Limited


<input type="password" placeholder="Enter password">
<input type="checkbox"> I agree
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<input type="date">
<input type="color">
<input type="range">
<input type="file">
✅ Output:
Text box, password, checkbox, radio buttons, date picker, color picker, range slider,
file upload box.

🔹 2. <button>
Clickable button.
<button onclick="alert('Hello!')">Click Me</button>
✅ Output:
Clicking it shows: Hello!

🔹 3. <select> + <option>
Dropdown menu.
<select>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Mango</option>

©GUVI Geek Network Private Limited


</select>
✅ Output:
A dropdown with Apple, Banana, Mango options.

🔹 4. <textarea>
Multi-line text box.
<textarea rows="3" cols="30">Type here...</textarea>
✅ Output:
A larger box for typing multiple lines.

🔹 5. <details> + <summary>
Expandable content (accordion-like).
<details>
<summary>Click to expand</summary>
<p>This is hidden text revealed on click.</p>
</details>
✅ Output:
A collapsible section with hidden content.

🔹 6. <dialog> (Popup modal)


Native popup box (needs JavaScript to show).
<dialog id="myDialog">
<p>This is a dialog box.</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>

©GUVI Geek Network Private Limited


</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open
Dialog</button>
✅ Output:
Click "Open Dialog" → a modal appears.

🔹 7. <progress>
Progress bar.
<progress value="50" max="100"></progress>
✅ Output:
A progress bar halfway filled.

🔹 8. <meter>
Graphical gauge (like scores, temperatures, etc.)
<meter value="0.7">70%</meter>
✅ Output:
A colored bar indicating a level (70%).

🔹 9. <form> + Submit
Submits user input (default behavior refreshes page).
<form onsubmit="alert('Form submitted!'); return false;">
<input type="text" placeholder="Your name">
<button type="submit">Submit</button>
</form>

©GUVI Geek Network Private Limited


✅ Output:
Text box + Submit button. On submit, shows alert.

🔹 10. <label> + for


Associates text with inputs (better UX).
<label for="email">Email:</label>
<input id="email" type="email">
✅ Output:
Email label linked to the input field.

DEMO :

A complete HTML page with all the tags we've discussed — from basic structure to
interactive elements — including inline comments to help you understand what
each part does.
You can copy and paste this into any .html file and open it in your browser to see
the live output.

©GUVI Geek Network Private Limited


✅ Complete HTML Page with All Tags + Output Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="All HTML Tags Demo">
<title>All HTML Tags Demo</title>
</head>
<body>

<!-- Headings -->


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<!-- Paragraph and formatting -->


<p>This is a paragraph.</p>

©GUVI Geek Network Private Limited


<p>This is <strong>bold</strong> and <em>italic</em> and
<mark>highlighted</mark>.</p>
<p>Use <code>&lt;div&gt;</code> to create containers.</p>
<pre>
Line 1
Line 2
Line 3
</pre>

<!-- Horizontal Rule & Line Break -->


<hr>
Hello<br>World

<!-- Image and Link -->


<p>
<a href="https://example.com" target="_blank">Visit Example</a><br>
<img src="https://via.placeholder.com/100" alt="Placeholder Image">
</p>

<!-- List -->


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

©GUVI Geek Network Private Limited


</ul>

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

<!-- Table -->


<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Alice</td><td>25</td>
</tr>
</table>

<!-- Form Elements -->


<h2>Form Demo</h2>
<form onsubmit="alert('Form submitted!'); return false;">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name"><br><br>

©GUVI Geek Network Private Limited


<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email"><br><br>

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

<label>Gender:</label>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>

<label>Choose Fruits:</label>
<input type="checkbox"> Apple
<input type="checkbox"> Banana<br><br>

<label>Date:</label>
<input type="date"><br><br>

<label>Color Picker:</label>
<input type="color"><br><br>

<label>Range (0-100):</label>
<input type="range" min="0" max="100"><br><br>

©GUVI Geek Network Private Limited


<label>Upload File:</label>
<input type="file"><br><br>

<label>Dropdown:</label>
<select>
<option>Apple</option>
<option>Banana</option>
<option>Mango</option>
</select><br><br>

<label>Comments:</label><br>
<textarea rows="4" cols="40">Type something here...</textarea><br><br>

<button type="submit">Submit</button>
</form>

<!-- Interactive Elements -->


<h2>Interactive Elements</h2>

<button onclick="alert('Hello!')">Click Me</button><br><br>

<details>
<summary>Click to expand</summary>

©GUVI Geek Network Private Limited


<p>This is hidden content shown on click.</p>
</details><br>

<progress value="60" max="100"></progress> ← Progress Bar<br><br>


<meter value="0.7">70%</meter> ← Meter Tag<br><br>

<!-- Dialog -->


<dialog id="myDialog">
<p>This is a dialog box.</p>
<button
onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open
Dialog</button><br><br>

<!-- Media -->


<h2>Media</h2>

<p>Video:</p>
<video width="250" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support video.
</video><br><br>

©GUVI Geek Network Private Limited


<p>Audio:</p>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>

<!-- Semantic Layout -->


<header>
<h2>Header Section</h2>
</header>

<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>

<main>
<section>
<h3>News Section</h3>
<article>
<p>This is an article inside a section.</p>
</article>

©GUVI Geek Network Private Limited


</section>
<aside>
<p>This is a sidebar (aside).</p>
</aside>
</main>

<footer>
<p>&copy; 2025 My Website</p>
</footer>

</body>
</html>

✅ What You'll See When You Run It


 All headings, text styles, images, tables, and lists
 A full form with all input types
 Interactive elements like buttons, modals, dropdowns, and range sliders
 Embedded video and audio
 Clean semantic layout using <header>, <nav>, <section>, <footer>, etc.

🧩 Mini Project Layout Plan: HTML Elements Playground

©GUVI Geek Network Private Limited


 Header: Title and brief description
 Navigation Bar: Links to each section (via anchor links)
 Main Sections:
o Typography
o Text Formatting
o Lists and Tables
o Media
o Forms
o Interactive Elements
o Semantic Layout
 Footer: Copyright and credits

✅ Full Mini Project HTML Code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Elements Playground</title>
<style>

©GUVI Geek Network Private Limited


body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #f9f9f9;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
}
nav {
background: #444;
padding: 0.5em;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}

©GUVI Geek Network Private Limited


nav a:hover {
text-decoration: underline;
}
section {
padding: 20px;
margin: 10px auto;
max-width: 900px;
background: white;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
h2 {
border-bottom: 1px solid #ddd;
padding-bottom: 0.5em;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
</style>
</head>
<body>

©GUVI Geek Network Private Limited


<header>
<h1>HTML Elements Playground</h1>
<p>Explore all basic and interactive HTML tags in one place!</p>
</header>

<nav>
<a href="#typography">Typography</a>
<a href="#formatting">Formatting</a>
<a href="#lists-tables">Lists & Tables</a>
<a href="#media">Media</a>
<a href="#forms">Forms</a>
<a href="#interactive">Interactive</a>
<a href="#layout">Layout</a>
</nav>

<section id="typography">
<h2>Typography</h2>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<p>This is a paragraph with some <strong>bold</strong>, <em>italic</em>, and
<mark>highlighted</mark> text.</p>
<p>Inline code example: <code>&lt;div&gt;</code></p>

©GUVI Geek Network Private Limited


<pre>
Line 1
Line 2
Line 3
</pre>
<hr>
Line break example: Hello<br>World
</section>

<section id="formatting">
<h2>Links & Images</h2>
<p>
Visit: <a href="https://example.com" target="_blank">Example.com</a><br>
<img src="https://via.placeholder.com/100" alt="Placeholder">
</p>
</section>

<section id="lists-tables">
<h2>Lists and Tables</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

©GUVI Geek Network Private Limited


<ol>
<li>First</li>
<li>Second</li>
</ol>
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table>
</section>

<section id="media">
<h2>Media</h2>
<p>Video:</p>
<video width="300" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>Audio:</p>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</section>

©GUVI Geek Network Private Limited


<section id="forms">
<h2>Form Elements</h2>
<form onsubmit="alert('Form submitted!'); return false;">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name"><br><br>

<input type="password" placeholder="Password"><br><br>


<input type="checkbox"> I agree<br><br>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>

<input type="date"><br><br>
<input type="color"><br><br>
<input type="range"><br><br>
<input type="file"><br><br>

<select>
<option>Apple</option>
<option>Banana</option>
</select><br><br>

<textarea rows="4" cols="40">Type here...</textarea><br><br>

©GUVI Geek Network Private Limited


<button type="submit">Submit</button>
</form>
</section>

<section id="interactive">
<h2>Interactive Elements</h2>
<button onclick="alert('Hello!')">Click Me</button><br><br>

<details>
<summary>Click to expand</summary>
<p>Hidden text revealed on click.</p>
</details><br>

<progress value="60" max="100"></progress><br>


<meter value="0.7">70%</meter><br><br>

<dialog id="myDialog">
<p>This is a dialog box.</p>
<button
onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open
Dialog</button>
©GUVI Geek Network Private Limited
</section>

<section id="layout">
<h2>Semantic Layout</h2>
<header>
<h3>Header</h3>
</header>

<nav>
<a href="#">Home</a> |
<a href="#">About</a>
</nav>

<main>
<section>
<h4>News</h4>
<article>
<p>This is an article inside a section.</p>
</article>
</section>
<aside>
<p>This is an aside (sidebar).</p>
</aside>

©GUVI Geek Network Private Limited


</main>
</section>

<footer>
<p>&copy; 2025 HTML Playground Project</p>
</footer>

</body>
</html>

💡 Tips:
 You can enhance this further with CSS frameworks like Bootstrap or Tailwind.
 Add JavaScript later for real-time input handling or dynamic UI.
 Replace video/audio with real files or embed from YouTube.

©GUVI Geek Network Private Limited

You might also like