March 18, 2024
What is the difference between Elements and Attributes?Elements
HTML elements are defined using tags. They start with the opening tag, close with the closing tag, and allow to write content between opening and closing tags. Tags are used to angle brackets (<>). That simple syntax is <tag > content </tag>.
<h1> This is a content </h1>
This is a simple example of an element.
Let’s see different types of elements. In this, an empty element is one type of part of the element.
Empty Elements
These elements have no content. They do not have an end tag. So, They are therefore also called self-closing tags. <br>, <hr>, <img>, ,<input> these are all example of empty tags.
Nested Elements
Nested elements are allowed to write elements in elements. Let’s take an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p> This is a example of <b>Nested elements </b></p>
</body>
</html>
In the above example <html> tag is a root element. Because it is a consistent complete HTML document.
In a <p> (paragraph) element I use the <b> (bold) element.
Let’s take the second example of the Nested element.
<body>
<form>
<label> Email: </label>
<input type="text" name="email" > <br>
<label> Password: </label>
<input type="password" name="password" > <br>
<input type="submit" value="submit">
</form>
</body>
<form> element consists of input and label element.
Attributes
Elements can have attributes. That provides additional information. They are always written in the opening tag. It must always be in a name=value pair. A tag can contain more than one attribute.
This is a simple syntax of attributes.
<tag attribute = value> contain </tag>
Let's see a simple example of attributes.
<a href="https://toforzero.com/">toforzero.com</a>
Href is an attribute of <a> tag. Let’s take more examples of attributes.
<img src="./imagepath" height="100" width="100">
In the above example, we can see multiple attributes. Many attributes can be written in specific tags only. Like you can't write src attribute in <a> tag. In that, you have to use the href element to give the path.
<h1 style="background-color: aqua;"> Hello </h1>
In the above example, I use the style attribute. This attribute can be written in any tag. Using this attribute can add style to the tag.