An HTML Element is a component of an HTML document that helps us to give the desired structure to a web page. HTML Element starts with one starting tag, some content, and an ending tag. Everything from the beginning to the ending tag is considered one HTML Element.
HTML Element examples:
<h1>This is a Heading</h1> <p>This is a Heading</p> <hr>
| Element | Description |
|---|---|
| <h1> |
The <h1> element represents the highest level
of the heading section. There are a total of six heading levels from <h1> to <h6>. |
| <p> | The <p> is a block-level element that is used to represent a paragraph or block of text separated from an adjacent block by blank lines. |
| <hr> | The <hr> element represents a thematic break in HTML (e.g. shift of topic within a section). It is displayed as a horizontal rule or line that is used to separate content in an HTML page. |
Some HTML elements do not have any content so they do not require any closing tag and these types of elements are called Empty elements. (alert-warning)
Nested Elements in HTML.
When one element is present inside another, they are called a nested HTML element. When you start writing HTML code you will notice that almost all elements in an HTML document are nested by one or more elements.
Nested Element example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>This is the title of the Web Page.</title> </head> <body> <h1>This is a heading.</h1> <p>This is a paragraph.</p> </body> </html>
(getButton) #text=(Try in Code Editor) #icon=(link) #color=(#34C722)
The above example contains many HTML elements like (<html>, <head>, <meta>, <title>, <body>, <h1> and <p>). (alert-success)
The <html> is the root element of the entire HTML document. Inside <html> you can see there is one <head> element and one <body> element so we can say that <head> and <body> element are nested inside <html> tag. (alert-success)
The <meta> and <title> elements are present with two levels of nesting because they are inside <head> element and <head> element itself present inside <html> element. (alert-success)
The <h1> and <p> elements are also present with two levels of nesting because they are inside <body> element and <body> element itself present inside <html> element. (alert-success)
Few important points to keep in mind about HTML Elements:
- Some HTML elements give you correct results even if you forget to add the ending tag but it is not recommended to do so because sometimes it might give us an unexpected error.
<h1>This is a heading. <p>This is a paragraph.
Output:
 |
In the above output, we can see that <h1> tag is giving us correct result even without end tag but <p> tag is showing incorrect result and acting like <h1> tag because the ending tag for <h1> is missing and HTML document is unable to find the ending of heading element. (alert-warning)
HTML tags are not case-sensitive but it is always recommended to work work with lowercase in HTML.
<H1>This is an Uppercase Heading.</H1> <P>This is an Uppercase Paragraph.</P>
Output:
 |
When we run the above HTML tag with a lowercase or uppercase tag it is going to us the same result.
(getButton) #text=(Complete List of all HTML Elements) #icon=(link) #color=(#2339bd)
👉Support Us by Sharing our post with others if you really found this useful and also share your valuable feedback in the comment section below so we can work on them and provide you best 😊.(alert-success)
No comments:
Post a Comment