Html tag and html element

What Is An HTML Tag Versus an HTML Element?

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

An HTML tag is an indication to a web browser of how a web page should displayed, but an HTML element is an individual component of HTML. HTML elements are created using HTML tags.

Many people use the terms tag and element interchangeably, and any web designer or developer you speak with would understand what you meant, but the reality is that there is a slight difference between the two terms.

HTML Tags

HTML is a markup language, which means that it is written with codes readable by a person without it needing to be compiled first. In other words, the text on a web page is “marked up” with these codes to give the web browser instructions about how to display the text.

When you write HTML, you are writing HTML tags. All HTML tags are made up of a number of specific parts. They specify the tag name between angle brackets, the content that the tag affects, and various attributes affecting the tag in a name/value pair.

This snippet displays an anchor tag, which specifies a hyperlink. The tag opens and closes. The rel attribute takes the value nofollow.

In HTML, the difference between an opening tag and a closing tag is the presence of the slash. For example, is always an opening anchor tag, and is always a closing anchor tag.

Taken together, the opening and closing tags and all that appear between them constitute an HTML element.

What Are HTML Elements?

According to the W3C HTML specification, an element is the basic building block of HTML and is typically made up of two tags: an opening tag and a closing tag.

Almost all HTML elements have an opening tag and a closing tag. These tags surround the text that will display on the web page. For example, to write a paragraph of text, you write the text to display on the page and then surround it with these tags:

This text is an example of a paragraph.

Some HTML elements do not have a closing tag; they’re called empty elements. Sometimes, they are also referred to as singleton or void elements. Empty elements are easy to use because you only have to include one tag in your web page and the browser will know what to do. For example, to add a single line break to your page, use the tag.

Another common element that only includes an opening tag is the image element. For example:

In general, developers use the term element to indicate all parts of the element (both the opening and closing tags). They use tag when referring only one or the other. This is the proper use of these two terms.

Источник

HTML Elements

In this tutorial you will learn about HTML tags and elements.

HTML Element Syntax

An HTML element is an individual component of an HTML document. It represents semantics, or meaning. For example, the title element represents the title of the document.

Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with content in between. Elements can also contain attributes that define its additional properties. For example, a paragraph, which is represented by the p element, would be written as:

We will learn about the HTML attributes in the next chapter.

Note: All elements don’t require the end tag or closing tag to be present. These are referred as empty elements, self-closing elements or void elements.

HTML Tags Vs Elements

Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or end of an element, as you can see in the above illustration.

However, in common usage the terms HTML element and HTML tag are interchangeable i.e. a tag is an element is a tag. For simplicity’s sake of this website, the terms «tag» and «element» are used to mean the same thing — as it will define something on your web page.

Case Insensitivity in HTML Tags and Attributes

In HTML, tag and attribute names are not case-sensitive (but most attribute values are case-sensitive). It means the tag , and the tag

defines the same thing in HTML which is a paragraph.

But in XHTML they are case-sensitive and the tag is different from the tag

.

Example

This is a paragraph.
 
This is also a valid paragraph.

Tip: We recommend using lowercase for tag and attributing names in HTML, since by doing this you can make your document more compliant for future upgrades.

Empty HTML Elements

Empty elements (also called self-closing or void elements) are not container tags — that means, you can not write

---

some content

or
some content
.

A typical example of an empty element, is the
element, which represents a line break. Some other common empty elements are , , , ,

---

, etc.

Example

This paragraph contains 
a line break.
 

Источник

What is the Difference between HTML Elements and Tags?

HTML Tags and Elements are sometimes perceived as the same. However, they are not. There is a subtle difference between HTML elements and tags that many people aren’t aware of.

HTML Tags are building blocks of HTML Page. They tell the browser how it should display content to the user. A tag starts with a < bracket and ends with a >bracket. Most tags exist in pairs in HTML. Tags have an opening and closing part. They are similar, except the closing part has a / sign after the opening bracket.

Syntax

Example

HTML Element includes a start tag, content, and an end tag. HTML Elements are components of the web page. Let’s say we created a div block and filled it with some text. Then the text-filled div becomes the component of the HTML Page. The tags along with the content inside it becomes a component and HTML Element. This will be rendered and shown to the user.

An HTML element consists of a start tag, some content, and an end tag. You can also have attributes in your tags such as class or id name.

Examples of HTML Elements and Tags

Now that we know the difference between HTML Elements and Tags, let’s go over certain examples of HTML Elements and Tags to understand better what separates an HTML element from a tag.

Examples of HTML Tags

First, let’s take an example of HTML Tags. There are plenty of HTML Tags. Most of these tags exist in pairs. Examples of such tags and their meaning are listed below:

Tag	Description
html	Defines the root of the HTML Document
head	All the metadata for the HTML document, and CSS are defined in the Head tag
body	It defines the body of an HTML document. All Contents of HTML content is contained in the body tag.
p	It represents paragraphs in HTML Document.
div	It helps the user to create div or blocks for their HTML Element.
table	It helps the user to create a table for the HTML Page.
img	It is an example of a single HTML Tag. It helps the user to insert images on the HTML page.
br	Another Example of a single HTML Tag. It helps the user insert line breaks on the HTML page.

Examples of HTML Elements

Now let’s have a look at HTML Elements. HTML Elements are the content that is enclosed inside the HTML Tags.

The above paragraph is an example of an HTML Element. There is a start element, content, and an end tag. The paragraph will be rendered on the HTML page and visible to the user.

Empty HTML Elements

The HTML element doesn’t need to have content inside it. It can be empty.

For example, the above HTML tag creates a horizontal line on the web page. It is considered an HTML Tag. It has a start tag but no content and no end tag. This is an example of Empty HTML Elements.

HTML elements can also have attributes that explain more about them. They are usually used in tags and can define several things, such as class associated with the tag or id associated with tags.

In the above HTML Element example, the image tag has src and alt attributes associated with it. They tell us the source of the image and the text that needs to be displayed if the HTML page is unable to load the image.

Nested HTML Elements

Modern-day websites are very complicated in terms of design and build. There are rare instances where you would create simple HTML elements such as a single block with text inside it etc. Many times, you would create a div block and create another div block inside it. This is called nesting. Nesting of HTML elements is also frequently done in recent or modern websites.

The above code display nesting of HTML Element perfectly. You created a parent div element with a starting tag, content, and an ending tag. The content of the parent div is nothing but another HTML Element with a start tag, content, and end tag.

HTML Tags vs Elements

To understand the difference between tags and elements, you can refer to the difference table below-

HTML Tags	HTML Elements
It consists of an opening bracket and a closing bracket.	It consists of a starting tag, content, and an end tag.
Usually consist of reserved keywords that have a unique meaning.	It consists of a generalized component that user wants to display on their HTML page.
They cannot be nested.	They can be nested.

Learn More about HTML

With that, you now know the difference between HTML Elements and Tags. If you need to study more about HTML or HTML Tags, then you can refer to the given links-

Conclusions

• HTML Tags are building blocks of HTML Page.
• HTML Elements are components that are used in HTML Page.
• HTML Tags usually exist in pairs consisting of a starting and an ending tag. However, some tags do not have a closing tag.
• HTML Elements contain a starting tag, content, and an ending tag. If there is no content in an HTML Element, it is called an Empty HTML Element.
• HTML Elements can be nested. There can be an HTML element with another HTML Element as its content.

Источник