The HTML element is everything from the start tag to the end tag.
<p>This is the paragraph content.</p>
This is the paragraph element. It has an opening tag, content, closing tag.
Elements that do not contain any child or parent element are called unnested elements. But that doesn’t usually happen because there is always an element inside another. Like the <title> element inside the <head> element and <body> element inside the <html> element.
To better understand the nested elements have a look at the same format I provided in the previous chapter and analyze it.
<title> Title of the document</title>
<h1>What goes inside body section?</h1>
<p>The content you want....</p>
<p>Copyright 2018 - All rights reserved</p>
The <html> element defines the whole document. This HTML element contains all other elements inside it.
The <head> element defines the document info. It contains <title> element inside it.
The <body> element defines the document body. It contains heading <h1> element and paragraph <p> element.
The <footer> element defines the post content. It contains one paragraph <p> element.
- Attributes provides additional information to a particular element.
- Attributes are always inserted inside the opening tag of an element.
- They are usually written in name/value pair like name=”value”
Example 1, consider a link element. <a> tag defines a link element like <p> tag defines paragraph element.
<a>This is a link element</a>
But the link element is not clickable yet because it has no link attached to it. To attach a link we use href attribute. href is the attribute name and link is attribute value.
<a href="https://www.4coals.in">This is a link element</a>
href stands for hyperlink reference. A link in technical terms is also called hyperlink. Now, the clickable text portion is called hypertext when a hyperlink is attached to it using href attribute.
Example 2, consider a heading element. We want that when someone hovers over the heading then he must see a tooltip that says: This is a heading.
<h2 title="This is a heading">I love my life.</h2>
To show a tooltip on mouseover we use the title attribute.
There are different attributes for different purposes.
More than one attribute can be specified for a particular element.