I notice that most people use the words HTML tags and HTML elements interchangeably.
But what is the difference between them?
The way I s
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
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 taglets 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>
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
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 /
<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.