Quick Guide To HTML Elements
Today we are discussing html elements. An HTML element consists of a start tag, a content tag, and a closing tag.
HTML elements are the foundation of web design, providing the structure and content for websites and web applications.
By understanding the purpose and function of each HTML element, you can create beautiful and functional web pages that are easy to navigate and use.
HTML Elements
HTML elements are the building blocks of a web page.
They are defined by HTML tags that are used to structure and format content on a web page.
HTML elements can include:
- Headings.
- Images.
- Links.
- Paragraphs.
- Lists.
- Tables.
- Forms.
- And more.
Each element has its own set of properties and attributes that define its appearance, behavior, and functionality.
Everything from the start tag to the end tag is an HTML element:
Some HTML elements are as follows:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | Mr-examples First Heading | </h1> |
| <p> | This Is mr-examples first paragraph. | </p> |
| <hr> | none | none |
| <br> | none | none |
| <img> |
| none |
Please keep in mind that certain HTML components, such as the <br> element, contain no content. These are known as “empty elements“. End tags are not present in empty elements!
Nested HTML Elements
There are no restrictions on how elements are nested in HTML (elements can contain other elements).
Nested HTML elements are common to all HTML documents.
There are four HTML elements in the following example (<html>, <body>, <h1> and <p>):
Example
Example Explained
The <html> element defines the entire HTML document and is the root element.
The start and end tags are <html> and </html> respectively.
Then there is a <body> element within the <html> element:
<body>
<h1>This is my third example Heading</h1>
<p>This Is my third example paragraph.</p>
</body>
The <body> element specifies the body of the document. It has a <body> start tag and a </body> end tag.
Then there are two more components within the <body> element:
<h1> and <p>:
<p>Mr-example fourth paragraph.</p>
Headings are defined by the <h1> element.
There is a start tag <h1> and an end tag </h1>:
The <p> element represents a paragraph.
It has a starting tag <p> & ending tag </p>:
You Should Never Ignore the Closing Tag.
Even if you forget the end tag, certain HTML elements will display correctly:
Example <!DOCTYPE html>
Nevertheless, please don’t rely on it! You may receive unexpected results if you forget to end the tag!
Empty HTML Elements
Elements in HTML that have no content are referred to as empty elements.
The <hr> element usually appears as a horizontal line that is used to divide content (or indicate a change) on the page.
The <br> tag, which is used to specify line breaks, is an empty element that does not have a closing tag:
Example:
Example Explanation:
The HTML code provided above demonstrates how to insert a line break and a horizontal rule in between two paragraphs.
- The code starts with the <html> tag and contains two <p> tags. The text inside the first <p> tag says “Its a” and is followed by the <br> tag. The <br> tag stands for “line break” and inserts a new line in between the text. The text “paragraph with a line break” is placed on a new line after the <br> tag.
- The second <p> tag contains the text “Its a” and is followed by the <hr> tag. The <hr> tag stands for “horizontal rule” and inserts a horizontal line in between the text. The text “paragraph with a horizontal line break” is placed below the horizontal line.
- Using <br> and <hr> tags are useful for formatting text and adding visual separation between different parts of the content. For example, <br> tag can be used to add a line break between paragraphs, or to create spacing between text and images. The <hr> tag can be used to divide the content into different sections, or to visually separate headings and subheadings.
Element Img HTML
In HTML, images are embedded using the <img> tag.
In order to use the img tag, two attributes are required:
- alt – Provides a substitute text for an image, in case it is not visible due to an error
src – Describes the image’s path
Example:
HTML is Not Case Sensitive
HTML tags are not case sensitive: Both<P> and <p> signify the same thing.
Using HTML tags, it does not matter whether they are in lowercase or uppercase.
We always use lowercase tag names at Mr Examples.
HTML Tag Reference
There is additional information about these tags and their attributes in Mr Examples’ tag reference.
| Tags | Overview |
|---|---|
| <html> | Specifies the starting point of a document in HTML |
| <body> | Describes the main part of the document. |
| <h1> to <h6> | Headings in HTML are defined here. |
Visit our HTML Tag Reference if you want a comprehensive list of all of the accessible HTML tags.
Conclusion:
An HTML element is the building block of a web page. By defining the structure and content of a web page, they provide a way for browsers to interpret and render that content. The HTML element consists of tags, attributes, and content, and can be nested to create complex structures. It is important for web developers to understand HTML elements and syntax in order to create well-structured, accessible, and easily maintainable web pages.
