HTML Basic Elements part. 2

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

HTML Elements

1. HTML <div> tag

The <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 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>

<h2>The Button Element</h2>
<button type="button" onclick="alert('Hello :D')">Click Me!</button>

</body>
</html>


Output:



Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: powderblue;
  border: none;
  color: white;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>HTML Button</h2>

<button>Default HTML Button</button>
<button class="button">Styled Button with CSS</button>

</body>

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 <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 with-in <!--...--> 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!




Comments

Post a comment

Hi, thank you for taking the time to leave a comment :)

Popular Posts