In a earlier put up, we checked out semantic vs. non-semantic HTML parts. Now, it’s frequent for internet builders to make use of HTML factor and HTML tag interchangeably. However are they actually the identical factor? Or is there greater than meets the attention?
Let’s decode this lingo!
HTML Tag
A tag is used to create an HTML factor in supply code. After we say tag we should consult with the opening <tagname> or closing </tagname> syntax utilized in HTML paperwork. Tags are available pairs for many parts, with a gap tag marking the start of the factor and a closing tag marking the top.
Nevertheless, some tags are self-closing, resembling <img /> or <br />, which don’t want a closing tag.
HTML Component
An HTML factor is a DOM factor. It refers to the whole lot from the beginning tag to the top tag, together with the tag itself, its attributes, and the content material in between. A component can include:
- the opening tag: <p>
- the content material: Howdy, World!
- the closing tag: </p>
So if you write <p>Howdy, World!</p>, you are making a paragraph factor. Components may also be nested, which means you possibly can have parts inside parts, they usually can comprise attributes that present further details about the factor.
Instance
Let’s take a look at an instance as an example the distinction:
<a href="https://www.instance.com">Go to Instance.com</a>
The HTML Tags embrace:
- the opening tag <a> (which additionally shops the factor’s attribute href with its corresponding worth).
- the closing tag </a>.
The HTML Component is your entire line of code, together with
- the opening tag <a>,
- the attribute href=”https://style-tricks.com/corinamurg/https://www.example.com“,
- the content material Go to Instance.com, and
- the closing tag </a>.
Conclusion
In HTML, the phrases “factor” and “tag” are associated however have distinct meanings:
- a tag is part of a component that defines the factor’s kind and bounds
- a component consists of the tags, attributes, and content material.
Supply: MDN (see hyperlink under)
