Table of Contents
Span Element:
- It is an inline element.
- It is used to style small parts of text.
- It doesn't have semantic meaning.
Example :
<p>This is <span style="color:red;">important</span> text</p>
link Element:
- It is used to navigate from one page to another.
Example :
<a href="https://google.com">Go to Google</a>
To open link in new tab:
<a href="https://google.com" target="_blank">Open Google</a>
Link to another page:
<a href="about.html">About Page</a>
image Element:
- It is used to dispaly image.
- It is a self closing tag.
Example :
<img src="image.jpg" alt="Description">
<img src="image.jpg" width="200" height="150">
<a href="https://google.com">
<img src="image.jpg" alt="Google">
</a>
src - Path of the image
alt - Alternative text. It is shown when the image fails to load.
list Element:
- It is used to display items in an organized way.
- There are 3 types of list. Unordered List
<ul>, Ordered List<ol>and Description List<dl>.
Unordered List:
- Used when order does not matter. Displays with bullet points by default.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
Styling Bullet Points (square) :
<html>
<head>
<title>hi</title>
<style>
.square {
list-style-type: square;
}
</style>
</head>
<body>
<ul class="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Ordered List:
- Used when order matters. Displays with numbers by default.
<ol >
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Ordered List Types:
<ol type="A">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
<ol type="a">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
Description List:
- Used for term and description pairs — like a dictionary.
<dl>
<dt>Term</dt>
<dd>Description of the term</dd>
<dt>Another Term</dt>
<dd>Description of another term</dd>
</dl>
Table Element:
- It is used to display data in rows and columns.
Example :
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Varun</td>
<td>6</td>
</tr>
<tr>
<td>Aditya</td>
<td>6</td>
</tr>
</table>
input type:
- It is used to take user input.
- It supports multiple input types such as text, password, email, number, and more for collecting user information.
Text and Basic Input:
<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="search">
<input type="tel">
<input type="url">
Date and Time Inputs:
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">
Selection Inputs:
<input type="radio">
<input type="checkbox">
File and Media:
<input type="file">
Buttons:
<input type="submit">
<input type="reset">
<input type="button">
<input type="image">
Range & Color:
<input type="range">
<input type="color">
Form:
- It is used to collect user data. Example Login page, Registration form.
- The user input is most often sent to a server for processing.
Example :
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<br>
<br>
<input type="submit" value="Submit">
</form>
Top comments (0)