What are the HTML elements explain with an example

4 years ago
Shahzad Gujjar
5,277 Views
5

This guide will teach you about HTML tags and elements.

HTML Element Syntax

An HTML element is an individual part of an HTML document. It reflects semantics or context. The title element, for example, reflects the document’s title.

With content in between, the majority of HTML elements have a start tag (or opening tag) and an end tag (or closing tag). Elements may also have attributes that describe their extra properties.

A paragraph, for example, defined by the p element, would be written as:

In the following chapter, we’ll learn the HTML attributes.

NOTE: The presence of an end tag or a closing tag is not required for all elements. These are known as void elements, empty elements, or self-closing elements.

HTML Tags Vs Elements

An HTML element is technically the set of a start tag, its attributes, an end tag, and everything in between. As seen in the preceding example, an HTML tag (either opening or closing) is used to mark the beginning or end of an element.

In common parlance, however, the terms HTML element and HTML tag are synonymous, i.e. a tag is an element is a tag. For the sake of consistency, the words “tag” and “element” are used interchangeably on this website to mean the same thing — as it will describe anything on your web page.

Case Insensitivity in HTML Tags and Attributes

The names of tags and attributes in HTML are not case-sensitive (but most attribute values are case-sensitive). It means that the tags <P> and <p> in HTML both refer to the same thing: a paragraph.

However, they are case-sensitive in XHTML, and the tag <P> is separate from the tag <p>.

<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>

Note: We recommend that you use lowercase for tag and attribute names in HTML, as this will make your document more compliant for future upgrades.

Empty HTML Elements

Empty elements (also known as self-closing or void elements) are not container tags, so you cannot write <hr>some content/hr> or <br>some content</br>.

The <br> element, which represents a line break, is a common example of an empty element. Other common empty elements include <img>, <input>, <link>, <meta>, <hr>, and so on.

<p>This paragraph contains <br> a line break.</p>
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">

A self-closing element in HTML is simply written as <br>. A self-closing element in XHTML, such as <br />, requires a space and a trailing slash.

Nesting HTML Elements

Most HTML elements (except empty elements) can contain any number of additional elements, which are made up of tags, attributes, and content or other elements.

The example below shows some elements nested within the <p> element.

<p>Here is some <b>bold</b> text.</p>
<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>

Note:The process of nesting is when one element is placed inside another.. If other elements are nested within it, a nested element, also known as a child element, may also be a parent element.

HTML tags must be nested in the proper order. They must be closed in the reverse order in which they were defined, which means the most recent tag opened must be closed first.

<p><strong>These tags are nested properly.</strong></p>
<p><strong>These tags are not nested properly.</p></strong>

Writing Comments in HTML

The purpose of adding comments is to make the source code easier to understand. It may assist other developers (or you in the future when editing the source code) in understanding what you were trying to accomplish with the HTML. The browser does not show the comments.

As shown in the example below, an HTML comment starts with<!– and ends with –>.

<!-- This is an HTML comment -->
<!-- This is a multi-line HTML comment 
     that spans across more than one line -->
<p>This is a normal piece of text.</p>

For debugging purposes, you can also comment out a section of your HTML code, as shown here:

<!-- Hiding this image for testing
<img src="images/smiley.png" alt="Smiley">
-->

HTML Elements Types

Elements are divided into two categories: block-level elements and inline-level elements. The former creates the structure of the document, while the latter embellishes the contents of a block.

In addition, a block element takes up 100% of the available space and is rendered with a line break before and after it. An inline element, on the other hand, can only take up as much space as it requires.

<div>, <p>, <h1> through <h6>, <form>, <ol>, <ul>, <li>, and so on are some of the most commonly used block-level elements. <Img>, <a>, <span>, <strong>, <b>, <em>, <i> <code>, <input>, <button>, and so on are some of the most frequently used inline-level components.

In the following chapters, you will learn more about these elements in depth.