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 :
- 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 :
- 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 :
- 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>
SOCIAL SHARE CARD GENERATOR