26/12/24
CASE STUDY-HTML TAGS
HTML Tags with Descriptions and Usage
<html>
Defines the root of an HTML document. All content must be inside this tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
<head>
Contains metadata, title, links to stylesheets, and scripts.
Example:
<head>
<title>Website Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<title>
Defines the title of the webpage, shown on the browser tab.
Example:
<title>My Awesome Page</title>
<body>
Contains the visible content of the webpage.
Example:
<body>
<h1>Welcome to my website</h1>
<p>This is a sample paragraph.</p>
</body>
<h1> to <h6>
Headings for different sections, where <h1> is the largest and <h6> is the smallest.
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
<p>
Defines a paragraph of text.
Example:
<p>This is a paragraph with some content.</p>
<b>
Makes text bold without semantic importance.
Example:
<p>This is a <b>bold</b> word.</p>
<i>
Makes text italic without semantic importance.
Example:
<p>This is <i>italic</i> text.</p>
<u>
Underlines text.
Example:
<p>This is <u>underlined</u> text.</p>
<strong>
Adds semantic importance by making text bold.
Example:
<p>This is <strong>important</strong> text.</p>
<em>
Emphasizes text by making it italic.
Example:
<p>This is <em>emphasized</em> text.</p>
<br>
Inserts a line break.
Example:
<p>First line.<br>Second line.</p>
<hr>
Creates a horizontal line to separate content.
Example:
<p>Section 1</p>
<hr>
<p>Section 2</p>
<mark>
Highlights text.
Example:
<p>This is <mark>highlighted</mark> text.</p>
<ul>
Creates an unordered list (bullets).
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
Creates an ordered list (numbers).
Example:
<ol>
<li>First</li>
<li>Second</li>
</ol>
<li>
Defines a list item inside <ul> or <ol>.
Example:
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<a>
Defines a hyperlink.
Example:
<a href="https://example.com">Visit Example</a>
<img>
Embeds an image.
Example:
<img src="image.jpg" alt="Sample Image">
<video>
Embeds a video file.
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<audio>
Embeds an audio file.
Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<iframe>
Embeds an external webpage.
Example:
<iframe src="https://example.com" width="600" height="400"></iframe>
<table>
Creates a table.
Example:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<tr>
Defines a row inside a table.
Example:
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<th>
Defines a header cell inside a table.
Example:
<th>Table Header</th>
<td>
Defines a data cell inside a table.
Example:
<td>Table Data</td>
<form>
Creates a form for user input.
Example:
<form action="submit.php" method="post">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
<input>
Defines an input field inside a form.
Example:
<input type="text" placeholder="Enter your name">
<button>
Creates a clickable button.
Example:
<button>Click Me</button>
<label>
Associates text with an input field.
Example:
<label for="name">Name:</label>
<input type="text" id="name">
