HTML Tags with Explanations and Examples
<!DOCTYPE html>
Explanation: Declares the document type and version of HTML.
Example:
<!DOCTYPE html>
<html>
Explanation: The root element of an HTML document. Contains all other elements.
Example:
<html>
<head></head>
<body></body>
</html>
<head>
Explanation: Contains metadata, links to external stylesheets, scripts, and the page title.
Example:
<head>
<title>My Web Page</title>
</head>
<title>
Explanation: Specifies the title of the webpage, shown in the browser's title bar.
Example:
<title>Home Page</title>
<body>
Explanation: Contains the visible content of the webpage, such as text, images, and links.
Example:
<body>
<h1>Welcome!</h1>
</body>
<h1> to <h6>
Explanation: Defines HTML headings, from <h1> (largest) to <h6> (smallest).
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>
Explanation: Represents a paragraph of text.
Example:
<p>This is a paragraph of text.</p>
<a>
Explanation: Defines a hyperlink, used to link to another page or resource.
Example:
<a href="https://www.example.com">Visit Example</a>
<img>
Explanation: Embeds an image into the webpage.
Example:
<img src="image.jpg" alt="Description of image">
<ul>, <ol>, and <li>
Explanation: Creates lists. <ul> for unordered lists, <ol> for ordered lists, and <li> for list items.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
<div>
Explanation: Defines a division or section in the document, often used for layout and styling.
Example:
<div>
<p>This is a div block.</p>
</div>
<span>
Explanation: Used to group inline elements for styling purposes.
Example:
<p>This is <span style="color: red;">important</span> text.</p>
<strong> and <em>
Explanation: <strong> displays text in bold, <em> displays text in italics.
Example:
<p>This is <strong>bold</strong> text.</p>
<p>This is <em>italicized</em> text.</p>
<table>, <tr>, <td>, <th>
Explanation: Creates tables. <table> for table, <tr> for row, <td> for cell, and <th> for header cell.
Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<form>
Explanation: Defines an input form to collect user data.
Example:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
<input>
Explanation: Defines input fields, such as text, radio buttons, and checkboxes.
Example:
<input type="text" name="username" placeholder="Enter Username">
<input type="radio" name="gender" value="male"> Male
<input type="checkbox" name="subscribe"> Subscribe to newsletter
<button>
Explanation: Defines a clickable button.
Example:
<button type="submit">Click Me!</button>
<br>
Explanation: Inserts a line break.
Example:
<p>Line 1<br>Line 2</p>
<hr>
Explanation: Inserts a horizontal line.
Example:
<hr>
<meta>
Explanation: Provides metadata, like character encoding and viewport settings.
Example:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link>
Explanation: Links external resources like stylesheets.
Example:
<link rel="stylesheet" href="styles.css">
<script>
Explanation: Embeds JavaScript into an HTML page.
Example:
<script>
console.log('Hello, world!');
</script>
