Understanding HTML Elements With Examples
HTML elements are fundamental components used to structure and define content on web pages, encompassing tags like headings, paragraphs, and links.
In our previous article, we discussed some essential and basic HTML tags. In this blog, we will learn about HTML elements. Elements are the fundamental building blocks of any HTML page. They consist of tags that surround different types of content. Putting together different elements can help us create visually attractive HTML pages and applications. Now, let’s explore this concept, its functions, and its attributes.
Explore Popular HTML Courses
Must Check: How to Create Table in HTML
Table of Contents
- What are HTML Elements?
- HTML Elements vs Tags
- What are Empty HTML Elements?
- What are Nested HTML Elements?
- HTML Elements Types
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
What are HTML Elements?
HTML documents are made up of elements that define content in that webpage. It is made of tags that surround different types of content.
In simple terms, anything from the start tag to the end tag is an HTML element. Web browsers do not display HTML tags but use them to understand the page’s content.
Structure of an HTML element:
An HTML element usually consists of three parts:
- Opening tag <tag name>: Name of the tag wrapped in angle brackets.
- Closing tag </tag name>: Name of the tag with a forward slash before it.
- Content: The content that the tags will display, such as plain text, links, and images.
Syntax:
<tagname attribute="rule">Content</tagname>
Example:
<h1>My First Heading</h1>
Check out: HTML Heading and Paragraph Tags Explained With Examples
Elements vs Tags
Every HTML tag is written between an open angle bracket (<) and a close angle bracket (>). The closing tag also contains a forward slash before the name of the particular tag(</tagname>).
Example:
<p> is an opening tag
</p> is a closing tag
On the other hand, elements consist of an opening tag and a closing tag with content. Elements can also have attributes that define their additional properties. Tags define the beginning and end of an element, while elements are the units that build web pages. Elements can contain semantic meaning, formatting instructions, and content.
Example:
<p>My first paragraph.</p>
What are Empty HTML Elements?
All elements do not require a closing tag. For example, the image <img> element does not need a closing tag. It uses attributes to specify content.
The elements in HTML that do not end tag and content are known as Empty elements or Void elements. The empty elements are self-closing and not container tags.
Some examples of Empty elements include <br>, <link>, <img>, <hr>, and <meta>.
Must read: HTML Formatting: HTML Tags for Text Formatting (With Examples)
What are Nested HTML Elements?
They can contain any number of additional elements. It means that one element can be placed inside another element. We can add multiple HTML tags to a single piece of content using nesting.
Example:
<!DOCTYPE html><html> <body> <p> This is an example of <strong> Nested Elements </strong> </p> </body> </html>
Code Explanation:
- The <html> element has a start tag <html> and an end tag </html>. It is the root element that defines the HTML document.
- Inside the <html> element, there is a <body> element (start tag <body> and end tag </body>) that defines the document body.
- Inside the <body> element, there are two other elements: <p> and <strong>. The <p> tag defines a paragraph while <strong> defines text with strong importance.
Paste the above code in your myfile.html file (Notepad in Windows). Save the file and reload it in the browser. It will display the following result:
Explore the Difference Between HTML and XML
HTML Elements Types
There are two types: block-level and inline elements.
Block-level Elements
The block-level elements comprise the document’s structure by dividing a page into blocks. They take up the entire 100% of the available width. These elements are rendered with a line break before and after. They always start with a new line. Some common examples of block-level elements include <p>, <h1> through <h6>, <div>, <ol>, <ul>, <li>, and <form>.
Structure.
Example:
<!DOCTYPE html> <html> <body> <h1 style="background-color: cyan">This Is A Heading Block Level Element</h1> <p style="background-color: lightcoral">This is a Paragraph block level element</p> <div style="background-color: springgreen">This is div block level element</div> </body> </html>
Output:
Inline elements
The inline elements take up only as much space as they need, and they do not start with a new line. Some commonly used inline-level elements include <a>, <img>, <strong>, <sub>, <sup>, <b>, <em>, <i>, <span>, <button>, and <input>.
Block-level elements may contain other block-level or inline elements. But inline elements cannot contain block elements.
Example:
<!DOCTYPE html> <html> <body> <a href=" https://www.shiksha.com/online-courses/ ">Shiksha Online Home Page</a> <span style="background-color: steelblue">This is inline element</span> </body> </html>
Output:
Read Later
The inline elements will rest side by side on an HTML document unless you provide a break with an additional <br> element.
Example:
<a href=" https://www.shiksha.com/online-courses/ ">Shiksha Online Home Page</a> <br><span style="background-color: steelblue">This is inline element</span>
Output:
Block-level elements will always push inline-level elements to the next line, even if we write them on the same line. In the below example the block-level heading element <h1> has started on a new line. It has pushed the subsequent inline element to a new line.
Example:
<!DOCTYPE html> <html> <body> <strong>Strong text</strong><h1>First Heading</h1><em>Emphasized text</a> </body> </html>
Output:
Check out the Top HTML Interview Questions and Answers
Conclusion
This article taught us what HTML elements are and their types. We also explored how they can help us create stunning web pages and applications. In our upcoming blogs, we will cover some more interesting and useful concepts in HTML. Stay tuned!
Rashmi is a postgraduate in Biotechnology with a flair for research-oriented work and has an experience of over 13 years in content creation and social media handling. She has a diversified writing portfolio and aim... Read Full Bio
Top Picks & New Arrivals
