HTML Elements
In HTML, an element is a fundamental structure of HTML document that specifies how content(such as text, link, image or something nothing) appear on the webpage .They consist of a start tag, content tag, and end tag. Element is the faundamental unit of HTML page. HTML element is made up of:
Basic Components of an HTML Element:
- Opening tag (also called
start tag) - Content (the visible text or media)
- Closing tag (also called
end tag)
Examples of HTML Elements:
Some example of the HTML element are given below:
<p> This is my first paragraph </p>
<div> This is my division content </div>
The following table show different parts of the HTML element(opening tag, closing tag and content tag) in the above example:
| Opening Tag | Content | Closing Tag |
|---|---|---|
| <h1> | This is my first heading | </h1> |
| <p> | This is my first paragraph | </p> |
| <div> | This is my division content | </div> |
Types of HTML Element
Container Elements(Paired)
A container element has both an opening tag and a closing tag. This element started by opening tag (For example: <p>) and ended by closing tag (For example: </p)
EXAMPLE
HTML Container Elements
Empty Elements (Self-closing Tags)
An empty tag is one that does not have a closing tag.They often include attributes to define behavior or appearance.
EXAMPLE
Empty Elements List
Structure of HTML Element
The following image demonstrates the structure of an HTML element like how an HTML element with an opening tag and closing tag:
Difference Between HTML Tags and Elements
Tag: A tag is a piece of code that tells the browser how to display content on the web page. They have only just the opening tag <p> or a closing tag like </p>. Some tags have both an opening and a closing part, but some tags only have an opening part.
Example: <p> and </p> are tags.
Element: An HTML element is the whole structure that include opening tag, content tag and closing tag (<tag>content</tag>)
Example: <p>This is my first paragraph</p> is an element.
Nested HTML Elements
When one or more HTML element placed inside another element are called nested elements. such as a paragraph inside a <div>, are called nested elements. This also help in organized and structured the content on a webpage are more effectively .The outer tag (</div>) is called parent element .The inner tag (<p>) is called child element. The child element is always placed inside the parent element.
EXAMPLE
<p> This is the HTML element </p>
</div>
<h1> Welcome </h1>
<p> Nested HTML Elements </p>
</section>
The <section> part represent the parent element and <h1> <p> represent the child element.
SEO and Accessibility Benefits
- Good nesting increases SEO readability for search engines.
- And nesting allows browsers and screen readers to read the page correctly.
- With the help of nesting they minimize the layout bugs and increase the user experience
In the above example the <html>, <head> , <body> tags are also nested element , because we placed one or more HTML element inside them.
Void Elements
In HTML, Void Element ( also called Empty Elements) are those that do not have ant content tag and do not need have any closing tag.
we usually see these tags written with a slash / at the end like this <br /> . This order mostly used in XHTML-style syntax and is not required in modern HTML5 . But in HTML5 we simply used this like <br > , <hr> , <img> etc
HTML Attribute
Attribute provide additional information about HTML element. They always used within the opening tag of the HTML element.HTML attributes generally appear as name–value pairs, separated by = , and are written within the start tag of an element, after the element's name: <p> element attribute="value">element content</element></p> When we used multiple attribute by separating them with spaces.
EXAMPLE
Are HTML Element are Case-Sensitive?
HTML is not case sensitive, which means we can write HTML element in the uppercase or in lowercase. Like <P> and <p> are considered the same. But mostly we used the lowercase tag (recommended in HTML5) to make the code clean and readable.
In the above example we used the mixed case (lowercase and uppercase),see the ouptut ,no error and give me fine output.