What is the difference between a tag and an element in HTML

Question:

Well, I want to clarify that my main doubt is not what is the difference in terms of structure, for example, I know that the element is a whole, which would be the initial tag, attribute, content and closing tag, all that is a element as in the following example:

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

As long as the tags are only to mark the beginning and end of an HTML element, that is, nothing else would be this: <p></p>

But my question is, what is the difference in your concepts? Is the element just any component of an HTML document? and Is the label the function or the type of data to be put in the document?

Answer:

If you review the documentation you can understand the difference:

Elements

The element is a well defined entity by W3C Recommendation with a specific function. In fact there are currently six types of elements:

  1. Void elements

     area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr
  2. The template elements

     template
  3. Raw text elements

     script, style
  4. escalable raw text elements

     textarea, title
  5. Foreign elements

    Elements of the MathML namespace and SVG namespace.

  6. Normal elements

    All that we traditionally know as p, div, span

Each element as I said above has a definition in the specification. See for example how a p element would be defined . In other words, p is all that and now it must be written according to the rules, with the help of labels.

Labels

They are a part of the elements.

Tags are used to delimit the start and end of elements in markup. Plain text, escalable plaintext, and normal elements have a start tag to indicate where they begin and an end tag to indicate where they end. The start and end tags of certain normal elements can be omitted, as described in the optional tags section. Those that cannot be omitted should not be omitted. Empty items only have a start tag. Final tags should not be specified for empty elements. Foreign items must have a start tag and an end tag, or a start tag marked as self-closing, in which case they should not have an end tag.

In the sub-sections 8.1.2.1 Start tags and 8.1.2.2 End tags you will see that there are two types of tags: start and end. There it is also specified what each one consists of and what its purpose is. You have to read and understand these two sections to know what a label is in itself.

In this element:

<p id="miParrafo">Lorem ipsum dolor sit amet</p>

There are two tags, a starting tag: <p id="miParrafo"> and an ending <p id="miParrafo"> </p> and the element is an element of the normal type used in HTML to represent a paragraph.

Here is something interesting that confuses many people: This element for example (of type void) has no closing tag:

<br />

Why? So the number 6 that defines the opening tags says :

  1. So if the element is one of the empty elements, or if the element is a foreign element, then there can be a single character U + 002F SOLIDUS (/). This character has no effect on empty elements, but on extraneous elements it marks the start tag as self-closing .

If we write the element like this: <br> would do the same as <br /> . And in colloquial language we could say that <br> is an HTML element whose function is to produce a line break and whose initial tag is <br> , as it is an empty element (void) it does not have a closing tag. And if we define it like this: <br class="myBreak"> we would say that it is an element whose initial label is <br class="myBreak"> .

In summary we can say that: the element is the entity that represents a simple component of the DOM and that the labels delimit and define the characteristics of that component in terms of markup.

Scroll to Top