106

I notice that most people use the words HTML tags and HTML elements interchangeably.

But what is the difference between them?

The way I see it is that tags are in the source code and elements are processed tags (by the browser) in the DOM. Am I wrong?

1
  • 2
    valid question even in 2020 and will remain in 2040 as well :)
    – vikramvi
    Jul 6, 2020 at 9:44

9 Answers 9

154

HTML tag is just opening or closing entity. For example:

<p> and </p> are called HTML tags

HTML element encompasses opening tag, closing tag, content (optional for content-less tags) Eg:

<p>This is the content</p> : This complete thing is called a HTML element

5
  • 11
    This is a great answer because one expects something esoteric or even a little complicated, but instead it's just a really useful specialization of vocabulary for good granularity when speaking about HTML. Does anyone know if these terms also apply to XML? Jan 12, 2015 at 16:21
  • 2
    then what about <img src="" /> ? Is it a html tag or html element ? Aug 12, 2016 at 9:08
  • 3
    @YuvrajPatil it's both. It's a tag without content, and it's an element too Sep 27, 2016 at 5:39
  • 1
    @YuvrajPatil Also known as a "empty element". I believe in the past they were also referred to as "void" or "self-closing" tags.
    – Juan Marco
    Nov 4, 2020 at 13:03
  • @JuanMarco This is speculating, but one would assume that the empty element / self-closing tag distinction maps over the above element/tag distinction, right? That is, an empty element is defined by a self-closing tag.
    – Sam
    Dec 19, 2021 at 10:48
29

HTML tags vs. elements vs. attributes

HTML elements

An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:

<p>
This is the content of the paragraph element.
</p>

HTML tags

Tags are used to mark up the start and end of an HTML element.

<p></p>

HTML attributes

An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.

The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. Alt is an attribute, not a tag.

<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">

Source: 456bereastreet.com: HTML tags vs. elements vs. attributes

8

HTML Elements

An HTML element usually consists of a start tag and end tag, with the content inserted in between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag. Source

HTML Attributes

An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value.

  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value" Source

HTML Tag vs Element

"Elements" and "tags" are terms that are widely confused. HTML documents contain tags, but do not contain the elements. The elements are only generated after the parsing step, from these tags. Source: wikipedia > HTML_element

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.

For example <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.

Source:tutorialspoint > html_elements

8

lets put this in a simple term. An element is a set of opening and closing tags in use.

Element

<h1>...</h1>

Tag H1 opening tag

<h1>

H1 closing tag

</h1>
2
  • 1
    just curious, is html class considered a form of html element?
    – adelle
    Mar 29, 2020 at 8:19
  • 1
    My answer is yes. like i said, above an "opening tag, its content and the closing tag" is called an element. <html>content...</html> So yes html is a tag but put together with opening and closing tag it becomes and element.
    – katwekibs
    Jun 7, 2020 at 17:16
7

Html Elements:

An Html Element consists of an opening and closing tag with the content inserted in between:

For Example:

<p>HTML Element</p>

Html tag:

The HTML tag is just an opening or closing entity. For Example: <p> and </p> are called Html tags.

enter image description here

3

http://html.net/tutorials/html/lesson3.php

Tags are labels you use to mark up the begining and end of an element.

All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".

Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.

HTML is all about elements. To learn HTML is to learn and use different tags.

For example:

<h1></h1>

Where as elements are something that consists of start tag and end tag as shown:

<h1>Heading</h1>
0
1

Tags and Elements are not the same.

Elements


They are the pieces themselves, i.e. a paragraph is an element, or a header is an element, even the body is an element. Most elements can contain other elements, as the body element would contain header elements, paragraph elements, in fact pretty much all of the visible elements of the DOM.

Eg:

<p>This is the <span>Home</span> page</p>

Tags


Tags are not the elements themselves, rather they're the bits of text you use to tell the computer where an element begins and ends. When you 'mark up' a document, you generally don't want those extra notes that are not really part of the text to be presented to the reader. HTML borrows a technique from another language, SGML, to provide an easy way for a computer to determine which parts are "MarkUp" and which parts are the content. By using '<' and '>' as a kind of parentheses, HTML can indicate the beginning and end of a tag, i.e. the presence of '<' tells the browser 'this next bit is markup, pay attention'.

The browser sees the letters '

' and decides 'A new paragraph is starting, I'd better start a new line and maybe indent it'. Then when it sees '

' it knows that the paragraph it was working on is finished, so it should break the line there before going on to whatever is next.

- Opening tag.

- Closing tagenter image description here

0

This visualization can help us to find out difference between concept of element and tag (each indent means contain):

- element

        - content:

            - text 

            - other elements 

            - or empty

        - and its markup

            - tags (start or end tag)

                - element name

                - angle brackets < >

                - or attributes (just for start tag)

                - or slash / 
-1
<p>Here is a quote from WWF's website:</p>.

In this part <p> is a tag.

<blockquote cite="www.facebook.com">facebook is the world's largest socialsite..</blockquote>

in this part <blockquote> is an element.

1
  • This doesn't really seem to answer the question. Sep 6, 2015 at 20:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.