Continuing my previous post, today I prepared another 5 HTML elements which are frequently used in HTML documents. Se let’s take a look, how to use them in practice:
1. HTML <div> tag
2. HTML <span> tag
3. HTML <button> tag
4. HTML <br> tag
5. HTML comment tag
1. HTML <div> tag
The HTML <div> tag is an empty container, which defines section or division in an HTML document. The <div> element is often used to group together HTML elements and apply CSS styles to many elements at once.
Example:
<!DOCTYPE html>
<html>
<body>
<p>You can write some text here.</p>
<div style="background-color:lightgreen">
<h3>Heading in a div element</h3>
<p>Text in a div element.</p>
</div>
<p>You can write some text here.</p>
</body>
</html>
Output:
2. HTML <span> tag
The HTML <span> tag is used to group and applying styles to inline elements in an HTML document.
Example:
<!DOCTYPE html>
<html>
<body>
<p>My sister has <span style="color:brown;font-weight:bold">brown</span> hair and my brother has <span style="color:red;font-weight:bold"> red</span> hair.</p>
</body>
</html>Output:
3. HTML <button> tag
The HTML <button> tag defines a clickable button and can be used in forms or anywhere in an HTML document that needs simple button functionality. Inside a <button> tag you can put content (text or images). Different browsers use different default types for the <button> element, but you can change the button’s appearance with CSS.
Example 1:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello :D')">Click Me!</button>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #2a9d8f;
border: none;
color: black;
padding: 20px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<button>DEFAULT BUTTON</button>
<button class="button">STYLED BUTTON</button>
</body>
</html>Output:
4. HTML <br> tag
The HTML <br> tag inserts a single line break. The <br> element is an empty tag which means it has no end tag.
You can use the <br> tag to enter line breaks, not to separate paragraphs.
Example:
<!DOCTYPE html>
<html>
<body>
<p>
You can use br <br> tag to enter line breaks, <br> not to separate paragraphs.
</p>
</body>
</html>Output:
5. HTML <!–…–> comment tag
The HTML comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. Adding comments into HTML code can help you or someone looking at the code to indicate sections of a document (especially in complex documents).
The HTML comments are placed in between <!–…–> tags, so any content placed within <!–…–> tags will be treated as a comment.
Example:
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>You can put some text here.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>Output:
That’s all for now 🙂
Enjoy coding!
Read also: