Syntax of HTML Elements, Basic HTML Elements, Examples of HTML Elements, Nested HTML Elements, Types of HTML Elements
If you need to know what is HTML Elements? Or how you should use it, then I recommend you to read the lesson “HTML Tags and HTML Attributes.” Which you can find in the HTML tutorial section.
An HTML markup language is used to create web pages on WWW. If you are a regular visitor of this site and you have read our HTML tutorial lesson, then you know what HTML is and how does it work?
A web page is nothing without an HTML elements tag. It is an essential part of the HTML language. Without it, it is impossible to create an HTML document. So let's start by knowing the definition of HTML elements;
{tocify} $title={Table of Contents}
What is HTML Element?
An HTML element is defined by a start tag, some content, and an end tag.
For example, The <p> element tag is used to add text to an HTML file, something like this:
<p> This is a paragraph </p>{codeBox}
Syntax of HTML Element
An HTML element is a collection of a start tag, attributes, end tag, and page content between them.
For a better understanding, let's look at the syntax of HTML elements:
<tagname> Content occurs here… </tagname>{codeBox}
Basic HTML Elements
Basic elements of an HTML page:
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags for header.
- <p> tag for a paragraph.
- <a> tag for link.
- <img> tag to add image
- <span> tag for text span
- The <hr> tag is used for the horizontal ruler.
- There is a <div> tag for the divider.
Example of HTML Elements
HTML elements are consistently executed by the start tag and closed by the end tag. But some tags, such as <br>, do not require an ending tag.
Here is an “Example of HTML elements”:
| start tag <..> | content | end tag </..> |
|---|---|---|
| <p> | This is the paragraph. | </p> |
| <h1> | This is heading 1. | </h1> |
| <h2> | This is heading 2. | </h2> |
| <br> | nothing | nothing |
To understand practically, copy the code given below, paste it into your HTML editor tool, save it as TiH.html and open it in the browser:
<!DOCTYPE html><html><head><title>HTML elements</title></head><body><p> I'm learning HTML elements </p><h1> HTML elements Tutorial </h1><h2> How it looks? </h2><p> It looks Excellent! <br> By www.akashtimes.com </p></body></html>{codeBox}
The output will display something like this in the browser:
In the example, the use <br> tag is an empty element tag; that is, there is no ending tag, and we have also used inside a tag that is nested elements.
What are Nested HTML Elements?
If another tag is used within one HTML tag, then it is called a Nested HTML element.
For example, you are writing a paragraph and want to bold some important words. then you have to use <b> tag within <p> tag itself
Something like this:
<p> My name is <b> Md Badiruddin </b> </p>{codeBox}
Types of HTML Elements
All elements in the HTML file are divided into two categories to perform default and styling:
- Block-level element:
- inline elements
.jpeg "Block-level element vs inline elements")
#1. Block-level element
In HTML, a block-level element is any element that starts a new line (e.g., a paragraph) and uses the entire width of a page or container.
This element can take up a single line or multiple lines, and there is a line break before and after the element.
Examples of block-level elements: <address>, <aside>, <article>, <blockquote>, <canvas>, <div>, <figcaption>, <table>, <header>, <form>, <main> , <nav>, <noscript>, <p>, <footer> etc.
#2. inline elements
It doesn't start on a new line. The inline element only takes as much width as necessary. And it is mainly used with other elements.
Examples of inline elements: <a>, <b>, <br>, <button>, <code>, <img>, <script>, <span>, <strong>, etc.
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML Elements.” If this post is favorable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
