Scribd
Upload
1 views

HTML_30_Tags_with_Examples_and_Outputs

The document provides a comprehensive list of 30 HTML tags along with their descriptions, code examples, and outputs. Each tag is explained in terms of its purpose and how it is used in HTML documents. This serves as a reference for understanding basic HTML structure and elements.

Uploaded by

zeguslive
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
1 views

HTML_30_Tags_with_Examples_and_Outputs

The document provides a comprehensive list of 30 HTML tags along with their descriptions, code examples, and outputs. Each tag is explained in terms of its purpose and how it is used in HTML documents. This serves as a reference for understanding basic HTML structure and elements.

Uploaded by

zeguslive
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/ 8

30 HTML Tags with Examples and

Outputs
Index
S.No Tag Name
1 <html>
2 <head>
3 <title>
4 <meta>
5 <link>
6 <style>
7 <script>
8 <body>
9 <h1 to h6>
10 <p>
11 <a>
12 <img>
13 <ul>
14 <ol>
15 <li>
16 <table>
17 <tr>
18 <th>
19 <td>
20 <form>
21 <input>
22 <label>
23 <button>
24 <textarea>
25 <select>
26 <option>
27 <div>
28 <span>
29 <br>
30 <hr>

<html> – HTML Root


📌 Description: Wraps the entire HTML content.

💻 Code Example:
<!DOCTYPE html>
<html>
...
</html>

📊 Output: Defines the full HTML document structure.

<head> – Metadata Container


📌 Description: Holds metadata like title and links.

💻 Code Example:

<head>
<title>My Page</title>
</head>

📊 Output: Holds metadata, not displayed on the page.

<title> – Page Title


📌 Description: Displays title in browser tab.

💻 Code Example:

<title>My Website</title>

📊 Output: Displays the page title in browser tab.

<meta> – Meta Information


📌 Description: Defines metadata like charset or viewport.

💻 Code Example:

<meta charset="UTF-8">

📊 Output: No visible output, used for metadata.

<link> – External Resources


📌 Description: Links external CSS files.

💻 Code Example:

<link rel="stylesheet" href="styles.css">


📊 Output: No visible output, links to external files.

<style> – Internal CSS


📌 Description: Defines internal CSS styles.

💻 Code Example:

<style>
body {color: blue;}
</style>

📊 Output: Applies CSS styles to the document.

<script> – JavaScript Code


📌 Description: Embeds or links JS.

💻 Code Example:

<script>
alert('Hi');
</script>

📊 Output: Executes JavaScript code.

<body> – Page Content


📌 Description: Contains visible HTML content.

💻 Code Example:

<body>
<h1>Hello</h1>
</body>

📊 Output: Displays all visible content on page.

<h1> to <h6> – Headings


📌 Description: Defines headings, h1 is largest.

💻 Code Example:

<h1>Main</h1>
<h6>Smallest</h6>
📊 Output: Displays text with different heading sizes.

<p> – Paragraph
📌 Description: Represents a paragraph.

💻 Code Example:

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

📊 Output: Displays a block of text.

<a> – Hyperlink
📌 Description: Creates a hyperlink.

💻 Code Example:

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

📊 Output: A clickable link to another webpage.

<img> – Image
📌 Description: Embeds an image.

💻 Code Example:

<img src="pic.jpg" alt="Picture">

📊 Output: Displays an image on the page.

<ul> – Unordered List


📌 Description: Bulleted list.

💻 Code Example:

<ul>
<li>Item</li>
</ul>

📊 Output: Shows a bulleted list.

<ol> – Ordered List


📌 Description: Numbered list.
💻 Code Example:

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

📊 Output: Shows a numbered list.

<li> – List Item


📌 Description: Defines list item.

💻 Code Example:

<li>Item</li>

📊 Output: Shows an item inside a list.

<table> – Table
📌 Description: Creates a table.

💻 Code Example:

<table border='1'>
...
</table>

📊 Output: Creates a table layout.

<tr> – Table Row


📌 Description: Defines a table row.

💻 Code Example:

<tr>
<td>Cell</td>
</tr>

📊 Output: Creates a row in a table.

<th> – Table Header


📌 Description: Defines header cell.

💻 Code Example:
<th>Name</th>

📊 Output: Creates a header cell in a table.

<td> – Table Data


📌 Description: Defines data cell.

💻 Code Example:

<td>John</td>

📊 Output: Creates a data cell in a table.

<form> – Form
📌 Description: Creates a form.

💻 Code Example:

<form action='/submit'>...</form>

📊 Output: Creates a form to collect input.

<input> – Input Field


📌 Description: Creates an input box.

💻 Code Example:

<input type="text" name="user">

📊 Output: Displays a text box or other input field.

<label> – Label
📌 Description: Label for form input.

💻 Code Example:

<label for="user">Name:</label>

📊 Output: Label for a form control.

<button> – Button
📌 Description: Clickable button.
💻 Code Example:

<button>Click Me</button>

📊 Output: A clickable button.

<textarea> – Multi-line Text


📌 Description: Input for longer text.

💻 Code Example:

<textarea></textarea>

📊 Output: A multi-line text input box.

<select> – Dropdown
📌 Description: Creates a dropdown list.

💻 Code Example:

<select><option>One</option></select>

📊 Output: Creates a dropdown selection.

<option> – Dropdown Option


📌 Description: Options inside a select.

💻 Code Example:

<option value='1'>One</option>

📊 Output: Defines an option in dropdown.

<div> – Block Container


📌 Description: Container for block elements.

💻 Code Example:

<div>Block Content</div>

📊 Output: Groups content into a block (no output by itself).


<span> – Inline Container
📌 Description: Container for inline content.

💻 Code Example:

<span>Inline</span>

📊 Output: Groups content inline (no output by itself).

<br> – Line Break


📌 Description: Inserts a new line.

💻 Code Example:

Line 1<br>Line 2

📊 Output: Inserts a line break.

<hr> – Horizontal Rule


📌 Description: Inserts horizontal line.

💻 Code Example:

<hr>

📊 Output: Inserts a horizontal line.

You might also like