Using custom tags in place of <div>

Is this acceptable code, and if it is, is there a name for it?

What’s it called when you do this?
And is this good practice?
Or should I stay away from it?

i.e., is this something I should avoid?

Going from this:

 <div class="video" data-id="M7lc1UVf-VE"></div>
 const video = document.querySelector(".video");

To this:

<youtube data-id="M7lc1UVf-VE"></youtube>
const video = document.querySelector("youtube");

Where did you get get the idea that <youtube> is a valid HTML tag?

1 Like

I saw it being used here:

But it can be any name you choose it to be.

html5 uses video as tags.

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
</video>

There are recognised tags which make up HTML. Depending on which version you are using (which doctype), different ones are valid. (There are new tags introduced in HTML5 which did not exist in HTML4, and old tags from previous versions which are now deprecated and shouldn’t be used.)

Browsers have default styles for displaying different elements, which they will apply in the absence of CSS rules targeting those elements.

If you create your own tags, how do you expect the browser to understand them and know how to display them?

<video> is a valid tag; <youtube> is not.

2 Likes

This would be considered valid then?

<video data-id="M7lc1UVf-VE"></video>
const video = document.querySelector("video");

Like @Gandalf allready said, I really wonder where you get the idea from that <youtube> is a valid HTML tag. But maybe more important, why do you want to use youtube as a tag and not just use the valid video tag and simply use the title attribute to state that it is a youtue movie:

 <video title="Youtube" ...>

How does adding title to this serve a purpose?
It doesn’t provide a tooltip when hovering over the video?

<video title="Youtube" data-id="M7lc1UVf-VE"></video>
const video = document.querySelector("video");

Hahaha now your funny. And the

did? If you are more clear in what you want it’s way easier to solve it for others

Edit: if you need a tooltip you should have asked

These are <video> tags, not <youtube> tags.
In your code you added title to it.

<video title="Youtube" data-id="M7lc1UVf-VE"></video>
const video = document.querySelector("video");

That was not in your actual post and that is where I on reacted. You should be a bit more clearer in what you’re after

You suggested I add a title to it, and I wanted to know how come?
If no tooltip pops up when hovering over the playing video.

<video title="Youtube" ...>

The title would actually go on the jacket part.

<div class="jacketc" title="Youtube">

Then it would be able to be viewed.

You said in your OP that you wanted to use a custom tag

On which me and others reacted that is not a valid tag. So I presumed that you wanted to make clear that it was to identify a youtube movie.That why I suggested a title atribute. So if you tell us what you want to accomplisch, it makes it easier for us to help you.

So first question. Why did you wanted to use a cusom tag?

2 Likes

Then I’ll make a new topic where just the <video> tag is discussed so it doesn’t get confusing.

Thank you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.